title: HTML form for multiple objects when converting to JSON
body: <p>Edited:</p>
  
  <pre><code>$.fn.serializeObject = function() {
  var o = {};
  var a = this.serializeArray();
  $.each(a, function() {
      var value = this.value || '';
      if (/^\d+$/.test(value))
          value = +value;
  
      if (o[this.name] !== undefined) {
          if (!o[this.name].push) {
              o[this.name] = [o[this.name]];
          }
          o[this.name].push(value);
      } else {
          o[this.name] = value;
      }
  });
  return o;
  };`
  </code></pre>
  
  <p>Edited to hopefully make clearer.</p>
  
  <p>Having difficulty wrapping my head around this - sleep deprivation = madness.</p>
  
  <p>I have a form that simply serialises the data into JSON and stores it for later use.</p>
  
  <pre><code>&lt;form id="form" method="post"&gt;
  
  a? &lt;input class="number" type="text" name="a" size="5" maxlength="5"/&gt;&lt;br/&gt;
  </code></pre>
  
  <p>Item 1:</p>
  
  <pre><code>Type?:&lt;br/&gt;
  &lt;select size="2" name="type"&gt;
      &lt;option value="1"&gt;b&lt;/option&gt;
      &lt;option value="2"&gt;c&lt;/option&gt;
  &lt;/select&gt;
  
  d:&lt;input class="number" type="text" name="d" maxlength="2" size="2"/&gt; &lt;br/&gt;
  e:&lt;input class="number" type="text" name="e" maxlength="2" size="2"/&gt; &lt;br/&gt;
  
  &lt;p&gt;Item 2:&lt;/p&gt;
  
  
  Type?:&lt;br/&gt;
  &lt;select size="2" name="type"&gt;
      &lt;option value="1"&gt;b&lt;/option&gt;
      &lt;option value="2"&gt;c&lt;/option&gt;
  &lt;/select&gt;
  
  d:&lt;input class="number" type="text" name="d" maxlength="2" size="2"/&gt; &lt;br/&gt;
  e:&lt;input class="number" type="text" name="e" maxlength="2" size="2"/&gt; &lt;br/&gt;
  
  &lt;input type="submit" /&gt;
  </code></pre>
  
  <p></p>
  
  <p>when the form is serialised the result I get is:</p>
  
  <pre><code>JSON{
      "a":1,
      "type":[1,2],
      "d":[99,33],
      "e":[99,33]
  }
  </code></pre>
  
  <p>what I need is the typical tree structure of JSON something where each item has its own level, something like:</p>
  
  <pre><code>{
  "a": "1",
  
  "item1": 
  {
      "type": "1",
      "d": "99",
      "e": "99",
  },
  "item2": 
  {
   "type": "2",
   "d": "33",
   "e": "33",
   }
  </code></pre>
  
  <p>Ideally I'd like to have an option whereby the user can state how many items the form should request information for but I need a basic working example first.</p>
  
  <p>once I have this data I'm then converting it into JSON and would like a tree like structure if possible.  Any help appreciated.  This post <a href="https://stackoverflow.com/questions/6720459/how-to-serialize-a-form-into-an-object-with-tree-structure">How to serialize a form into an object (with tree structure)?</a> helps a lot but its the structure of the HTML I'm having issues with.  Thanks again.</p>