title: Form Data being posted twice via XMLHttpRequest, once as an empty object and once with the correct data
body: <p>I am learning web development and in that, AJAX. For this particular example I am using the XMLHttpRequest object on the browser and Node with Express as my server.
  I have a simple HTML form that needs to post data to a Node server. I know that data is being posted successfully, because, I can see the Form Data in the chrome's Network tab.</p>
  
  <p>I have a couple of problems with my code and I've looked for answers on Stackoverflow and also looked at the MDN documentation for the past three days, but am unable to figure this.</p>
  
  <p>The questions below are with respect to the posted code:</p>
  
  <ol>
  <li>If submitForm() returns true, I have the data posted twice to the server, once with an empty request body and once with the expected data. Why? 
  <a href="https://i.stack.imgur.com/JsVOJ.jpg" rel="nofollow noreferrer">Post Data when submitForm() returns true</a></li>
  <li>If submitForm() returns false, no data is posted back to the server. Why?
  <a href="https://i.stack.imgur.com/yjXjR.jpg" rel="nofollow noreferrer">Post Data when submitForm() returns false</a></li>
  <li>If there is no call to submitForm() at all (ie. sans a call to XHR), then the form data is posted correctly and this is seen in the req.body on the server side. 
  <a href="https://i.stack.imgur.com/ihY7e.jpg" rel="nofollow noreferrer">Result of POST when there is no onSubmit event attached to the form</a></li>
  <li>If I set the RequestHeader on xhr to application/x-www-form-urlencoded, <a href="https://i.stack.imgur.com/c7E2A.jpg" rel="nofollow noreferrer">this</a> is what I get.</li>
  <li>How do I get the form to post data to the server using XMLHTTPRequest?</li>
  </ol>
  
  <p>I am completely lost and am not sure what I am missing. If someone can throw some light, I would appreciate that greatly.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/&gt;
  
  &lt;script&gt;
  "use strict";
  function submitForm()
  {
    var formElement = document.getElementById("myForm");
    var formData = new FormData(formElement);
  
    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/Test", true);
    xhr.send(formData);
    //return false;
  }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;form id="myForm" method="POST" action="/Test" onsubmit="return submitForm();" &gt;
     &lt;input type="text" value="John" name="name"/&gt;
     &lt;input type="submit" value="Send Data"/&gt;
  &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <pre><code>//Server side code (NodeJS)
  var express = require('express');
  var bodyparser = require('body-parser');
  
  var app = express();
  app.use(express.static('./'));
  
  var urlencoded = bodyparser.urlencoded({extended:true});
  
  app.get('/Test', function(req, res){
      res.sendFile(__dirname+'/Test.html');
  });
  
  app.post('/Test', urlencoded, function(req, res){
    console.log("In POST");
    console.log(req.body);
    res.sendFile(__dirname+'/Test.html');
  });
  
  app.listen(8080);
  console.log('Now listening on port 8080...');
  </code></pre>