Convert Checkboxes and form data into JSON format - Andrew Pougher
Convert Checkboxes and form data into JSON format - Andrew Pougher
HTML
<div id="fields">
<input type="checkbox" CustomGroup="hotelinfo" data-name="January" />January<br />
<input type="checkbox" CustomGroup="hotelinfo" data-name="February" />February<br />
<input type="checkbox" CustomGroup="hotelinfo" data-name="Luxury" />Luxury<br />
</div>
<div id='jsonresult'></div>
JavaScript
jQuery.fn.extend({
serializeCustomPropertyArray: function() {
return this.map(function() {
return this.elements ? jQuery.makeArray(this.elements) : this;
}).filter(function() {
return jQuery(this).attr('data-name') &&
(this.checked || /select|textarea/i.test(this.nodeName) ||
/text|hidden|password|search/i.test(this.type));
}).map(function(i, elem) {
var val = jQuery(this).val();
return val == null ? null : jQuery.isArray(val) ?
jQuery.map(val, function(val, i) {
return { name: jQuery(elem).attr('data-name'), value: val };
}) : { name: jQuery(elem).attr('data-name'), value: val };
}).get();
},
serializeToJSON: function() {
var objectMap = this.serializeCustomPropertyArray();
var objectJson = new Object;
jQuery.each(objectMap, function() {
objectJson[this.name] = (this.value !== null) ? this.value : 'null';
});
console.log(objectJson);
return JSON.stringify(objectJson);
}
});
$(':checkbox').change(function() {
$('#jsonresult').html($('#fields').find(':input[CustomGroup="hotelinfo"]').serializeToJSON());
});