current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them; it only takes a minute:
up vote 0 down vote favorite

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.

share|improve this question
2  
Use parseInt() - var total = parseInt(value) + parseInt(apron); – Krish R Apr 4 '14 at 11:14
    
Amount can be decimal too. If so use parseFloat(). – Bharadwaj Apr 4 '14 at 11:17
    
Krish R - Cheers, thats sorted the adding the two numbers together. – Jordan Sayner Apr 4 '14 at 11:21

1 Answer 1

up vote 1 down vote accepted

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

share|improve this answer
    
cheers spot on. should be able to figure out the rest. – Jordan Sayner Apr 4 '14 at 11:19
    
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? – Tom Spee Apr 4 '14 at 11:21
1  
@speetje33 now check – Sridhar R Apr 4 '14 at 11:23
    
http://jsfiddle.net/acpD3/ – Novalis Apr 4 '14 at 11:32
    
how would i make it so if i changed the desired amount after checking the checkbox it still counts the apron price. – Jordan Sayner Apr 4 '14 at 12:12

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.