get value of input field and use it to fetch information from database with AJAX

i am trying to get value from the input box and use it in a javascript function to fetch information from databsase using ajax. the code works but result flashes for a second and disapear.

i tried to get value from the input filed use it as an id to fetch information from database using ajax. it works but the result only flashes for a second and then it disappears.

 <form class="form-inline">
  
  <div class="form-group mb-2 ml-0">
    <label for="accnum1" class="sr-only">Account Number</label>
    <input type="text" class="form-control" id="accnum1" placeholder="Account number">
  </div>
  <button type="submit" class="btn btn-secondary mb-2 mr-1">[x]</button>
  <button type="submit" class="btn btn-primary mb-2" onclick='showUser(document.getElementById("accnum1").value);'>Search Profile</button>
</form>
<div id="txtHint"><b>Person info will be listed here...</b></div>

<script>
function showUser(str) {

  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  } else {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        document.getElementById("txtHint").innerHTML = this.responseText;
      }
    };
    xmlhttp.open("GET","family.php?q="+str,true);
    xmlhttp.send();
  }
}
</script> ```