AJAX - OnSubmit Проблема

Question

Я довольно новичок в AJAX, поэтому, пожалуйста, прости меня.

У меня есть формы - первый работает, а второй нет, и я не знаю почему. Первая форма HTML не имеет кнопки отправки, но вторая имеет. Они оба используют одну и ту же функцию JavaScript.

<script type="text/javascript">
function showUser(str)
{
if (str=="")
 {
 document.getElementById("txtHint").innerHTML="";
 return;
 } 
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
   {
   document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
   }
 }
xmlhttp.open("GET","server_script.php?q="+str,true);
xmlhttp.send();
}
</script>

От 1:

<form>
<select name="users" onchange="showUser(this.value)">
<option value="0001">0001</option>

0002

Персональная информация будет указана здесь.

От 2:

<form onsubmit="showUser(this.foo.value)">
<input type="foo" >
<input type="submit" >
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>

Answer 1

На первом ваш ajax запускает onchange, так как нет поведения по умолчанию, которое будет мешать этому.

Во второй форме вы используете событие onsubmit, которое по умолчанию отправляет форму обратно на сервер. Таким образом, вы должны return false или preventdefault в этом событии, чтобы завершить ваш ajax-код. Самым простым решением было бы просто добавить возвращаемое значение false:

<form onsubmit="showUser(this.foo.value); return false;">

Answer 2

Make showUser return false, иначе форма будет отправлена ​​браузером обычным способом.