Aaron Fryer

Sending Form Data via AJAX.

Ever wanted to send form data via AJAX? A great and easy way to do this is via FormData.

Ever wanted to send form data via AJAX? A great and easy way to do this is via FormData.


FormData is part of the Javasctipt Web API and can be used to send data in the form of Key/value pairs.

As said earlier a basic form will do for this, just like the basic form we have below:

<form class="js-form-to-send" action="/to/endpoint" method="post">
    <input type="text" name="myText" value="">

Lets start our JavaScript by creating our instance of FormData.

var myForm = document.getElementById('myForm');
var formData = new FormData(myForm);

Now that we have our Form we can set up sending our data via XHR.

var xhr = new XMLHttpRequest();
xhr.open('POST', '/to/endpoint', true);
xhr.onload = function() {
    if(xhr.status === 200) {
        console.log('Yay it works');
    } else if (xhr.status === 400) {
        console.log('Bad Request :(');

We are using the newer xhr2 or (XMLHttpRequest Level 2) allows us to send data via a HTTP request and is a great improvement XMLHttpRequest Level 1.

What we do is create a new instance of xhr, set up the target URL and method with:

xhr.open('method', 'url', 'async');

We then add the code for handling our response from the endpoint with:

xhr.onload = function() {


xhr provides us with a number of useful data that we can use in our application such as: xhr.status - status code from the web server xhr.response - the response, this can be anything from text to a JSON response.

Then finally we send our form data with:


That's it our data would be sent to the end point. If you need to append data you can do it like this:

formData.append('key', 'value);

It is important to note that you shouldn't send a Content-Type header as this will cause the request to fail.

That's it on this post, I hope you found it useful.

Posted in Coding, Tutorials, Learning, Blog on Feb 01, 2017