Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.07.2013, 01:19
Новичок на форуме
Отправить личное сообщение для crescent Посмотреть профиль Найти все сообщения от crescent
 
Регистрация: 04.07.2013
Сообщений: 3

Исчезают значения из модального окна
Здравствуйте!

Столкнулся с такой проблемой: на сайте есть таблица и кнопка вызова модального окна в котором набиваются данные для очередной строки таблицы. Модальное окно вызывается, значения забиваются, но при нажатии кнопки "Ок" модального окна можно заметить как введенные данные добавляются к таблице и тут же исчезают. Может ли кто-нибудь подсказать как обойти данную проблему?
Код страницы ниже:

<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>
Ответить с цитированием
  #2 (permalink)  
Старый 08.07.2013, 02:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,004

crescent,
если хотите увидеть результат в строку скрипта 25 допишите return false ;
Ответить с цитированием
  #3 (permalink)  
Старый 09.07.2013, 03:07
Новичок на форуме
Отправить личное сообщение для crescent Посмотреть профиль Найти все сообщения от crescent
 
Регистрация: 04.07.2013
Сообщений: 3

Спасибо! Сработало. Правда теперь другая проблема - окно модальное не исчезает. Как быть?
Ответить с цитированием
  #4 (permalink)  
Старый 09.07.2013, 08:09
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

var form = document.getElementById('prompt-form');
var container = document.getElementById('prompt-form-container');

function showPrompt(text) {  
  document.getElementById('prompt-message').innerHTML = text;  
  container.style.display = 'block';
}

document.getElementById('show-button').onclick = function() {
  showPrompt("Ввод данных:");  
};


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 = 'none';
	table.rows[1].cells[0].firstChild.value = '';
	table.rows[1].cells[1].firstChild.value = '';
	table.rows[1].cells[2].firstChild.value = '';
	return false;
    }; 

document.getElementById('cancel').onclick = function() {
  container.style.display = 'none';
};
Ответить с цитированием
  #5 (permalink)  
Старый 09.07.2013, 08:10
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,004

crescent,
как открыли строка 28 так и закройте перед return false
Ответить с цитированием
  #6 (permalink)  
Старый 09.07.2013, 12:22
Новичок на форуме
Отправить личное сообщение для crescent Посмотреть профиль Найти все сообщения от crescent
 
Регистрация: 04.07.2013
Сообщений: 3

Еще раз спасибо большое!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Затемнение и блокировка всего, при показе модального окна ololosh jQuery 4 03.09.2013 13:39
Вовыд модального окна pekinessik jQuery 4 05.02.2013 14:03
Обработка события после закрытия модального окна byaka Events/DOM/Window 3 11.08.2012 18:19
Доступ к значениям элементов формы модального окна. =VNK= jQuery 5 14.01.2012 14:00
Вставка данных в textarea из модального окна (для Markitup) Roman Koff jQuery 0 26.08.2010 22:21