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" />

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

Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.

Leave a Reply

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