.formToJSON
takes a subset of form fields and converts their values to a JSON object using the ID of the input. In each ID, any text after a '.' becomes a property of the object before the '.'
HTML
<form onsubmit="return false;" action="test.htm">
<button id="doTest">test</button>
<br />
output : <textarea id="output" cols="70" rows="8"></textarea>
<br />
<input type="text" id="badge.val" value="badge value" />
<input type="text" id="badge.name" value="badge name" />
<input type="text" id="badge.id" value="badge id" />
<br />
<input type="text" id="Text1:0.val" value="Text1 value" />
<input type="text" id="Text1:0.name" value="Text1 name" />
<input type="text" id="Text1:0.id" value="Text1 id" />
<br />
<input type="text" id="Text4:1.val" value="Text4 value" />
<input type="text" id="Text4:1.name" value="Text4 name" />
<input type="text" id="Text4:1.id" value="Text4 id" />
<br />
<input type="checkbox" id="Text1:1.val" value="Text7 value" />
<input type="text" id="Text1:1.name" value="Text7 name" />
<input type="text" id="Text1:1.id" value="Text7 id" />
<br />
<input type="text" id="Text4:2.val" value="Text4 value" />
<input type="text" id="Text4:2.name" value="Text4 name" />
<input type="text" id="Text4:2.id" value="Text4 id" />
<br />
</form>
JavaScript
$.fn.formToJSON = function () {
var out = {};
var cleanValue = function ($f) {
var v = $f.val() || "";
// clean values?
return v;
}
var pushValue = function (o, id, v) {
if (o[id] != null) {
if (!o[id].push) {
o[id] = [o[id]];
}
o[id].push(v);
} else {
o[id] = v;
}
}
var pushLevel = function (o, list, v) {
var id = list.shift();
if (list.length == 0) {
pushValue(o, id, v)
} else {
if (o[id] == null) {
o[id] = {};
}
pushLevel(o[id], list, v)
}
}
this.each(function (i, f) {
var v = cleanValue($(f));
var idList = f.id.replace(/:\d*/g, "").split(".");
pushLevel(out, idList, v);
});
return out;
}; $(function () {
$("#doTest").click(function () {
var $fields = $("input:text, input:hidden, input:checkbox, select").not("[name^='__']");
var data = $fields.formToJSON();
//var data = expandTest($fields);
$("#output").val(JSON.stringify(data));
return false;
});
});