Javascript : Auto calculate sum with different type of input

Question

I have an ajax code which is concepted from auto calculate the sum of input values with javascript. So I'd like to add more field to meet my needs. Then I added some inputs[checkbox] with given value in it. The idea is when the box is checked. Its value will be calculated to the process just like type in the input[text].

Here's the code :

<script language="javascript">
function AddInputs()
{
    var total = 0;
    var coll = document.getElementsByTagName("input")
    for ( var i = 0; i<coll.length; i++)
    {
        var ele = coll[i];
        total += parseInt(ele.value);
    }
    var Display = document.getElementById("Display");
    Display.innerHTML = total;
}
</script>

Here's the form:

<input onkeyup="AddInputs()" />
<input onkeyup="AddInputs()" />
<input onkeyup="AddInputs()" />
<input type="checkbox" onkeyup="AddInputs()" value="100" />
<span id="Display"></span>

The problem is I can't make the checkbox to get calculated with those input boxes. Please suggest.

duri · Accepted Answer · 2012-09-15 16:22:15Z

0

That's because onkeyup event is fired when you release a key on the keyboard and this doesn't happen when you click the checkbox. You should use either onchange (but this won't work in older IEs) or onclick.

Also note that the value of 100 will always be added to total. If you want to count the checkbox only if it's checked, use something like

if (ele.type !== 'checkbox' || ele.checked) {
    total += parseInt(ele.value);
}

answered Sep 15, 2012 at 16:22

duri

15.4k3 gold badges49 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Wilf Over a year ago

Your method doesn't works:

code <script language="javascript"> function AddInputs() {     var total = 0;     var coll = document.getElementsByTagName("input")     for ( var i = 0; i<coll.length; i++)     { 		if (ele.type !== 'checkbox' || ele.checked) { 			total += parseInt(ele.value); 		}     }     var Display = document.getElementById("Display");     Display.innerHTML = total; } </script>  <input onkeyup="AddInputs()" /> <input onkeyup="AddInputs()" /> <input onkeyup="AddInputs()" /> <input type="checkbox" onkeyup="AddInputs()" value="100" />+100 <span id="Display"></span>

Collectives™ on Stack Overflow

Javascript : Auto calculate sum with different type of input

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related