Serializing an HTML Form with Inline Objects

Question

I have the following view ...

<form id="my-form"> <fieldset name="address"> <input name="streetAddress" type="text" placeholder="Street Address"><br> <input name="city" type="text" placeholder="City"><p>,</p> <input name="state" type="text" placeholder="State"> <input name="zipCode" type="text" placeholder="Zip Code"> </fieldset> <fieldset name="dimensions"> <input name="length" type="text" placeholder="length"> <input name="width" type="text" placeholder="width"> <input name="height" type="text" placeholder="height"> </fieldset> </form> 

I need to serialize it to JSON with JS, but I need the address fields to be deformed in the address object, and the measurement fields distorted in the measurement object.

Something like that...

 { 'address':{'streetAddress':'111 Candy Ln', 'city':'Los Angeles', ...}, 'dimensions':{...} } 

How do you do this cleanly, perfectly, without having to write your own function for this? Of course, I saw scripts for serialization, but nothing that inline objects would do.

Answer 1

Have you tried to put all fields in arrays?

 <fieldset name="address"> <input name="address[streetAddress]" type="text" placeholder="Street Address"><br> <input name="address[city]" type="text" placeholder="City"><p>,</p> <input name="address[state]" type="text" placeholder="State"> <input name="address[zipCode]" type="text" placeholder="Zip Code"> </fieldset> 

Here is an example using the serializeObject plugin

Just include the script and you can convert any form into a layered JSON object.

DEMO HERE

Using this plugin ... more details here Converting form data into JavaScript object using jQuery

 (function($){ $.fn.serializeObject = function(){ var self = this, json = {}, push_counters = {}, patterns = { "validate": /^[a-zA-Z][a-zA-Z0-9_]*(?:\[(?:\d*|[a-zA-Z0-9_]+)\])*$/, "key": /[a-zA-Z0-9_]+|(?=\[\])/g, "push": /^$/, "fixed": /^\d+$/, "named": /^[a-zA-Z0-9_]+$/ }; this.build = function(base, key, value){ base[key] = value; return base; }; this.push_counter = function(key){ if(push_counters[key] === undefined){ push_counters[key] = 0; } return push_counters[key]++; }; $.each($(this).serializeArray(), function(){ // skip invalid keys if(!patterns.validate.test(this.name)){ return; } var k, keys = this.name.match(patterns.key), merge = this.value, reverse_key = this.name; while((k = keys.pop()) !== undefined){ // adjust reverse_key reverse_key = reverse_key.replace(new RegExp("\\[" + k + "\\]$"), ''); // push if(k.match(patterns.push)){ merge = self.build([], self.push_counter(reverse_key), merge); } // fixed else if(k.match(patterns.fixed)){ merge = self.build([], k, merge); } // named else if(k.match(patterns.named)){ merge = self.build({}, k, merge); } } json = $.extend(true, json, merge); }); return json; }; })(jQuery); 

Answer 2

I have two solutions for this:

• Name the fields after the fields (for example, the sentence above): address[street], address[zipcode], etc
• Give the fields a unique identifier.

In both cases, I suggest you use this library that I made: https://github.com/serbanghita/formToObject

Name it as follows:

Case 1: var myFormObj = new formToObject('myFormId');

Case 2: var myFormObj = new formToObject('myFieldsetId');