Wrong selected value inserted into a Grid via Channel Form using custom select dropdowns

Question

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?

Answer 1

This was actually a problem with how I was creating the field rows.

I had a 'template' field set within the page (only containing the initial first select) which was cloned as needed (the second select then being inserted via Ajax as required).

This had the effect of overriding whatever was in the first 'real' row.