Здравствуйте!
Столкнулся с такой проблемой: на сайте есть таблица и кнопка вызова модального окна в котором набиваются данные для очередной строки таблицы. Модальное окно вызывается, значения забиваются, но при нажатии кнопки "Ок" модального окна можно заметить как введенные данные добавляются к таблице и тут же исчезают. Может ли кто-нибудь подсказать как обойти данную проблему?
Код страницы ниже:
<html>
<head>
<meta charset="utf-8">
<style>
html, body {
margin: 0 0 0 50px;
padding: 0;
width: 100%;
height: 100%;
}
table,th,tr {
border:1px solid black;
border-collapse: collapse;
}
th,tr {
width: 100px;
}
#prompt-form {
display: inline-block;
vertical-align: middle;
border:1px solid black;
}
#prompt-form-container {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: none;
width: 100%;
height: 100%;
text-align: center;
}
#prompt-form-container:before {
display: inline-block;
height: 100%;
content: '';
vertical-align: middle;
}
</style>
</head>
<body style="height:3000px">
<h1>Нажмите на кнопку ниже</h1>
<input type="button" value="Нажмите для ввода" id="show-button">
<div id="prompt-form-container">
<form id="prompt-form">
<div id="prompt-message"></div>
<table id="input_table">
<thead>
<tr>
<th>#</th><th>Name</th><th>Qty</th>
</tr>
</thead>
<tr>
<td><input type="text"></input></td>
<td><input type="text"></input></td>
<td><input type="text"></input></td>
</tr>
</table>
<input type="submit" value="Ок">
<input type="button" name="cancel" value="Отмена">
</form>
</div>
<p></p>
<table id="table1">
<thead>
<tr>
<th>#</th><th>Name</th><th>Qty</th>
</tr>
</thead>
</table>
function showPrompt(text) {
var form = document.getElementById('prompt-form');
var container = document.getElementById('prompt-form-container');
document.getElementById('prompt-message').innerHTML = text;
form.onsubmit = function() {
var table = document.getElementById('input_table');
var tcell= new Array();
tcell[0]=table.rows[1].cells[0].firstChild.value;
tcell[1]=table.rows[1].cells[1].firstChild.value;
tcell[2]=table.rows[1].cells[2].firstChild.value;
var insert_row=document.createElement('tr');
for (var j = 0;j<3;j++){
var td = document.createElement('td');
td.innerHTML =tcell[j];
insert_row.appendChild(td);
}
var table1=document.getElementById('table1');
table1.appendChild(insert_row);
};
container.style.display = 'block';
}
document.getElementById('show-button').onclick = function() {
showPrompt("Ввод данных:");
};
</body>
</html>
