XMLHttpRequest() after submit from form

Question

I'm new to Javascript, can I use XMLHttpRequest() after I hit submit from form but the result should be the same as onclick event. I have a function named get and by using XMLHttpRequest() I can add a new object within the div sample, it works if it's a button. The only difference is that I want to add new object to the div sample without redirecting to http://127.0.0.1:5000/get?query=apple after I submit the form, form and function get() should be working together in this case. And also I don't want to see the http://127.0.0.1:5000/get?query=apple in the browser's url field after I submit the form. I need some help, I push myself to use pure js as possible and not to rely on jquery.

<div id="sample"></div>

<div onclick="get('apple');">CLICK APPLE</div>

<form action="/get" method="GET">
    <input name="query">
    <input type="submit">
</form>

<script>
    function get(query) {
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              document.getElementById("sample").innerHTML =
              this.responseText;
            }
          };
          xhttp.open("GET", "get?query=" + query, true);
          xhttp.send();
        };
</script>

Answer 1

This is how you can interrupt submit event, and do whatever you want.

<div id="sample"></div>

<div onclick="get('apple');">CLICK APPLE</div>

<form id="form">
    <input name="query">
    <input type="submit" value="Submit">
</form>

<script>
    document.querySelector('#form').addEventListener('submit', function(e){
        e.preventDefault();
        var query = e.target.elements['query'].value;
        get(query);
    });

    function get(query) {
          var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
              document.getElementById("sample").innerHTML =
              this.responseText;
            }
          };
          xhttp.open("GET", "get?query=" + query, true);
          xhttp.send();
        };
</script>

Answer 2

function get(query) {
  console.log("Called Function");
  query = document.getElementById('query').value;
  console.log(query);
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("sample").innerHTML =
        this.responseText;
    }
  };
  xhttp.open("GET", "get?query=" + query, true);
  xhttp.send();
};

<div id="sample"></div>
<div onclick="get('apple');">CLICK APPLE</div>
<form id="myForm" action="/get" method="POST">
   <input type="text" name="query" id="query">
   <input type="button" onclick="get()" value="Submit form">
</form>

You have user Form type method="GET" which changed to method="POST" and added onclick="get()" to call the function from javaScript