Why FormData object empty

Question

When I run below code , I always get an empty FormData , is it because of the form too complex ? How should I change the code ?

It seems if I only use tags like form , input , label to construct the form , the FormData object will not get to be empty . Maybe I can manually construct a line and send it via XMLHttpRequest , but have a better way ?

Any help would be appreciate , thank you for your time .

html:

<form enctype="multipart/form-data" id="inquiry" name="inquiry" method="post" role="form"><!--action="processData.php"-->
    <div class="row">
        <div class="form-group">
            <div class="col-md-6">
                <label for="name">Your name</label>
                <input type="text" class="form-control" id="name" maxlength="100">
            </div>
            <div class="col-md-6">
                <label for="email">Your email address</label>
                <input type="text" class="form-control" id="email" maxlength="100">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-md-12">
                <label for="subject">Subject</label>
                <input type="text" class="form-control" id="subject" maxlength="100">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-md-12">
                <label for="message">Your message</label>
                <textarea class="form-control" id="message" maxlength="5000"></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button id="post-message" type="submit">
                <span>Send Message</span>
            </button>
        </div>
     </div>
</form>

js:

'use strict';
var Contact = function() {
  var sendData = function() {
    var xmlhttp = new XMLHttpRequest() ;
    var url = "/php/processData.php";
    var inquiryForm = document.forms.namedItem("inquiry");
    var FD = new FormData(inquiryForm);
    xmlhttp.open("POST", url , true);
    xmlhttp.onreadystatechange = function() {
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var returnData = xmlhttp.responseText ;
      }
    };
    xmlhttp.send(FD);

    for (var [key, value] of FD.entries()) {
      console.log(key, value);
    }
  };

  var windowLoadHandler = function() {
    window.addEventListener("load",function(){
      var inquiryForm = document.getElementById("inquiry");
      inquiryForm.addEventListener("submit",function(event){
        event.preventDefault();
        sendData();
      });
    });
  };

  return {
    init : function(){
      windowLoadHandler();
    }
  };
}();

Note that namedItem is not cross-browser, you should be using just this in the submit handler to catch the form instead. And as noted above, the Contact function is never executed, and the sendData function is inside it. — adeneo
– adeneo, Commented Sep 12, 2017 at 14:43
Is Contact.init() actually invoked before the page has finished loading? — Lennholm
– Lennholm, Commented Sep 12, 2017 at 14:50
@adeneo yes , below is in the html , I forget to post here:<script> $(document).ready(function(){ Main.init(); Contact.init(); }); </script> .and I try to use var inquiryForm = document.getElementById("inquiry"); to replace namedItem , I think not working either .. — Sunny
– Sunny, Commented Sep 12, 2017 at 14:56
So you're using jQuery? Why are you making it this difficult ? — adeneo
– adeneo, Commented Sep 12, 2017 at 14:58

adeneo · Accepted Answer · 2017-09-12 15:25:29Z

You'll have to add names to all the form elements, otherwise they won't be sent with the form.

Here's the code with some changes to make it work

'use strict';
var Contact = (function() {
  var sendData = function(form) {
    var xmlhttp = new XMLHttpRequest();
    var url = "/php/processData.php";
    var FD = new FormData(form);

    xmlhttp.open("POST", url, true);

    xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var returnData = xmlhttp.responseText; // note, async, can't be used outside this function 
      }
    }

    xmlhttp.send(FD);
    console.log()
    for (var pair of FD.entries()) {
      console.log(pair[0] + ', ' + pair[1]);
    }
  }

  var windowLoadHandler = function() {
    var inquiryForm = document.getElementById("inquiry");

    inquiryForm.addEventListener("submit", function(event) {
      event.preventDefault();
      sendData(this);
    });
  }

  return {
    init: function() {
      windowLoadHandler();
    }
  };
})();

$(document).ready(function() {
  Contact.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="inquiry" name="inquiry" method="post" role="form">
  <!--action="processData.php"-->
  <div class="row">
    <div class="form-group">
      <div class="col-md-6">
        <label for="fullname">Your name</label>
        <input type="text" class="form-control" id="fullname" name="fullname" maxlength="100">
      </div>
      <div class="col-md-6">
        <label for="email">Your email address</label>
        <input type="text" class="form-control" id="email" maxlength="100" name="email">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group">
      <div class="col-md-12">
        <label for="subject">Subject</label>
        <input type="text" class="form-control" id="subject" maxlength="100" name="subject">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="form-group">
      <div class="col-md-12">
        <label for="message">Your message</label>
        <textarea class="form-control" id="message" maxlength="5000" name="message"></textarea>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <button id="post-message" type="submit">
                <span>Send Message</span>
            </button>
    </div>
  </div>
</form>

By the way you're calling Contact.init() you probably wanted an IIFE.
Note that name is always a poor name for a variable, and even a worse name/ID for an element, as window.name already exists.

See how the form is just passed from the event handler, to the function.

Collectives™ on Stack Overflow

Why FormData object empty

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related