How to Convert Form Data to JavaScript Object Using jQuery

Often you may need to convert web form data to JS object since that format is similar to JSON and easier to store in backend server as well as transfer to other systems. In this article, we will learn how to convert form data to JavaScript object using jQuery.

How to Convert Form Data to JavaScript Object Using jQuery

For this purpose, we will use a combination of JavaScript and jQuery code. We will use serializeArray() function in jQuery to serialize the form content. Then we will write a JS function that transforms the serialized form data into a JS object of key-value pairs, where keys are the name attributes of form fields.

Let us say you have the following HTML form.

<form id='myForm'>
  <div><input type="text" name="a" value="1" id="a"></div>
  <div><input type="text" name="b" value="2" id="b"></div>
  <div><input type="hidden" name="c" value="3" id="c"></div>
  <div>
    <textarea name="d" rows="8" cols="40">4</textarea>
  </div>
  <div><select name="e">
    <option value="5" selected="selected">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
  </select></div>
  <div>
    <input type="checkbox" name="f" value="8" id="f">
  </div>
  <div>
    <input type="submit" name="g" value="Submit" id="g">
  </div>
</form>

The serializeArray function loops through the form elements and converts their data into JS object form. It does not include disabled objects and every DOM element must have name attribute to be included in serialization.

Once you have a form as shown above, you can use the following code to serialize its data.

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

You can also call the serializeArray() function directly on the form using a jQuery selector, as shown below.

$("#myForm").serializeArray();

In both the above cases, serializeArray() returns an array of objects where each object consists of 2 key-value pairs, as shown below.

[
  {
    name: "a",
    value: "1"
  },
  {
    name: "b",
    value: "2"
  },
  {
    name: "c",
    value: "3"
  },
  {
    name: "d",
    value: "4"
  },
  {
    name: "e",
    value: "5"
  },

...
]

But when we need a JS object, we expect each JS object key-value pair to have the name attribute’s value as key and form element’s value as its value. We do not want name and value as separate objects but part of the same object, as shown below.

[
  {
    a: "1"
  },
  {
    b: "2"
  },
  {
    c: "3"
  },
  {
    d: "4"
  },
  {
    e: "5"
  },

...
]

You can do this using the following JS function, where input argument formArray is the output of serializeArray() function.

function objectifyForm(formArray) {
    //serialize data function
    var returnArray = {};
    for (var i = 0; i < formArray.length; i++){
        returnArray[formArray[i]['name']] = formArray[i]['value'];
    }
    return returnArray;
}

The above function basically loops through each array item and creates a key-value pair using the separate key-value pairs (e.g., {name:’a’,value:1} to {a:1}). To summarize, here is how to use both the above functions together.

$("form").submit(function( event ) {
  event.preventDefault();
  serialized_data = $( this ).serializeArray(); //get serialized form data
  js_object = objectifyForm(formArray); //convert serialized data to js object
});

Here is a shortened version of above code, using map() JavaScript function, which allows you to iterate over an array, perform a specific operation, store the result of operation.

var data = {};
$("#myForm").serializeArray().map(function(x){data[x.name] = x.value;}); 

In this article, we have learnt how to convert form data into JS object. We need to basically use serializeArray() function to serialize form contents. Then we need to use plain JavaScript to convert serialized form data into JS objects consisting of key-value pairs.

Also read:

How to Detect Mobile Device Using jQuery
How to Bind Event to Dynamic Element in jQuery
How to Find Sum of Array of Numbers in JavaScript
Remove Unicode Characters from String
Remove Accents/Diatrics from String in Python