How to serialize the form fields and send it to server, jquery?
<p>I have a form in <code>HTML</code> which contains multiple same name fields. For example:</p>

<pre><code>  &lt;form action="" method="post" id="form"&gt;
    &lt;div class="itemsection" id="item1"&gt;
      &lt;input type="text" name="Price" /&gt;
      &lt;input type="text" name="Name" /&gt;
      &lt;input type="text" name="Catagory" /&gt;
    &lt;/div&gt;
    &lt;div class="itemsection" id="item2"&gt;
      &lt;input type="text" name="Price" /&gt;
      &lt;input type="text" name="Product" /&gt;
      &lt;input type="text" name="Catagory" /&gt;
    &lt;/div&gt;
    &lt;div class="itemsection" id="item3"&gt;
      &lt;input type="text" name="Price" /&gt;
      &lt;input type="text" name="Product" /&gt;
      &lt;input type="text" name="Catagory" /&gt;
    &lt;/div&gt;
  &lt;/form&gt;
</code></pre>

<p>Now on the server side (C#), I have an action method and a model class <code>Product</code>:</p>

<pre><code>    //Action method accepts the form on server //It require the Product array 
    public ActionResult SaveItem(Product[] products)
    {
         .....
         ...
    }

    //Model class product
    public Class Product
    {
      public int Id { get; set; }
      public double Price { get; set; }
      public string Name { get; set; }
      public string Catagory { get; set; }
    }
</code></pre>

<p><strong>Now my question is:</strong> I am submitting the form using <code>jquery $.ajax method</code>. On the server side the action method accepts a <code>Product</code> class array. Now how can I convert the form fields into a <code>Json</code> array (similar to product array). I tried:</p>

<pre><code>   $("#form").serialize();  
           &amp;
   $("#form").serializeArray();
</code></pre>

<p>The first generates the name-value pair of all the form fields and the second generates the name-value array of all the form fields. And my requirement is:</p>

<pre><code>  //currently my form contains 3 item section so :
   [
    { "Price" : "value", "Name" : "value", "Catagory" : "value" }, 
    { "Price" : "value", "Name" : "value", "Catagory" : "value" }
    { "Price" : "value", "Name" : "value", "Catagory" : "value" }
   ]
</code></pre>

<p>Can anyone tell me how can I can achieve this through <code>JavaScript</code> or <code>JQuery</code>?</p>
