Using jQuery to send form data with array of form elements with the same name

Question

I have this form:

...
        <td><input type="text" name="code[]" value="" /></td>
        <td>
              <select class="selectProductOrders" name="selectProductOrders[]">
                  <option value="default" disabled selected>Select a product</option> 
              </select>
        </td>
        <td><input type="number" pattern="[0-9]*" name="rsp[]" value="" /></td>
        <td><input type="number" pattern="[0-9]*" name="trade[]" value="" /></td>
        <td><input type="number" pattern="[0-9]*" name="discount[]" value="0" /></td>
        <td><input type="number" pattern="[0-9]*" name="qty[]" value="" /></td>
        <td><input type="number" pattern="[0-9]*" name="cost[]" value="" /></td>
...

There is more above and below it but this is the important part. This row in a table is repeated depending on how many products are in the order, so I thought it would be easier to parse arrays of each order item element on the server side. And because the form is quite large I have decided to use jQuery.serialize() to send the data in json format.

It sends the rest of the form ok, but doesnt send over arrays of each input element stated above, it just sends the last row.

Any idea of a solution to this? I suppose I could just type the values out form the form manually into a json format but I wanted to get my head round the serialize problem.

Thanks!

shere · Accepted Answer · 2013-02-19 15:37:57Z

2

I think you can't use jQuery.serialize() if the inputs have all the same name.

To send an array to the server I would recommend to number your inputs:

<td><input type="text" name="code[0]" value="" /></td>
    <td>
          <select class="selectProductOrders" name="selectProductOrders[0]">
              <option value="default" disabled selected>Select a product</option> 
          </select>
    </td>
    <td><input type="number" pattern="[0-9]*" name="rsp[0]" value="" /></td>
    <td><input type="number" pattern="[0-9]*" name="trade[0]" value="" /></td>
    <td><input type="number" pattern="[0-9]*" name="discount[0]" value="0" /></td>
    <td><input type="number" pattern="[0-9]*" name="qty[0]" value="" /></td>
    <td><input type="number" pattern="[0-9]*" name="cost[0]" value="" /></td>


<td><input type="text" name="code[1]" value="" /></td>
    <td>
          <select class="selectProductOrders" name="selectProductOrders[1]">
              <option value="default" disabled selected>Select a product</option> 
          </select>
    </td>
    <td><input type="number" pattern="[0-9]*" name="rsp[1]" value="" /></td>
    <td><input type="number" pattern="[0-9]*" name="trade[1]" value="" /></td>
    <td><input type="number" pattern="[0-9]*" name="discount[1]" value="0" /></td>
    <td><input type="number" pattern="[0-9]*" name="qty[1]" value="" /></td>
    <td><input type="number" pattern="[0-9]*" name="cost[1]" value="" /></td>

This ensures that all your values are sent to the server.

answered Feb 19, 2013 at 15:37

shere

1013 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jay Blanchard Over a year ago

Using serialize is OK in this case and you do not have to number the array. The values are properly placed into the serialized string. The trick is getting the data out of the string on the server-side. jsfiddle.net/2DEK2

Collectives™ on Stack Overflow

Using jQuery to send form data with array of form elements with the same name

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related