CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Shehary
Shehary

Reputation: 9992

Add and subtract values with jQuery

Need Help with following piece of jQuery code;

What I'm trying to do is;

  1. add Amount into Total
  2. when amount added Checkbox value get double
  3. If checkbox state change, checkbox Updated value minus or add into Total accordingly
  4. if Amount minus from Total, checkbox value change back to original
  5. If checkbox state change, checkbox Updated value minus or add into Total accordingly

Following is the piece of jQuery Code

$('#Addcar').on('click', function() {
if($(this).html()=='Add') {
    $(this).html('Remove');
    var tot = parseFloat($('#TotalAmount').val()) + parseFloat($('#QuoteAmount').val());
    var totcan = parseFloat($('#Cancelation').val()) + 2;
    $('#TotalPrice').val(tot);
    $('#Cancelation').val(totcan);
} else {
    $(this).html('Add');
    var tot = parseFloat($('#TotalPrice').val()) - parseFloat($('#QuoteAmount').val());
    var totcan = parseFloat($('#Cancelation').val()) - 2;
    $('#TotalPrice').val(tot);
    $('#Cancelation').val(totcan);
}
});

$('#Cancelation').change(function(){
if($(this).is(':checked')){
    total = parseFloat($('#TotalPrice').val()) + Number($(this).val());
} else {
    total = parseFloat($('#TotalPrice').val()) - Number($(this).val());
}
$('#TotalPrice').val(total);
});

Here is the fiddle which explains better;

Updated Fiddle:
http://jsfiddle.net/55n8acus/7/

If QuoteAmount value added and checkbox value remove from Total and then remove QuoteAmount value , the result value will be wrong, it should be 52 not 48, the reason checkbox won't update and it still remove 4 from Total instead it should remove 2.

Thanks for all the help

Regards.

Upvotes: 0

Views: 16319

Answers (1)

Namit Singal
Namit Singal

Reputation: 1516

What I can understand from the question is that you want to subtract the value from total price, but you are accidentally using #TotalValue instead of #TotalPrice when you click on the checkbox, change the code to this, it will work as expected.

$('#Cancelation').change(function(){
if($(this).is(':checked')){
    total = parseFloat($('#TotalPrice').val()) + Number($(this).val());
} else {
    total = parseFloat($('#TotalPrice').val()) - Number($(this).val());
}
$('#TotalPrice').val(total);
});

here is the updated js fiddle :- jsfiddle.net/55n8acus/8

$('#Addcar').on('click', function() {
    if($(this).html()=='Add') {
        $(this).html('Remove');
        var tot = parseFloat($('#TotalAmount').val()) + parseFloat($('#QuoteAmount').val());
        var totcan = parseFloat($('#Cancelation').val()) + 2;
        if(!$("#Cancelation").is(':checked')){
            tot = tot -4;
        }
        $('#TotalPrice').val(tot);
        $('#Cancelation').val(totcan);
        $('#Cancel').html(totcan);        
    } else {
        $(this).html('Add');
        var tot = parseFloat($('#TotalPrice').val()) - parseFloat($('#QuoteAmount').val());
        if(!$("#Cancelation").is(':checked')){
            tot +=2;
        }
        var totcan = parseFloat($('#Cancelation').val()) - 2;
        $('#TotalPrice').val(tot);
        $('#Cancelation').val(totcan);
        $('#Cancel').html(totcan);
    }
});

$('#Cancelation').change(function(){
    if($(this).is(':checked')){
        total = parseFloat($('#TotalPrice').val()) + Number($(this).val());
    } else {
        total = parseFloat($('#TotalPrice').val()) - Number($(this).val());
    }
    $('#TotalPrice').val(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="javascript:;" id="Addcar">Add</a><br>
<input type="text" id="QuoteAmount" value="50" />
<input type="text" name="TotalAmount" id="TotalAmount" value="52" /><br>
<input type="text" name="TotalPrice" id="TotalPrice" value="0" /><br>
<input type="checkbox" id="Cancelation" value="2" checked> <span id="Cancel">2</span>

Upvotes: 2

Related Questions