HTML Multidimensional input name for complex inputs

Question

Selected items must have their discounts aligned with them. I want to ignore the item if it is not selected.

This is my setup for my table of inputs.

item   |   amount   |   buy (yes, no)   |   discount( No Discount, 50%, 100%, 100.00 )

apple  |   100.00   |       yes         |   50%

banana |   500.00   |       no          |   0%

pie    |   250.00   |       yes         |   50%

<tr>
    <input name='item[]' type='checkbox' value='1'>
    <select name='discount[]' >
        <option value="1"> No discount </option>
        <option value="2"> 50% </option>
    </select>
</tr>

If I use item[] for the items and discount[] for the discount, my server will get:

item[ "1", "3"]
discount[ "2", "1", "2" ]

How could I connect the items to thier discount?

Answer 1

Solution: no js needed

The formula for input name would be:

name="GROUP[ $GROUP_INDEX ]['FIELD_NAME']"

our html would be:

<tr>
    <input name='items[ $some_loop_index ]["item"]' type='checkbox' value='1'>
    <select name='items[ $some_loop_index ]["discount"]' >
        <option value="1"> No discount </option>
        <option value="2"> 50% </option>
    </select>
</tr>

On our server we will get:

"items": [
    {
        "'item'": "1",
        "'discount'": "2"
    },
    {
        "'discount'": "1"
    },
    {
        "'item'": "3",
        "'discount'": "2"
    }
]

The data is now grouped. :)