Question

I need help with the coding of a custom function that I need to do.

The concept is simple : I offer the customer a list of ~20 products and then I ask them to select 5 products from the entire list using checkboxes.

And while they do select the products, it needs to update an hidden input so I will be able to insert it in my database.

We could be starting with something like this : http://jsfiddle.net/9mxh5/ but it only needs to be work so I can only select a number of checkboxes.

Here is some code we could use too

<input type="checkbox" name="products" value="product1" onChange="javascript:updateProducts();"/>
<input type="checkbox" name="products" value="product2" onChange="javascript:updateProducts();"/>
<input type="checkbox" name="products" value="product3" onChange="javascript:updateProducts();"/>
<input type="checkbox" name="products" value="product4" onChange="javascript:updateProducts();"/>

<!-- Hidden -->
<input type="hidden" name="myFiveProducts" value="THELIST" />

I have used the jsfiddle up there and adapt it like I would like to do : http://jsfiddle.net/ENxnK/15/

Thx in advance for your help.

Answer 1

I’ve given condition for 3. You can change it to 5 and i think you can assign your hidden variable by yourself. If i can’t then let me know . I’ll update it

<script type="text/javascript">
var i=0;
    function updateProducts(myid)
{

    if(document.getElementById(myid).checked==true)
    {i=i+1;

    if(i==3)
    {
    document.getElementById("products1").disabled="disabled";
    document.getElementById("products2").disabled="disabled";
    document.getElementById("products3").disabled="disabled";
    document.getElementById("products4").disabled="disabled";
    }
    }
    else
    i=i-1;
}
</script>
    <div id="mydiv">
<input type="checkbox" id="products1" value="product1" onChange="javascript:updateProducts(this.id);"/>
<input type="checkbox" id="products2" value="product2" onChange="javascript:updateProducts(this.id);"/>
<input type="checkbox" id="products3" value="product3" onChange="javascript:updateProducts(this.id);"/>
<input type="checkbox" id="products4" value="product4" onChange="javascript:updateProducts(this.id);"/>
</div>