title: XMLHttpRequest to Post HTML Form
body: <p><strong>Current Setup</strong></p>
  <p>I have an HTML form like so.</p>
  <pre><code>&lt;form id=&quot;demo-form&quot; action=&quot;post-handler.php&quot; method=&quot;POST&quot;&gt;
     &lt;input type=&quot;text&quot; name=&quot;name&quot; value=&quot;previousValue&quot;/&gt;
     &lt;button type=&quot;submit&quot; name=&quot;action&quot; value=&quot;dosomething&quot;&gt;Update&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>I may have many of these forms on a page.</p>
  <p><strong>My Question</strong></p>
  <p>How do I submit this form asynchronously and not get redirected or refresh the page? I know how to use <code>XMLHttpRequest</code>. The issue I have is retrieving the data from the HTML in javascript to then put into a post request string. Here is the method I'm currently using for my zXMLHttpRequest`'s.</p>
  <pre><code>function getHttpRequest() {
      var xmlhttp;
      if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
      } else {// code for IE6, IE5
          xmlhttp=new ActiveXObject(&quot;Microsoft.XMLHTTP&quot;);
      }
      
      return xmlhttp;
  }
  
  function demoRequest() {
         var request = getHttpRequest();
         request.onreadystatechange=function() {
               if (request.readyState == 4 &amp;&amp; request.status == 200) {
                     console.log(&quot;Response Received&quot;);
               }
         }
         request.open(&quot;POST&quot;,&quot;post-handler.php&quot;,true);
         request.setRequestHeader(&quot;Content-type&quot;,&quot;application/x-www-form-urlencoded&quot;);
         request.send(&quot;action=dosomething&quot;);
  }
  </code></pre>
  <p>So for example, say the javascript method <code>demoRequest()</code> was called when the form's submit button was clicked, how do I access the form's values from this method to then add it to the <code>XMLHttpRequest</code>?</p>
  <p><strong>EDIT</strong></p>
  <p>Trying to implement a solution from an answer below I have modified my form like so.</p>
  <pre><code>&lt;form id=&quot;demo-form&quot;&gt;
         &lt;input type=&quot;text&quot; name=&quot;name&quot; value=&quot;previousValue&quot;/&gt;
         &lt;button type=&quot;submit&quot; name=&quot;action&quot; value=&quot;dosomething&quot; onClick=&quot;demoRequest()&quot;&gt;Update&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>However, on clicking the button, it's still trying to redirect me (to where I'm unsure) and my method isn't called?</p>
  <p><strong>Button Event Listener</strong></p>
  <pre><code>document.getElementById('updateBtn').addEventListener('click', function (evt) {
                                  evt.preventDefault();
                                  
                                  // Do something
                                  updateProperties();
                                  
                                  return false;
                              });
  </code></pre>