Jquery - Adding Input value and another number together if checkbox is checked

Question

Im creating a form where i want the user to fill out an amount, and then show at the bottom of the form. Then if there is a checkbox checked it adds 21 to the value within the input field so far i have this, but its not quite working.

http://jsfiddle.net/vePbV/

<label>Desired amount</label> <input name="tbDesiredAmount" type="number" id="tbDesiredAmount" min="50" />
<label>Include Apron?</label> <input id="cb_Apron" type="checkbox" name="cb_Apron" /> 

<p>Total: £<span id="total">0</span>.00</p>



$('#tbDesiredAmount').blur(function() {
        var value = $('#tbDesiredAmount').val();
        $("#total").empty().append(value);
});
$('#cb_Apron').blur(function() {
        var value = $('#tbDesiredAmount').val();
        var apron = 21;
        var total = value + apron; 
        $("#total").empty().append(total);
});

So and example of what i want it to do.

Type 70 into "desired amount", show 70 in #total when you focus off the input field.
Check apron tickbox, adds 21 to the desired amount so displays 91 in #total
if you uncheck the apron checkbox, it will remove 21 from the figure in #total
if i change the desired amount, it will update the #total, this needs to work with the tickbox checked and the tickbox not checked.

Any help would be greatly appreciated as im rather stuck at the moment.

Use parseInt() - var total = parseInt(value) + parseInt(apron); — Krish R
– Krish R, Commented Apr 4, 2014 at 11:14
Krish R - Cheers, thats sorted the adding the two numbers together. — ltjfansite
– ltjfansite, Commented Apr 4, 2014 at 11:21

Sridhar R · Accepted Answer · 2014-04-04 12:17:16Z

1

Try this Use parseInt()

var apron = 21;
$('#tbDesiredAmount').keyup(function () {
    var value = $('#tbDesiredAmount').val();
    if ($('#cb_Apron').is(':checked')) {
        var total = parseInt(value) + parseInt(apron);
        $("#total").empty().append(total);
    } else {
        $("#total").empty().append(value);
    }
});
$('#cb_Apron').click(function () {
    if ($(this).is(':checked')) {
        var value = $('#tbDesiredAmount').val();
        var total = parseInt(value) + parseInt(apron);
        $("#total").empty().append(total);
    } else {
        var tot = parseInt($("#total").text()) - (parseInt(apron))
        $("#total").empty().append(tot);
    }
});

DEMO

edited Apr 4, 2014 at 12:17

answered Apr 4, 2014 at 11:15

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

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

2 Comments

Tom Spee Over a year ago

If I type 70 in the amount, Total value is 70. When I check the Apron checkbox the Total value is 91. When I uncheck the Apron checkbox the Total value stays 91?

ltjfansite Over a year ago

how would i make it so if i changed the desired amount after checking the checkbox it still counts the apron price.

Collectives™ on Stack Overflow

Jquery - Adding Input value and another number together if checkbox is checked

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related