JS output sum (only the numbers) of all checked input fields values before form submit

Question

I have a form that has input checkboxes like the ones in the example. The js code extracts the number from the checked input values and outputs them one next to eachother. How to I edit the code so that when you check a second input checkbox the output is the sum of the numbers?

This is the PHP form:

<input type="checkbox" onchange="toggleCheckbox(this)" value="abc 1 def" name="1">
<input type="checkbox" onchange="toggleCheckbox(this)" value="abc 2 def" name="2">
<input type="checkbox" onchange="toggleCheckbox(this)" value="abc 3 def" name="3">

The JavaScript i use:

<script type="text/javascript"> 
    function toggleCheckbox(element){
        if (element.checked){
        var number = element.value.replace ( /[^\d.]/g, '' );
        document.getElementById("test").innerHTML += " " + number;
        }
} 
</script>

The HTML field:

<p id="test"></p>

use a variable to hold the sum .. place it outside the scope of your function and add new value to it and print that instead of the number .. — Qarib Haider
– Qarib Haider, Commented Aug 27, 2014 at 13:38
Well give the value just the number, and then in the check if just add em up.. — Naruto
– Naruto, Commented Aug 27, 2014 at 13:38

lpg · Accepted Answer · 2014-08-27 13:50:23Z

1

You could store the accomulated value in a global variable, E.g.:

var sum = 0;

function toggleCheckbox(element){
        var number = element.value.replace ( /[^\d.]/g, '' );
        if (element.checked)
            sum += Number(number);
        else
            sum -= Number(number);
        document.getElementById("test").innerHTML = sum;
}

Demo fiddle : http://jsfiddle.net/lparcerisa/08hLc37a/

With jQuery, it could be done this way:

$("input[type=checkbox]").click(function(){
    var sum=0;
    $("input[type=checkbox]:checked").each(function(index){
        sum += Number($(this).val().replace( /[^\d.]/g,''));
    });
    $("#test").html(sum);
} );

Demo fiddle (jquery) : http://jsfiddle.net/lparcerisa/res4k96j/2/

edited Aug 27, 2014 at 13:50

answered Aug 27, 2014 at 13:44

lpg

4,9371 gold badge18 silver badges16 bronze badges

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

Comments

David Thomas · Accepted Answer · 2014-08-27 13:43:18Z

One approach (given the revised HTML, below the jQuery) is:

function toggleCheckbox(element) {
    if (element.checked) {
        var number = element.value.replace(/[^\d.]/g, '');
        document.getElementById("test").innerHTML += " " + number;
    }
}

// binding the change-event handler using jQuery, outside of the HTML:    
$('input[type="checkbox"]').on('change', function () {
    toggleCheckbox(this);
});

// binding the click-event handler:
$('#total').on('click', function(){
    // using split() to get an array of the numbers:
    var numbers = $('#test').text().split(' '),
    // using Array.reduce() to iterate over the elements of the array:
        total = numbers.reduce(function(a,b) {
            // using '(+a) + (+b)' to coerce the array elements to numbers
            // (from strings) and then summing them together:
            return (+a) + (+b);
        });
    // setting the text of the '#result' element:
    $('#result').text('(' + total + ')');
});

JS Fiddle demo.

Revised HTML:

<input type="checkbox" value="abc 1 def" name="1" />
<input type="checkbox" value="abc 2 def" name="2" />
<input type="checkbox" value="abc 3 def" name="3" />
<button id="total">Find the total</button>
<span id="test"></span><span id="result"></span>

References:

JavaScript:
- Array.prototype.reduce().
jQuery:
- on().
- text().

Collectives™ on Stack Overflow

JS output sum (only the numbers) of all checked input fields values before form submit

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related