当页面完全加载时，Div清除

Question

I am using a JavaScript & Ajax to make a php call to return data from my database. The call returns the data as it should, but when the page fully loads the <div> tags value is cleared.

What do I need to change in my syntax so that the div tag retains the value echo from the php file? I checked the Console and it is only showing page load info and nothing related to this issue (at least not that I saw).

<form id="form1" method="post">
<div id="results">&nbsp;</div>
<div style="padding-top: 10px;"><input type="submit" value="Submit" onclick="MakeQuery()" /></div>
<script type="text/javascript">
var xhttp;
function MakeQuery()
{
 if (window.XMLHttpRequest) {    
  xhttp = new XMLHttpRequest();
} else if (window.ActiveXObject) { 
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
} 
    xhttp.onreadystatechange = function(){ if (xhttp.readyState == 4 && xhttp.status==200)
    { document.getElementById("results").innerHTML = xhttp.responseText; } }
     xhttp.open("GET", "SQLQuery.php", true); 
     xhttp.send();
}
</script>
</form>

Answer 1

I think you need to prevent the actual form submit before using AJAX:

var xhttp;

function MakeQuery(event) {
  event.preventDefault(); // Cancel form submit, use AJAX

  if (window.XMLHttpRequest) {

    xhttp = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    xhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("results").innerHTML = xhttp.responseText;
    }
  }
  xhttp.open("GET", "SQLQuery.php", true);
  xhttp.send();
}

</div>