Question

I would like two things to happen.

One

when a selection is made the input field updates as the total,

Two

the check boxes are dynamically generated and may sometimes be up to
six and sometimes as low as one product.

This is what I have made, but I can’t get it to work 🙁

   <script type="text/javascript">
    function updateTotal(){
        document.getElementById('total').value = 
            (document.getElementById('date0').checked?
             parseFloat(document.getElementById('date0').price):0) +
             (document.getElementById('date1').checked?
             parseFloat(document.getElementById('date1').price):0) +
             (document.getElementById('date2').checked?
             parseFloat(document.getElementById('date2').price):0);
    }
    </script>

With this as form

<form>
 <td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
   <input id="date0" type="checkbox" name="form[date]" value="blue" price="10" onChange="javascript:updateTotal();">product 1<br />
   <input id="date1" type="checkbox" name="form[date]" value="green" price="30" onChange="javascript:updateTotal();">product 2<br />
   <input id="date2" type="checkbox" name="form[date]" value="red" price="50" onChange="javascript:updateTotal();">product 3<br />
 </td>
 <td>
  Total cost is:
  <input name="total" id="total" type="text" readonly="readonly" style="border:0px;">
 </td>
</form>

Any help will be great!

Answer 1

You can do this by changing your code and markup as follows:

HTML

<td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
   <input id="date0" type="checkbox" name="form[date]" value="blue" data-price="10" onChange="updateTotal();">product 1<br />
   <input id="date1" type="checkbox" name="form[date]" value="green" data-price="30" onChange="updateTotal();">product 2<br />
   <input id="date2" type="checkbox" name="form[date]" value="red" data-price="50" onChange="updateTotal();">product 3<br />
 </td>
 <td>
  Total cost is:
  <input name="total" id="total" type="text" readonly="readonly" style="border:0px;">
 </td>​

JS

function updateTotal(){
    var date0 = document.getElementById('date0');
    var date1 = document.getElementById('date1');
    var date2 = document.getElementById('date2');
    var amount = 0;    
    amount += date0.checked ? parseFloat(date0.getAttribute('data-price')) : 0;
    amount += date1.checked ? parseFloat(date1.getAttribute('data-price')) : 0;
    amount += date2.checked ? parseFloat(date2.getAttribute('data-price')) : 0;
    document.getElementById('total').value = amount;

}​

A couple of things to note:

You do not need to include the javascript: before the function in the onchanged attribute.
You should prefix custom attributes with the data-* prefix.
You should surround your td tags with tr and table. The way that you are using them it would make more send to use an ul tag with li children.

DEMO – http://jsfiddle.net/9mxh5/

If the checkboxes are dynamically generated and you don’t know how many you may have:

HTML

<td id="datecontainer" onchange="Process(this.options[this.selectedIndex].value)">
   <input id="date0" type="checkbox" name="form[date]" value="blue" data-price="10" onChange="updateTotal(this);">product 1<br />
   <input id="date1" type="checkbox" name="form[date]" value="green" data-price="30" onChange="updateTotal(this);">product 2<br />
   <input id="date2" type="checkbox" name="form[date]" value="red" data-price="50" onChange="updateTotal(this);">product 3<br />
 </td>
 <td>

JS

var amount = 0;

function updateTotal(element){
        var price = parseFloat(element.getAttribute('data-price'));
        amount += element.checked ? price : price*(-1);
        document.getElementById('total').value = amount;

    }​

DEMO – http://jsfiddle.net/9mxh5/2/