CODEWITHSUNDEEP
javascripthtml
Llewellyn
Llewellyn

Reputation: 398

Update input field on checkbox selection with Javascript

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!

Upvotes: 2

Views: 6482

Answers (1)

xcopy
xcopy

Reputation: 2288

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/

Upvotes: 2

Related Questions