Why does my ajax post rewrite the HTML page upon the response

Question

I have created a two simple ajax calls in an HTML/javascript script. They call on a php routine that just returns a simple string. The string is to be substituted into the lines of HTML text. They work fine, but then the HTML page seems to refresh and wipe out the text that was just inserted there. I have tried it with both the synchronous and asynchronous versions of the xhttp.open. I have my alerts in so that you can test it.

How can I make the text change "stick" so that it is not overwritten. Thanks.

<!DOCTYPE HTML>
<html>
  <body>
 <h1>AJAX Tester</h1>
 
 <p>Echo here from the server: <span id="text">replace here</span></p> 
 
<form  onclick="localform()"> 
<button type="submit"  >Submit</button>       
</form>
  

<p>Echo here from the server: <span id="text1">replace here</span></p> 
 
<form  onclick="localform1()"> 
<button type="submit"  >Submit</button>       
</form>


                 
<script>
    function localform() {
//This routine checks the ajax with a synchronous (call "false" in the open)   
        var xhttp = new XMLHttpRequest();
        xhttp.open("GET", "ajaxtester.php",false);
        xhttp.send();
        document.getElementById("text").innerHTML = xhttp.responseText;
        alert("Test1"+xhttp.responseText)    ;
        return
    }

    
    function localform1() {
//This routine checks the ajax with an asynchronous (call "true" in the open)
        var xhttp;   
        xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
    document.getElementById("text1").innerHTML = xhttp.responseText;
        alert("Test5"+xhttp.responseText)    ;
    }
  };        
        xhttp.open("GET", "ajaxtester.php", true);
        xhttp.send();
        alert("Test4"+xhttp.responseText)    ;
        return
    }
</script>
  </body>
</html>

The php code is very simple:

<?php
echo "we made it";
?>

Thank you for the help. Sorry about the mistakes I made in my first two questions, I am a noob here and just learning the ropes.

try to change `return` to `return false`.. hope it helps, if I remember correct — Wizard, Feb 14 '16 at 20:46
You probably are going to need to `return false` as @Wizard suggested. You might also want to read http://stackoverflow.com/a/1357151/1604068 — Sevvlor, Feb 14 '16 at 20:57
Thanks for the responses, the "return false" did not work. I am pursuing the solution from @gaemaf down below. Thanks — Bruce Lawrence, Feb 14 '16 at 22:29

score 0 · Answer 1 · answered Feb 14 '16 at 21:00

0

To insert a js function call directly in the html page I suggest you to add the corresponding parameters you will need later:

this (the current element)
event (the event object)
any additional parameter usefull in the function

On button click, in the function you need to stop or prevent the default behaviour, otherwise the page is submitted and this is what you do not want.

In the following the code, I reduced all to only one function:

function localform(currEle, evt, urlStr, objId) {
  var e = evt || window.event;
  e.preventDefault();
  var xAjax = null;
  if (XMLHttpRequest) {
    xAjax = new XMLHttpRequest();
  } else {
    xAjax = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xAjax.open("GET", urlStr, true);
  xAjax.onreadystatechange = function(){
    if(xAjax.readyState == 4 && xAjax.status == 200){
      document.getElementById(objId).innerHTML = xAjax.responseText;
      alert("Test1"+xhttp.responseText)
    }
  }
  xAjax.send();
}

<h1>AJAX Tester</h1>

<p>Echo here from the server: <span id="text">replace here</span></p>

<form  onclick="localform(this, event, 'ajaxtester.php', 'text')">
    <button type="submit"  >Submit</button>
</form>


<p>Echo here from the server: <span id="text1">replace here</span></p>

<form  onclick="localform(this, event, 'ajaxtester.php' 'text1')">
    <button type="submit"  >Submit</button>
</form>

answered Feb 14 '16 at 21:00

gaetanoM

41,594
6
42
61

gaemaf, thanks for the thoughtful response. It half works. When I push the top "submit" button, it works, the text is replaced, and it stays put. However, i am getting a console error message when I click on the top "submit". It says: Uncaught ReferenceError: xhttp is not defined – Bruce Lawrence Feb 14 '16 at 22:31
When I hit the lower "submit" the text does not change at all. In neither case am I getting the alert text you left inserted in the code. – Bruce Lawrence Feb 14 '16 at 22:40
I suggest you to pay attention to my html and to Js. From your remarks I understand you copied only part, this is because you get xhttp error. I used a different variable name. I changed the html to call the functions. Let me know – gaetanoM Feb 15 '16 at 09:07
I think I have done it correctly. Is there an easy way to send the file in this comments section so that i show you what i have done in the file? – Bruce Lawrence Feb 15 '16 at 16:25
Gaemaf, you were right. I was missing a comma in the second function call and pointing to the wrong text ID as well. It is fixed and working now. Thank you very much for the great help you provided – Bruce Lawrence Feb 15 '16 at 17:14

Why does my ajax post rewrite the HTML page upon the response

1 Answers1