如何使用 keyup 或 input 进行操作？ javascript (jQuery)

Question

I got a problem, I have two text fields, both have a value by default when open the page or reaload, values the I get from MySQL and PHP, like this:

<input type="text" id="field1" value="<?php echo $first_value; ?>" />
<input type="text" id="utility" value="<?php echo $second_value; ?>" />

And with javascript I would like to do that when I change the value of #field1 do a subtraction and show the result into #utility .

The problem is that the result of the operation isn't correct, for example:

if #field1 has 500 the first time and #utility 1041.00 and now if I change the value of #field1 with 1000 the new value for #utility is -69.06, I guess it is doing the operation everytime that I delete or add a new number but I have no idea how to fix this, this is my javascript (jquery) code:

 $('#field1').on('input', function() {

   var difference = parseFloat($(this).val());
   var utility   = $('#utility').val().replace(/,/g, '');


   var total = utility - difference;

   if (!total) { total = 0; }

   $('#utility').val(parseFloat(Math.round(total * 100) / 100).toFixed(2));
});

Answer 1

Your other option without adding extra fields would be to use .on('blur',function(){} ) or simply .blur(function(){})

This would cause the action to take place when input left the field forcing the refresh.

Answer 2

I solved my problem by creating a new input field type hidden with the same value of #utility and I named it as #new_utilty

 $('#field1').on('input', function() {

   var difference = parseFloat($(this).val());
   var utility   = $('#new_utility').val().replace(/,/g, '');


   var total = utility - difference;

   if (!total) { 

      total = 0; 
      $('#utility').val(parseFloat(Math.round(utility * 100) / 100).toFixed(2));

   } else {

       $('#utility').val(parseFloat(Math.round(total * 100) / 100).toFixed(2));
   }
});

And this was my solution without Ajax Call