javascript onchange get return

Question

i have 3 input like this

Grand Total Box

<input type="text" name="GrandTotal" id="GrandTotal" class=" form-control" placeholder="Grand Total"  required />

Down Payment

<input type="text" name="DownPayment" id="downpayment" class=" form-control" placeholder="Down Payment" required />

Status Box

 <input type="text" name="Status" id="status" class="form-control" placeholder="Status">

So the Grand Total input is automatically filled using javascript, example GrandTotal is 2500, then i had to fill the downpayment box, when i input downpayment like 3000, the status must say PAID OFF. but when we fill the downpayment like 2000 status must say MINUS 500

but the reality is when i write the downpayment just number 5 it say PAID OFF and didnt change even i put more than the grandtotal's value. but when i delete the value it say undefined

here's my script

$('#downpayment').on('keyup keydown', function (
       var $this = $(this),
            GrandTotal = $("#GrandTotal").val(),
            downpayment = $("#downpayment").val();
          var  value = GrandTotal - downpayment;

            if (GrandTotal < downpaymentval) {
              var status = "PAID OFF";
            $('#status').val(status);
            } else {
              var status = "MINUS".value;
            $('#status').val(status);
            }
            console.log(status);

    });

Thanks, now it solved, thankyou for answering

In addition to Kaddath, see this to understand https://stackoverflow.com/questions/10863092/why-is-string-11-less-than-string-3 — Ammar Hasan, Dec 27 '17 at 08:51

Sniper Wolf · Accepted Answer · 2017-12-27T09:43:49.123

You have some typo in your code. I added some parseFloat when you get the numbers and emptied the status field.

$("#downpayment").on("keyup keydown", function () {
    var $this       = $(this),
        GrandTotal  = parseFloat($("#GrandTotal").val()),
        downpayment = parseFloat($("#downpayment").val());

    // Empty status field
    $("#status").val("");

    // Returns if undefined
    if (!downpayment || !GrandTotal) {
        return;
    }

    // Your code
    var value = GrandTotal - downpayment;

    if (GrandTotal < downpayment) {
        var status = "PAID OFF";
        $("#status").val(status);
    } else {
        var status = "MINUS " + value;
        $("#status").val(status);
    }

    console.log(status);
});

<input type="text" name="GrandTotal" id="GrandTotal" class=" form-control" placeholder="Grand Total" required />
<input type="text" name="DownPayment" id="downpayment" class=" form-control" placeholder="Down Payment" required />
<input type="text" name="Status" id="status" class="form-control" placeholder="Status">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

score 0 · Answer 2 · answered Dec 27 '17 at 08:51

0

You need to convert string to float before you can compare them. This can be done using parseFloat

GrandTotal = parseFloat($("#GrandTotal").val());
downpayment = parseFloat($("#downpayment").val());

Refer jsFiddle here

answered Dec 27 '17 at 08:51

Taleeb

1,888
18
25

score 0 · Answer 3 · answered Dec 27 '17 at 08:52

I have created the solution for the problem,

<input type="text" name="GrandTotal" id="GrandTotal" class=" form-control" placeholder="Grand Total"  required />
    <input type="text" name="DownPayment" id="downpayment" class=" form-control" placeholder="Down Payment" required />
    <input type="text" name="Status" id="status" class="form-control" placeholder="Status">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script type="text/javascript">
        $('#downpayment').on('keyup keydown', function () {
            var $this = $(this);
            var GrandTotal = parseInt($("#GrandTotal").val());
            var downpayment = parseInt($("#downpayment").val());
            var value = GrandTotal - downpayment;
            if (GrandTotal <= downpayment) {
                var status = "PAID OFF";
                $('#status').val(status);
            } else {
                var status = "MINUS" + value;
                $('#status').val(status);
            }
            console.log(status);
        });
    </script>

Thanks

score 0 · Answer 4 · answered Dec 27 '17 at 08:53

You are checking for downpaymentval but that variable isn't in the code you've shown. Should it be value instead?

You have also used a dot to concatenate a string instead of an addition sign.

Try the following:

$('#downpayment').on('keyup keydown', function (
   var $this = $(this), status,
        GrandTotal = $("#GrandTotal").val(),
        downpayment = $("#downpayment").val(),
        value = GrandTotal - downpayment;

        if (GrandTotal < value) {
          status = "PAID OFF";
        $('#status').val(status);
        } else {
          status = "MINUS" + value;
        $('#status').val(status);
        }
        console.log(status);

});

