Update input field on checkbox selection with Javascript

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!

would you provide a fiddle? jsfiddle.net , it would be easy to check it in realtime and update as necessary... — Asif
– Asif, Commented Jun 7, 2012 at 16:15
Well it does not work, that is why I am asking help, but here you go link — Llewellyn
– Llewellyn, Commented Jun 7, 2012 at 16:30

xcopy · Accepted Answer · 2012-06-07 16:43:02Z

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/

Collectives™ on Stack Overflow

Update input field on checkbox selection with Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related