Javascript-форум - не срабатывает на второй раз ajax[отправка формы]

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - не срабатывает на второй раз ajax[отправка формы] (https://javascript.ru/forum/jquery/11872-ne-srabatyvaet-na-vtorojj-raz-ajax%5Botpravka-formy%5D.html)

не срабатывает на второй раз ajax[отправка формы]

Здравствуйте!

Такой вопрос:

написал программу, которая имитирует систему проверки знаний: на страничке текст вопроса и несколько вариантов ответа.
пытаюсь с помощью аякса(POST запрос) отправлять в фоне данные формы(выбранный ответ)
Нажимаю кнопку Submit и данные уходят на сервер. Там они обрабатываются и приходит текст следующего вопроса и варианты ответа.
Выбираю ответ и нажимаю Submit - данные уходят уже не через аякс - отправка происходит обычным GET_ом и страничка перегружается(обновляется так как обработка происходит кодом, который на этой же странице).
После этого GET_а и вызванного им перегрузки(обновления) страницы аякс снова срабатывает при отправке очередного ответа на вопрос.

Если после первого срабатывания аякса обновить страницу - аякс сработает и второй раз.
Это дает повод предположить, что проблема в "видимости " скрипта?
После того как пришел ответ с сервера, я этот ответ показываю в определенном DIV_е и все, что оказывается за пределами этого DIV_а становится недоступным?

Подскажите пожалуйста, что нужно сделать, чтобы результаты постоянно отправлялись аяксом? Где я не прав?

вот кусочки кода:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/func.js"></script>
<title>Система проверки знаний</title>
</head>
<script type="text/javascript">
$(document).ready(function(){  
           
             $('#myForm').submit(function(){  
                 $.ajax({  
                     type: "POST",  
                     url: "test.htm",  
                     data: "answers="+idr,  
                     success: function(html){  
                         $("#content").html(html); 
alert("ajax!"); 

                     }  
                 });  
                 return false;  
             }); 
         }); 
var idr = 0;
</script>
<body >
<div id="content">
<div id="nifty"> 
	<form id="myForm" name="testForm">
		<center>
			<table cellpadding=4 cellspacing=2 border=0>
			<tr>
				<td class="question" colspan="2">${questionList.question}</td>
			</tr>
				<c:forEach items="${answerSet}" var="answer" varStatus="status">
					<tr >
					<td width="20">
<input type="radio" name="answers" value="${answer.id}" checked onClick="if(this.checked) {idr=value;}"></td>
<td>
<label>${answer.answer}</label>
</td>
				</tr>
				</c:forEach>
				
			<tr>
					<td colspan="2" align=center><input type="submit" id="subm" value="Дальше"></td>
			</tr>
			</table>
		</center>
	</form>
</div>

</div>
</body>
</html>

А почему не

$("#myForm").submit(function() { 
			$(this).ajaxSubmit({/*обработчик*/});
});

Сформируйте обычную форму которая по-средствам выше написанного скрипта будет отправляться специально подготовленному php скрипту на сервере. Который в свою очередь любым вам удобным форматом вернет результат. (например мне кажется тут JSON подойдет)

2MadGest
Я не очень силен в jQuery. Насколько я понял Ваш вариант решения моей проблемы предполагает использование плагина jQuery Form Plugin?

Я сделал вот так:

$('#myForm').live('submit', function(){
.....

после этих действий все данные отправляются аяксом!

Но возникла следующая проблема:
добавил ещё таймер(в отдельном div'е обратный отсчет) и кнопочку, нажав на которую этот div с убывающими
числами красиво "уплывают".
Но когда нажимаю на кнопочку "Дальше", появляется новый вопрос, новые ответы -- так и должно быть + НОВАЯ кнопочка "Таймер" - почему она появляется? Если нажать на F5 - "лишняя кнопочка Таймер" исчезает.
Ведь в обработчике я по сути загружаю новые данные только в

<div id="content">

Ссылку не могу дать, так как сижу на диалАп (
Код :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="javascript/jquery.js"></script>
<script type="text/javascript" src="javascript/func.js"></script>
<title>Система проверки знаний</title>
</head>
<script type="text/javascript">


$(function()
{

$("#timer_btn").click(function(event) {
event.preventDefault();
$("#div1").slideToggle();
});


});

$(document).ready(function(){  
    
    $('#myForm').live('submit', function(){  
    	var idr = getCheckedValue(document.forms['testForm'].elements['answers']);
        $.ajax({ 
            type: "POST",  
            url: "test.htm",  
            data: "answers="+idr,  
	    success: function(html){  
                $("#content").html(html); 
        }  
        });  
        return false;  
    }); 
}); 

</script>
<body >
<div id="div_timer_btn">
<input type="button" id="timer_btn" value="Таймер">
</div>
<div id="div1">
<span id="span"></span>
</div>
<div id="content">
 

<div id="nifty"> 
	<form id="myForm" name="testForm">
		<center>
			<table cellpadding=4 cellspacing=2 border=0>
			<tr>
				<td class="question" colspan="2">${questionList.question}</td>
			</tr>
				<c:forEach items="${answerSet}" var="answer" varStatus="status">
					<tr >
					<td width="20">
<input type="radio" name="answers" value="${answer.id}" checked "></td>
<td>
<label>${answer.answer}</label>
</td>
				</tr>
				</c:forEach>
				
			<tr>
					<td colspan="2" align=center><input type="submit" id="subm" value="Дальше"></td>
			</tr>
			</table>
		</center>
	</form>
</div>

</div>
<script> 
<!-- 
// 
 var milisec=0 
 var seconds=60
 
function display(){ 
 if (milisec<=0){ 
    milisec=9 
    seconds-=1 
 } 
 if (seconds<=-1){ 
    milisec=0 
    seconds+=1 
    gg()
 } 
 else 
    milisec-=1 ;
   	document.getElementById('span').innerHTML=seconds;
    setTimeout("display();",100) 
} 
display() 
--> 
</script>
</body>
</html>

поэтому вот картинки:
До:

После ответа на вопрос:

А когда жмете дальше происходит полная перегрузка страницы?

нет, не перезагружается.
когда нажимаю дальше срабатывает ajax.
данные в фоне отправляются серверу, приходят от сервера и
попадают в

<div id="content">

а также появляется эта мнимая вторая кнопочка Таймер.
если теперь перегрузить страницу (F5) то мнимая кнопка исчезает.

Предлагаю изучить то что возвращает php возможно вы там где то и формируете кнопочку. Или JavaScript где то это дело дублирует. Для более точного ответа нужен полный исходник. Так мало что ясно.