Every time I do projects with AJAX in them, I always have to research the codes again and again. Yeah I have a weak memory, sue me!

Anyways, posting this for myself and for people who might need it in the future. 

Sending FormData Using AJAX, jQuery, and Pure Javascript. Kinda awesome right! LOL

FormData Constructor or .serialize()?

First, what is FormData? A Simple constructor that gets all the fields inside your < form > and construct a set of key/value pairs representing form fields and their values. Yeah, you can read more here and here as well LOL. 

Using Pure JS we can use this:

var formD = new FormData( document.getElementById(“form-id”) )

If you are using JQuery, you can always use the serialize() function. It works well and returns the same data. Check the docs here.

Using JQuery, we can do this:

// using formData
var formD = new FormData( $(“#form-id”) )
// using serialize
var formD = $(“#form-id”).serialize()

You can use whichever you want… malaki ka na! char

Using JQuery and FormData

$.ajax({

    type:”POST”,
    url:”your-url-here”, 
    dataType:”json”, processData:false, contentType:false, cache:false,
    data:new FormData( $(“#form-id”) ),
    beforeSend: function( pikachu ) {
         // display waiting message
    }, error: function ( squirtle ) { 
        // display error message 
    }

}).done( function( evolve ) {
    // do what you want
})

Using JQuery and serialize()

$.ajax({

    type:”POST”,
    url:”your-url-here”, dataType:”json”, data:$(“#form-id”).serialize(),
    beforeSend: function( pikachu ) {
         // display waiting message
    }, error: function ( squirtle ) { 
        // display error message 
    }

}).done( function( evolve ) {
    // do what you want
})

As you can see that’s pretty much it LOL

Codes using Pure Javascript and FormData

var request = new XMLHttpRequest()
request.open(“POST”, “your-url-here”, true)
request.onload = function() {
    if (request.status >= 200 && request.status < 400) {
        var rs = JSON.parse(request.response)
        // do what you want
    } else {
        // display error message
    }
}
request.onerror = function() { 
    // display connection error message
}
request.send( new FormData( document.getElementById(“form-id”) ) )

There you go, we can’t really use the serialize() function in pure JS since that is a library of jQuery. 

For some explanations, maybe drop a comment below.

HAPPY CODING!!!!

~ click image at your own risk lol ~

Ryner Galaus

Ryner SG

An ordinary person with a tiny brain hoping to be useful in his own way. A homebody hoping to one day create and build his dreams while in service to people. An underachiever who was once called nobody slowly growing up. A web developer learning and earning his way through life. Ryner is what my family and friends call me, and I hope you do too. By the way, I am also affiliated with Frontrow International, so for inquiries or orders, message me.

1 Comment

Working at Walmart · November 7, 2022 at 8:19 pm

Good to know!

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *