jQuery Serialize HTML Form to JSON

This jQuery tutorial help to create serialized object and array using jQuery and HTML form. You can easily convert jQuery Form data into serialized object JSON format using jQuery serialize() method.

We are using JSON format in request and response parameters, So the serialization process can help in a web request to send and receive cross-platform data using JSON format. The jQuery Serialization is used to store or pass object values around without losing their type and structure.

Checkout Other tutorials:

• ng2 datepicker with example Using Angular 13
• Multi Step Form with Progress Bar using jQuery and Bootstrap CSS
• Alternate Table Rows Color using jQuery or CSS
• How to Refresh Page Using JavaScript & jQuery
• Add Datepicker to Input Field using jQuery UI

What is serialization? why do we need? there are some questions that will be in your mind.

Serialization help to convert JSON object and arrays data into string format, then we attached this serialized object to a string with a request and send it to the server.
You need to de-serialize object string at your server end.

The jQuery has serialize(), serializeArray() and jQuery.param() methods that can help to serialize objects or arrays.

Simple Example of jQuery Serialize Form

We can use one of the options to serialize objects using jQuery. We can serialize form data using serialize methods.

Option 1: Using Serialize() Method

jQuery serialize() method creates a text string in standard URL-encoded notation. You can use this method on any individually jQuery object which is form controls, such as input, textarea, and select.

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() );
});

The above code will create serialize form input control into a string. The serialized string will include those element value which has a name attribute.The event.preventDefault(); will override the default behavior of form submit mechanism and will avoid page reload after form submit

The request serialize string will be:

"input1=value1&input2=value2"

Option 2: Using serializeArray() Method

The jQuery serializeArray() method will create objects into an array and encode as JSON strings. You can use this method to send form data into serialized key-value pair.

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log($( this ).serializeArray());
});

The request serialize data will be:

{
    name: "input1",
    value: "value1"
  },
  {
    name: "input2",
    value: "value2"
  }

Option 3: Using jQuery.param() Method

The jQuery jQuery.param() method will create a serialized representation of an array, the object which is passed with URL query string on in AJAX request. The jQuery Object will convert into name/value properties.

var myObject = {
  input1: value1,
  input2: value2
};
console.log($.param( myObject ));

The request serialize data will be:

input1%5D=value1&a%input2%5D=value2

Conclusion:

We have used all of the jQuery serialize methods, that will convert form data into serialize string and send it to server-side. We have also converted HTML form data into object key-value pair.