How to to store multi-dimensional form data?

I have a form where fields get added via JavaScript. This is fairly easy to store without a bunch of extra JS code (for deleting and reordering) by using arrayed names for fields.

<input type="text" name="product[]" />

The problem comes when I need a multi-dimensional arrayed list of form data.

order
  request_date
  product[]
  quantity[]
    warehouse1
    warehouse2
    etc...

Basically, each order has the order data, multiple products, and each product line item can be pulled from one or more warehouses. If the line item's order quantity is 100, and the first choice warehouse only has 50 units, they will need to select a secondary warehouse to get the second 50 units from...

I am trying to get this all onto one pag开发者_Go百科e possibly with JS popups to select between the different warehouses.

The problem is when I try to think of a good way to send this info to the server.

I would like to use the arrayed line item info, but cannot figure out how to send the multiple warehouses per line item back to the server. Should I just do something like comma separated values in a hidden field (populated by the JS warehouse selection popup)? Is there a better way? Any suggestions appreciated. Thanks.

If it matters, the backend is PHP.

Why not use JSON? On the PHP end you'll end up with an array of elements for the nested arrays.

It sounds to me like you're either unaware of JSON (and with an SO rep of 3k, I can't believe that) or that you're unaware that you can pass JSON back to the server.

But for what you're describing, that sounds like a natural and perfect fit.

"stick that array element as an object onto the returned value"

var returnObject = { field1: "value", field2: "value" };
var buildArray = [];
$(specificSelector).each(function(){
  buildArray.push($(this).data('myKey'));
});
returnObject.field3 = buildArray;

• Note that this uses .each which is ugly and nasty. There are better ways to do this, if you want speed or cleanness. But this works.
• Note that I have not tested this fully, this was off the top of my head, for demonstration of concept.
• Note that I assume each object to be selected has a .data associated with it, of key 'myKey'. You could instead iter over each cell in a table, or whatever. This is how I do it, and probably leads to bloated pages anyways. But when I append a row I attach the value as an object so I can do this sort of thing faster (faster to type that is)

Send back as JSON.

order: {
    request_date: '07/06/2011',
    products: [
    {
        id: 1,
        quantity: 3,
        warehouses: [1]
    },
    {
        id: 2,
        quantity: 4,
        warehouses: [1,2]
    },
    {
        id: 3,
        quantity: 5,
        warehouses: [3]
    }]
}

Try:

<input name="order[product][]" value="" />
<input name="order[product][]" value="" />
<input name="order[product][]" value="" />
etc...

You could use a multi select box for all the warehouses. In case you also need to specify how many units per warehouse, then this doesn't work. You can do it like this:

<select name="order4quantity2warehouse">
  <option>Warehouse 1</option>
  <option>Warehouse 2</option>
</select>
<input name="order4quantity2warehouse-quantity" />

Then on the server size you decode $_POST to exact all the data into arrays. For example you can do this by looping over the keys of the $_POST and determining which pattern the key matches, e.g. order[number]quantity[number]warehouse, and then insert it into the appropriate place in your arrays.