jQuery serializeArray() key value pairs

event.preventDefault() and return false

jQuery serializeArray() creates an array of objects i.e. name and value pair by serializing one or more form elements or the form element itself.

jQuery serializeArray() method can act on a jQuery object which has selected individual form controls like <input>, <textarea>, and <select> etc.

Suppose, you have a following HTML:

<form action="">
Name: <input type="text" name="name" value="John"><br>
Age: <input type="text" name="age" value="30"><br>
<input type="submit" name="submit" value="Submit" />
</form>

When using serializeArray() method as below:

var arr = $("form").serializeArray();

Results: name:John age:30

Now want to access values created by serializeArray in JQuery?

var arr = $("form").serializeArray();
var len = arr.length;
var dataObj = {};
for (i=0; i<len; i++) {
dataObj[arr[i].name] = arr[i].value;
}
console.log(dataObj['name']); // returns John
console.log(dataObj['age']); // returns 30

Leave a Reply

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