How do I access values created by serializeArray in JQuery?
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(dat开发者_高级运维aArray['title'].val());
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']);
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.
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...
}
}
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);
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
append/echo/print dataArray[0].name
to a div will give you 'title'
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);
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...
精彩评论