31

I have this HTML:

<form id='myform'>
<input name='title' value='foo'/>
</form>

And I create an object array from it like this:

var dataArray = $("#myform").serializeArray();

Now how do I access 'title' in dataArray? This does not work:

alert(dataArray['title']);
alert(dataArray['title'].val());
bart
  • 14,958
  • 21
  • 75
  • 105

8 Answers8

46

Similar to what Nick posted, but a little cleaner

var dataArray = $("#myform").serializeArray(),
    dataObj = {};

$(dataArray).each(function(i, field){
  dataObj[field.name] = field.value;
});

Then access the same way

alert(dataObj['title']);
Jason
  • 2,280
  • 23
  • 22
30

You can either loop through, as @Tom has...or if you're accessing more than one, be a bit more efficient and loop once, creating an object like this:

var dataArray = $("#myform").serializeArray(),
    len = dataArray.length,
    dataObj = {};

for (i=0; i<len; i++) {
  dataObj[dataArray[i].name] = dataArray[i].value;
}

Then you can access it like you want, for example:

alert(dataObj['title']); //or alert(dataObj.title);

You can test it out here.

Community
  • 1
  • 1
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
15
alert(dataArray[0].name);
alert(dataArray[0].value);

So:

for (i=0; i<dataArray.length; i += 1) {
    if (dataArray[i].name === "title") {
        // do something here...
    }
}
Tom
  • 43,583
  • 4
  • 41
  • 61
  • Thanks, but what if I have multiple input fields and I don't want to rely on the order? – bart Nov 21 '10 at 06:54
  • 2
    You're not relying on order the name is the id and the value is the value, they're just not in an object like you were expecting, you'll need to iterate over the array and process the things as you encounter them. – Tom Nov 21 '10 at 07:00
4

Adding this anyway to help others in future. Good way to quickly inspect all values.

var formdata = $( "#myform" ).serializeArray();
var formdata = JSON.stringify(formdata);
alert (formdata);
zenzone
  • 85
  • 6
3

Run console.log(dataArray);, then open up the property inspector, and check the console. In Chrome, you'd right click and select "Inspect Element" and then click the ">=" looking icon in the bottom left, it's the second from the left.

In Firefox you'd install firebug and there's a tab called "Console"

Not sure if it's available in IE, probably something in the developer tools (press f12) but i wouldn't recommend developing in IE.

Anyway this will list out the object in a way that allows you to navigate and see the values of each item. That way you can then use this to decipher how to access the values :)

Good luck

Eric
  • 95,302
  • 53
  • 242
  • 374
Jason
  • 15,064
  • 15
  • 65
  • 105
2

append/echo/print dataArray[0].name to a div will give you 'title'

Simo Mafuxwana
  • 3,702
  • 6
  • 41
  • 59
2

Alerting serializeArray of inputs in myDiv (note: the :input selector will include select and textarea tags as well!):

//alert(fData.length) // how many inputs got picked up 
var fData=$("#myDiv :input").serializeArray();
var msg=""; 
for(var i=0;i<fData.length;i++){
    var raKy=Object.keys(fData[i]); 
    msg+="\n"+raKy[0]+":"+eval("fData[i]."+raKy[0])+" "+raKy[1]+":"+eval("fData[i]."+raKy[1]); 
}
alert(msg);
gordon
  • 1,152
  • 1
  • 12
  • 18
1

With uderscore.js, this is how we can go about it:

var serializedArray = $('form#spiderman-application').serializeArray();

var serializedObject = _.object(
  _.pluck(serializedArray, 'name'), 
  _.pluck(serializedArray, 'value')
)

console.log(serializedObject);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

<form id="spiderman-application">
  <legend>Application Form</legend>
  <input name="./fname" value="Peter" />
  <input name="./lname" value="Parker" />
</form>

Good Luck...

Aakash
  • 21,375
  • 7
  • 100
  • 81