Форма AJAX только перезагружает страницу

Question

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

форма:

<form method="get" action=""> 
Name:<input type="text" name="uname" id="uname"><br>'; 
<input type="submit" onclick="addcomment()" value="Post"> 
</form> 
<a href="" onclick="addcomment()">Test</a> 

Javascript:

function addcomment() 
    { 

     if (window.XMLHttpRequest) 
       { xmlhttp=new XMLHttpRequest();} 
      else 
       { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");} 

      xmlhttp.onreadystatechange=function() 
      { 
       if (xmlhttp.readyState==4 && xmlhttp.status==200) 
       { 
        document.write(xmlhttp.responseText); 
        } 
        } 
     xmlhttp.open("GET","test.php",true); 
     xmlhttp.send(); 
    } 

РНР:

<?php 
echo 'test'; 
?> 

Он не передает никакой информации и должен только писать «тест» по экрану, но вместо этого он перезагружает страницу html, добавляя 'get'information(test.html?uname=). Это отлично работает с привязным тегом, если только я не попробую его после того, как вы попробуете форму (то есть, с информацией 'get', добавленной к названию страницы). Я уверен, что мне не хватает чего-то основного. Вы можете мне помочь?

спасибо.

P.S. Я не могу использовать jquery.

Answer 1

Вам нужно вернуть false из функции добавления комментариев, чтобы сообщить браузеру не выполнять действие по умолчанию для отправки формы. То, что происходит на данный момент, заключается в том, что браузер выполняет вашу функцию, а затем сразу же отправляет форму, дающую xmlhttprequest времени для выполнения.

Answer 2

Необходимо, чтобы браузер не отправил форму на страницу. Это делается по сценарию returning false. Пример:

<form method="get" action="" onsubmit="addcomment(); return false;"> 
    Name: <input type="text" name="uname" id="uname"><br> 
    <input type="submit" value="Post" /> 
</form>