0

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).

enter image description here

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?

7
  • 1
    I can't answer (or can I, hmm) but just thinking about it made the front of my head hurt. :P Sep 25, 2014 at 10:41
  • You win the internet!
    – foamcow
    Sep 25, 2014 at 10:42
  • Also, think how I feel!
    – foamcow
    Sep 25, 2014 at 10:42
  • 1
    Seriously though... does it still exhibit this behaviour when you remove all JS from the template? Sep 25, 2014 at 10:43
  • I haven't tried it since the JS is creating the dropdowns. That HTML snippet is what is generated and I can't see a problem with it :/ I'll give it a whirl but feel it's highly unlikely to be the problem. No matter which products or how many rows the very first field gets the very first selectable option.
    – foamcow
    Sep 25, 2014 at 10:55

1 Answer 1

0

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.

2
  • Glad you got it sussed, a problem shared is a problem cut in half with a chainsaw or something... Sep 25, 2014 at 13:17
  • In a way I'm sad that the issue was far less interesting than it first appeared :)
    – foamcow
    Sep 25, 2014 at 13:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.