CODEWITHSUNDEEP
jquery
lewis4u
lewis4u

Reputation: 15057

jQuery calculate field from two other fields

I don't get it why is this not working properly:

Fiddle

I just want to show the tax amount but it gets false results.

// calculate brutto and tax
$(document).on('keyup paste', '#netto', function() {
    var brutto = $("#brutto").val();
    var netto = $("#netto").val();
    $("#brutto").val(netto * 1.19);
    $("#tax").val(brutto - netto);
});

Upvotes: 0

Views: 490

Answers (4)

madalinivascu
madalinivascu

Reputation: 32354

Parse you strings to int, change the event to a input type event:

 $(document).on('input', '#netto', function () {

  var brutto = parseInt($("#brutto").val());
  var netto = parseInt($("#netto").val());

  $("#brutto").val(netto * 1.19);
  $("#tax").val((netto * 1.19) - netto );


});

better if you go with a input type number so you don't have problems with invalid values

https://jsfiddle.net/ze5tsgy9/6/ or:

https://jsfiddle.net/ze5tsgy9/7/ if you want to get rid of NaN when its empty

Upvotes: 1

Dr. Roggia
Dr. Roggia

Reputation: 1125

The problem is that you get the brutto value before filling it, the solution is to get var brutto after you calculate $("#brutto").val(netto * 1.19):

// calculate brutto and tax
$(document).on('keyup paste', '#netto', function() {
    var netto = +$("#netto").val();
    $("#brutto").val(netto * 1.19);
    var brutto = +$("#brutto").val();
    $("#tax").val(brutto - netto);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <label for="brutto">Brutto</label>
    <input class="form-control" readonly="readonly" name="brutto" type="text" id="brutto">
</div>
<div class="form-group">
    <label for="tax">Taxes 19%</label>
    <input class="form-control" readonly="readonly" name="tax" type="text" id="tax">
</div>
<div class="form-group">
    <label for="netto">Netto</label>
    <input class="form-control" name="netto" type="text" id="netto">
</div>

Upvotes: 2

Satpal
Satpal

Reputation: 133423

You need to validate the value of brutto element is a number before performing operation. the + operator is use to convert input to a number. 

$(document).on('keyup paste', '#netto', function() {
    var brutto = +$("#brutto").val() || 1;
    var netto = +$("#netto").val() || 1;
    brutto = netto * 1.19;
    $("#brutto").val(brutto);
    $("#tax").val(brutto - netto);
});

This will also be useful since the element is readonly. Updated Fiddle

Upvotes: 1

Mukesh Parmar
Mukesh Parmar

Reputation: 123

Please try following code :

// calculate brutto and tax
$(document).on('keyup paste', '#netto', function () {

    var brutto = $("#brutto").val();
    var netto = $("#netto").val();

    $("#brutto").val(netto * 1.19);

    var brutto1 = $("#brutto").val();   

    $("#tax").val(brutto1 - netto);

});

In your code the value of brutto is not updated in variable after new value (natto * 1.19), so you gets false result.

Thanks...

Upvotes: 2

Related Questions