Question

I have a project that requires the process of order entry. An order will be as simple as choosing an item from a drop down list. Each order may contain multiple line items for the purchase. Using JQuery to clone this field is quite simple as I understand and I can get that far. Where I get hung up is there will be a collection of options relating to the item selected for the order that needs to be tied to that particular line item. A typical order may look something like:

• PRODUCT ITEM: ASUS BASE DESKTOP
  • OPTIONS
  • 4GB RAM Option
  • Windows 7 x64 Professional
• PRODUCT ITEM: HP BASE LAPTOP
  • OPTIONS
  • 2GB RAM Option
  • Windows Vista x32

My HTML markup looks something like:

<tr class="firstProduct productOrder">
    <td>Product Name</td>
    <td>
        <select id="ProductNameSelect" name="productOrdered[]">
            <option selected="selected" value="0">Select a Product...</option>
            <option value="1">ASUS BASE DESKTOP</option>
            <option value="2">HP BASE LAPTOP</option>
        </select>
    </td>
</tr>
<tr class="firstProduct productOrder">
    <td>Product Options</td>
    <td>
        <label>4GB RAM Option<input type="checkbox" name="productOption[0][]" value="1" /></label>
        <label>Windows 7 x64 Professional<input type="checkbox" name="productOption[0][]" value="2" /></label>
        <label>Windows Vista x32<input type="checkbox" name="productOption[0][]" value="3" /></label>
    </td>
</tr>

The name of the productOption fields have to be named to a nested array or else options selected for productOrdered[1] may not get properly assigned. I need the ability to iterate the name of the productOption from [0][ ] to [1][ ] to [2][ ] and so on for each order added so it can be processed properly in the POST variable for PHP.

Is there a “best method” or at least more common method for accomplishing this goal other than to search for the previous child in JQuery and the parse the name to determine the next ID to be used in the name for productOption?

Answer 1

Yes, simply declare a global variable in your javascript code and increment it everytime you add a fieldset.

<script>
var index=0;
function addFieldset()
{
   ...
   index++;
}
</script>