Add Value on Button Click with jQuery

Question

How can I add the corresponding values when each button is clicked?

With my current script it almost works but it adds each of the previous values instead of just adding the current value:

jQuery(function() {
    total = 0;
    jQuery("input").click(function() {
        jQuery("input:checked").not('input[value="reset"]').each(function() {
            total += parseFloat(jQuery(this).val());
        });
        jQuery("#Totalcost").html("Save up to " + total + "%");
    });

    jQuery('input[value="reset"]').click(function(){
        jQuery('span#Totalcost').html("Calculate your Savings!");
        total = 0;
    });
});

please show us the HTML also

JohnKiller
– JohnKiller

2015-03-05 22:32:33 +00:00
Commented Mar 5, 2015 at 22:32 — JohnKiller
– JohnKiller, Commented Mar 5, 2015 at 22:32

Mateusz Mania · Accepted Answer · 2015-03-05 23:09:36Z

2

Try to declare global visible variable.

JSFiddle

var total = 0;

jQuery(function() {

    jQuery("input").click(function() {
        jQuery("input:checked").not('input[value="reset"]').each(function() {
            total += parseFloat(jQuery(this).val());
        });
        jQuery("#Totalcost").html("Save up to " + total + "%");
    });

    jQuery('input[value="reset"]').click(function(){
        jQuery('span#Totalcost').html("Calculate your Savings!");
        jQuery("input:checked").prop('checked', false);
        total = 0;
    });
});

Information

total variable is declared outsite jQuery(function (){ because I dont know do You not need this variable outside this function.

Btw. Maybe You are interested jQuery change event?

I think this is better choice in this case.

edited Mar 5, 2015 at 23:09

answered Mar 5, 2015 at 22:32

Mateusz Mania

8494 silver badges15 bronze badges

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

1 Comment

Mateusz Mania Over a year ago

Edited. Unchecking all checked inputs, was added.

George · Accepted Answer · 2015-03-05 22:39:22Z

0

You don't set your total back to zero each time a checkbox is clicked. Reset your total back to zero within your click event handler:

jQuery(function() {
    var total = 0;
    jQuery("input").click(function() {
        total = 0;
        jQuery("input:checked").not('input[value="reset"]').each(function() {
            total += parseFloat(jQuery(this).val());
        });
        jQuery("#Totalcost").html("Save up to " + total + "%");
    });

    jQuery('input[value="reset"]').click(function(){
        jQuery('span#Totalcost').html("Calculate your Savings!");
        total = 0;
    });
});

JSFiddle

answered Mar 5, 2015 at 22:39

George

36.9k9 gold badges70 silver badges109 bronze badges

1 Comment

Rick Helston Over a year ago

This almost works, except for the Reset button. How can I make it work? When a user presses Reset, it should uncheck all the inputs and set the total to 0.

Collectives™ on Stack Overflow

Add Value on Button Click with jQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related