title: jQuery submit ajax with multiple arrays
body: <p>Hi I'm trying to submit a form using ajax inside <a href="https://github.com/jzaefferer/jquery-validation" rel="nofollow noreferrer" title="Validate">Validate</a>'s submitHandler, also using the <a href="http://harvesthq.github.com/chosen/" rel="nofollow noreferrer">Chosen</a> library which beautifies multiple selects.  The following works:</p>
  
  <pre><code>submitHandler: function(form) {
      var     form = $(this.currentForm);
  
      var     data = {
          first_name    : form.find('#first_name').attr('value'),
          last_name     : form.find('#last_name').attr('value'),
          chosen_people : form.find('#chosen_people').val(),
      };
  
      $.ajax({
          type : "POST",
          url : "formhandler.php",
          data : data,
          success : function(response) {
              console.log(response);
          }
      });
  }
  </code></pre>
  
  <p>Server response:</p>
  
  <pre><code>array(
      ['first_name'] =&gt; 'John'
      ['last_name'] =&gt; 'Smith'
      ['chosen_people'] =&gt; array(
          [0] =&gt; 37
          [1] =&gt; 42
      )
  )
  </code></pre>
  
  <p>The problem is that my form is large and changes often and I don't want to have to keep enumerating all of the input and select elements.  I want to just say something like:</p>
  
  <pre><code>var     inputs = form.find('input').serializeArray();
  var     selects = form.find('.chzn-select').val();
  var     data = $.merge(inputs, selects );
  
  ...
  </code></pre>
  
  <p>I've tried every combination of manually typing things like:</p>
  
  <pre><code>for(var select in selects)
      selects[select] = {'name' : select, 'value' : selects[select]};
  
  var     serializedSelects = {'name' : 'chosen_people', 'value' : selects };
  var     data = $.merge(inputs, serializedSelects);
  </code></pre>
  
  <p>But I just can't get the arrays to nest properly so that the server has the correct array structure in its post variables.</p>
  
  <p>The gist of the problem is that although jQuery provides $.serializeArray() for elements, it doesn't provide something like $.paramArray() to take an associative array and convert it to a serialized array.  It can only output serialized strings, which are difficult to manipulate further.  I don't want to include another ajax framework, so am hopeful there is a straightforward solution.</p>
  
  <p>P.S. I'm using php5 and jQuery 1.8.3.  Here's what I've found so far, perhaps I'm just messing up the formatting of the selects array before I try to add it:</p>
  
  <p><a href="https://stackoverflow.com/questions/6627936/jquery-post-with-serialize-and-extra-data">jQuery post() with serialize and extra data</a></p>
  
  <p><a href="https://stackoverflow.com/questions/6438596/how-to-serialize-a-javascript-associative-array">How to serialize a JavaScript associative array?</a></p>
  
  <p><a href="https://stackoverflow.com/questions/13318999/jquery-serializearray-how-to-add-more-parameters-to-it">Jquery.SerializeArray how to add more parameters to it?</a></p>
  
  <p>Thanks!</p>