You will also notice that I've moved the declaration of the status variable to the top. JavaScript doesn't change scope inside if/else statements, so you shouldn't be declaring it twice.

score 0 · Answer 5 · answered Dec 27 '17 at 08:53

try parsing the numeric values as .val() gives a string object.

$('#downpayment').on('keyup keydown', function (
       var $this = $(this),
            GrandTotal = $("#GrandTotal").val(),
            downpayment = $("#downpayment").val();
          var  value = GrandTotal - downpayment;

            if (parseInt(GrandTotal) < parseInt(downpaymentval)) {
              var status = "PAID OFF";
            $('#status').val(status);
            } else {
              var status = "MINUS".value;
            $('#status').val(status);
            }
            console.log(status);

    });

score 0 · Answer 6 · answered Dec 27 '17 at 08:55

There are a lot of errors on your code. See the updated code below.

<input type="number" name="GrandTotal" id="GrandTotal" class=" form-control" placeholder="Grand Total"  required />
  <input type="number" name="DownPayment" id="downpayment" class=" form-control" placeholder="Down Payment" required />
  <input type="text" name="Status" id="status" class="form-control" placeholder="Status">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script>
   $('#downpayment').on('keyup keydown', function (){
   
         var $this = $(this),
              GrandTotal = $("#GrandTotal").val(),
              downpayment = $("#downpayment").val();
            var  value = GrandTotal - downpayment;
            var status = '';
              if (GrandTotal < downpayment) {
                status = "PAID OFF";            
              } else {
                status = "MINUS" + value;           
              }
              $('#status').val(status);
              console.log(status);

      });
  </script>

Bhuwan · Answer 7 · 2018-01-10T09:08:01.503

There are some errors in your code. Change

1. var status = "MINUS".value; to var status = "MINUS" + value;.

2. $('#downpayment').on('keyup keydown', function ( to $('#downpayment').on('keyup keydown', function () {

Updated code

$('#downpayment').on('change', function() {
  var GrandTotal = $("#GrandTotal").val(),
    downpayment = $("#downpayment").val();
  var value = GrandTotal - downpayment;

  if (GrandTotal <= downpayment) {
    var status = "PAID OFF";
    $('#status').val(status);
  } else {
    var status = "MINUS " + value;
    $('#status').val(status);
  }
  console.log(GrandTotal,downpayment,status);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="GrandTotal" id="GrandTotal" class=" form-control" placeholder="Grand Total" required />
<input type="text" name="DownPayment" id="downpayment" class=" form-control" placeholder="Down Payment" required />
<input type="text" name="Status" id="status" class="form-control" placeholder="Status">

score 0 · Answer 8 · answered Dec 27 '17 at 08:58

Try following code:

$('#downpayment').on('keyup keydown', function (){
var $this = $(this),
GrandTotal = parseFloat($("#GrandTotal").val()),
downpayment = parseFloat($("#downpayment").val());
var value = GrandTotal - downpayment;
var status = '';

if (GrandTotal < downpayment) {
  status = "PAID OFF";
} else {
  status = "MINUS " + value;
}

$('#status').val(status);

});

score 0 · Answer 9 · answered Dec 27 '17 at 09:02

$('#downpayment').on('keyup', function (){
        var grandTotal = $("#GrandTotal").val();
        var downpayment = $("#downpayment").val();
        grandTotal = grandTotal == undefined || grandTotal.length == 0?0:parseFloat(grandTotal);
        downpayment = downpayment == undefined || downpayment.length == 0?0:parseFloat(downpayment);
        var  value = grandTotal - downpayment;
        var status = value<0?"PAID OFF":"MINUS " + value;
        $('#status').val(status);
});

score 0 · Answer 10 · answered Dec 27 '17 at 09:03

You have a lot many errors in your code. Undefined variable, You haven't converted the value to an integer. Here I have solved.

https://codepen.io/anon/pen/JMEazW

$(document).ready(function() {
    $('#downpayment').on('keydown', function () {
        GrandTotal = $("#GrandTotal").val();
        downpayment = $("#downpayment").val();
        GrandTotal = parseInt(GrandTotal);
        downpayment = parseInt(downpayment);
        var  value = parseInt(GrandTotal) - parseInt(downpayment);      
        var status = '';
        if (GrandTotal < downpayment) {
            status = "PAID OFF";
            $('#status').val(status);              
        } else {
            status = "MINUS " + value;            
            $('#status').val(status);
        }
    console.log(status);
});

});

javascript onchange get return

10 Answers10