For reasons I won't go into, I need to insert data into a Grid field using a Channel form. However, I cannot use the 'default' Grid field and instead need to use separate, custom select dropdowns.
I've managed to get this working except for one thing.
The Grid field in question has 3 simple text columns. Two of these are populated by select dropdowns.
The second select seems to work OK and the data from the select is inserted correctly. But the first select field of the first row is always gets the very first option inserted. All other columns/rows appear to be OK.
The different rows are generated with jQuery and the second select of each row is dynamically generated from an Ajax lookup but I can't see this being the issue as everything else seems to work OK.
The HTML I'm using is thus (ignore the data attributes, they are from a previous iteration and I've not yet removed them);
<div id="product-selections">
<div id="product-selection-1" class="product-selection">
<select class="product-purchased" name="customer-invoice-purchases[rows][new_row_1][col_id_1]">
<option value="">--Choose a product--</option>
<option data-product="554" value="Product 1">Product 1</option>
<option data-product="553" value="Product 2">Product 2</option>
<option data-product="551" value="Product 3">Product 3</option>
<option data-product="550" value="Product 4">Product 4</option>
<option data-product="549" value="Product 5">Product 5</option>
<option data-product="548" value="Product 6">Product 6</option>
</select>
<select id="" class="product-variant" name="customer-invoice-purchases[rows][new_row_1][col_id_2]">
<option data-product="553" data-points="20">2 port</option>
<option data-product="553" data-points="30">3 port</option>
<option data-product="553" data-points="40">4 port</option>
<option data-product="553" data-points="50">5 port</option>
<option data-product="553" data-points="60">6 port</option>
<option data-product="553" data-points="70">7 port</option>
<option data-product="553" data-points="80">8 port</option>
<option data-product="553" data-points="90">9 port</option>
<option data-product="553" data-points="100">10 port</option>
<option data-product="553" data-points="110">11 port</option>
<option data-product="553" data-points="120">12 port</option>
</select>
<a class="remove button pink small" href="#" title="Remove this item">×</a>
</div>
<div id="product-selection-2" class="product-selection">
<select class="product-purchased" name="customer-invoice-purchases[rows][new_row_2][col_id_1]">
<option value="">--Choose a product--</option>
<option data-product="554" value="Product 1">Product 1</option>
<option data-product="553" value="Product 2">Product 2</option>
<option data-product="551" value="Product 3">Product 3</option>
<option data-product="550" value="Product 4">Product 4</option>
<option data-product="549" value="Product 5">Product 5</option>
<option data-product="548" value="Product 6">Product 6</option>
</select>
<select id="" class="product-variant" name="customer-invoice-purchases[rows][new_row_2][col_id_2]">
<option data-product="551" data-points="60">2 port</option>
<option data-product="551" data-points="70">3 port</option>
<option data-product="551" data-points="80">4 port</option>
<option data-product="551" data-points="90">5 port</option>
<option data-product="551" data-points="100">6 port</option>
<option data-product="551" data-points="110">7 port</option>
<option data-product="551" data-points="120">8 port</option>
<option data-product="551" data-points="130">9 port</option>
<option data-product="551" data-points="140">10 port</option>
<option data-product="551" data-points="150">11 port</option>
<option data-product="551" data-points="160">12 port</option>
<option data-product="551" data-points="170">13 port</option>
<option data-product="551" data-points="180">14 port</option>
<option data-product="551" data-points="190">15 port</option>
<option data-product="551" data-points="200">16 port</option>
<option data-product="551" data-points="210">17 port</option>
<option data-product="551" data-points="220">18 port</option>
<option data-product="551" data-points="230">19 port</option>
<option data-product="551" data-points="240">20 port</option>
</select>
<a class="remove button pink small" href="#" title="Remove this item">×</a>
</div>
</div>
This is what gets inserted (ignore the quantity column for the moment).
Does anyone have an idea as to why the first field of the first row might always get the first option inserted regardless of what has been selected?