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

 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

Answer 2

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>