I have values of form as follow
<input name="Document[0][category]" value="12" type="text">
<input name="Document[0][filename]" value="abca.png" type="text" >
I want to serialize it to an object by js or jquery.
Document[0]={
category : 12
filename : 'abca.png'
};
I try use serializeArray and parse to object but no good
Low-tech method:
var Document = [];
var inputs = document.querySelectorAll('input');
Array.prototype.forEach.call(inputs, function(input) {
var name = input.getAttribute('name');
var prevProp = null;
var obj = Document;
name.replace(/\[(.*?)\]/g, function(m, prop) {
if (prevProp) obj = obj[prevProp] || (obj[prevProp] = {});
prevProp = prop;
});
obj[prevProp] = input.value;
});
console.log(Document);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input name="Document[0][category]" value="12" >
<input name="Document[0][filename]" value="abca.png" >
</form>
<!-- results pane console output; see http://meta.stackexchange.com/a/242491 -->
<script src="http://gh-canon.github.io/stack-snippet-console/console.min.js"></script>EDIT: as guest271314 notes, using Document as a variable name might not be the greatest idea.
js to overwrite native Document function ?Check this out
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function() {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
$(function() {
$('form').submit(function() {
$('#result').text(JSON.stringify($('form').serializeObject()));
return false;
});
});form {
line-height: 2em;
}
p {
margin: 5px 0;
}
h2 {
margin: 10px 0;
font-size: 1.2em;
font-weight: bold
}
#result {
margin: 10px;
background: #eee;
padding: 10px;
height: 40px;
overflow: auto;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Form</h2>
<form action="" method="post">
First Name:<input type="text" name="Fname" maxlength="12" size="12"/> <br/>
Last Name:<input type="text" name="Lname" maxlength="36" size="12"/> <br/>
Gender:<br/>
Male:<input type="radio" name="gender" value="Male"/><br/>
Female:<input type="radio" name="gender" value="Female"/><br/>
Favorite Food:<br/>
Steak:<input type="checkbox" name="food[]" value="Steak"/><br/>
Pizza:<input type="checkbox" name="food[]" value="Pizza"/><br/>
Chicken:<input type="checkbox" name="food[]" value="Chicken"/><br/>
<textarea wrap="physical" cols="20" name="quote" rows="5">Enter your favorite quote!</textarea><br/>
Select a Level of Education:<br/>
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option></select><br/>
Select your favorite time of day:<br/>
<select size="3" name="TofD">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select>
<p><input type="submit" /></p>
</form>
<h2>JSON</h2>
<pre id="result">
</pre>found it here : http://jsfiddle.net/sxGtM/3/
Consider jQuery's serializeArray() function:
var results = $("#some_id").serializeArray();
This will give you an array of objects that you can work with in JavaScript. I don't think you're able to give these objects custom names, like you're trying to do here I'm assuming:
<input name="Document[0][category]" value="12" type="text">
^^^^^^^^^^^
If you need to name these results, I'd suggest serializing it with jQuery, then transferring that data to your own object.
'abca.png'come from?!?