jQuery POST表单数据行

I'm trying to add a simple cart system to my photo gallery, at the moment I'm creating a simple way of updating the selected products with types and quantities. However I have struck a problem with processing the data on PHP end.

Because I'm sending rows with the same field names PHP is overwriting the data to only create 1 array. Ideally I would like it to become this in PHP;

array(item, product, quantity), 
array(item, product, quantity), 
array(item, product, quantity)

What would be the best way of handling this.

1. Create the field names with some sort of unique identifier, then get PHP to reprocess the post array.
2. Create the arrays with JS then send them as a row as an array so in my case 3 arrays. Not sure if it will work as it will be converted back to string during POST?
3. Some way of creating the post arrays with the key being "item_gallery_id" field?
4. I have been stuck on this for hours and for something I thought would be simple, I have tried everything :(

POST Parameters

cart_id 1
item_gallery_id 6
item_gallery_id 3
item_gallery_id4
product_options 12
product_options 12
product_options 12
quantity    1
quantity    1
quantity    1

I have the following HTML

<form id="order_photo_form">
<table width="100%" border="0">
  <thead>
    <tr>
      <th>Item</th>
      <th>Album/Item</th>
      <th>Product/Price</th>
      <th>Quantity</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <input class="form_data" name="item_gallery_id" value="6" type="hidden">
      <td><img src="img" width="100"></td>
      <td>Item</td>
      <td><select class="form_data" name="product_options">
          <option value="12">Canvas 100x150cm - $550</option>
          <option value="11">Canvas 100x100cm - $350</option>
        </select></td>
      <td><select class="form_data" name="quantity">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select></td>
    </tr>
    <tr>
      <input class="form_data" name="item_gallery_id" value="3" type="hidden">
      <td><img src="img" width="100"></td>
      <td>Item</td>
      <td><select class="form_data" name="product_options">
          <option value="12">Canvas 100x150cm - $550</option>
          <option value="11">Canvas 100x100cm - $350</option>
    </select></td>
      <td><select class="form_data" name="quantity">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select></td>
    </tr>
    <tr>
      <input class="form_data" name="item_gallery_id" value="4" type="hidden">
      <td><img src="img" width="100"></td>
      <td>Item</td>
      <td><select class="form_data" name="product_options">
          <option value="12">Canvas 100x150cm - $550</option>
          <option value="11">Canvas 100x100cm - $350</option>
        </select></td>
      <td><select class="form_data" name="quantity">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
        </select></td>
    </tr>
  </tbody>
</table>
</form>

Then some simple jQuery;

$.ajax({
   url: "ajax.php?update_cart",
   type: "POST",
   data: $('#order_photo_form').serialize(),
      success: function(data){
         $.jGrowl(data, { life: 10000 });                           
      },
});

Thanks.

You should give the form elements unique names by adding an id/counter, and loop over the post array afterwards to read your posted data and process it.

The exact code depends on how you determine the form field names exactly, but assuming you used a counter starting from 1 and incrementing by one you could do something like this in your php script (untested, but shows you the idea):

$orders = array();

for($i=1;array_key_exists($_POST, "item_gallery_id" . $i);$i++){
    //read the values and store them
    $newOrder = array(
        "id" => $_POST['item_gallery_id' . $i],  
        "options" => $_POST['product_options' . $i],  
        "quantity" => $_POST['quantity' . $i]
    );        

    array_push($orders, $newOrder);
}

You could do the following:

<form id="form" name="form" action="">
  <input name="items[]" type="text" id="item_1" />
  <input name="items[]" type="text" id="item_2" />
</form>

Now $_POST['items'] is an array and you can loop through it:

for ($i = 0; $i < count($_POST['items']); $i++) {
    $item = $_POST['items'][$i];
}

However, this works only in PHP, if you want to reference the elements in JavaScript you'll have to do the following: document.getElementsByName('items[]'). As you can see in JavaScript the brackets are part of the name, whereas, in PHP they indicate that the value is an array.