Input field value should not be greater than other field value

Question

I have two input fields one for advance payment and other for full payment, which are fetched from the database in array.

If onchange or keyup the advance payment is greater than full payment, Then the advance payment should not be entered or should be equal to full payment.

I am trying with this code

<input type="text" value="<?php echo $full_payemnt; ?>" id="full_payment_<?php echo $i; ?>">
<input type="text" id="advance_payment_<?php echo $i; ?>" class="advance">

$('.advance').on('change keyup blur', function(e){ 
  var fullPay = $('#full_payment_'+id[1]).val();
  var advancePay = $('#advance_payment_'+id[1]).val();
  console.log( parseInt(advancePay) > parseInt(fullPay))
    if (parseInt(advancePay ) > parseInt(fullPay)) {
       e.preventDefault();     
       $('#advance_payment_'+id[1]).val(fullPay);
    }
});

Answer 1

Here is an example of how you can do it.

 var $full = $('[name=full]'); var $adv = $('[name=adv]'); $adv.on('keyup keydown', function(e) { var fullPay = parseInt($full.val(), 10); var advPay = parseInt($adv.val(), 10); //tell the parser it is base 10 if (advPay > fullPay && e.keyCode !== 46 // keycode for delete && e.keyCode !== 8 // keycode for backspace ) { e.preventDefault(); $adv.val(''); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" name="full" /> <input type="number" name="adv" /> 

Answer 2

Try this, I think you want this.

 $('.advance').on('change keyup blur', function(e){ id_arr = $(this).attr('id'); id = id_arr.split("_"); var fullPay = $('#fullPayment_'+id[1]).val(); var advancePay = $('#advancePayment_'+id[1]).val(); if ($(this).val() > parseInt(fullPay)) { e.preventDefault(); $(this).val(fullPay); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tr> <input type="text" value="12" id="fullPayment_1"> <input type="text" id="advancePayment_1" class="advance"> </tr> <br> <tr> <input type="text" value="19" id="fullPayment_2"> <input type="text" id="advancePayment_2" class="advance"> </tr> 

Answer 3

Made some changes to Sam Battat 's answer so that each time a wrong entry is being typed it erase the entered number instead of clearing the field.

 var $full = $('[name=full]'); var $adv = $('[name=adv]'); $adv.on('keyup keydown', function(e) { var fullPay = parseInt($full.val(), 10); var advPay = parseInt($adv.val(), 10); //tell the parser it is base 10 if (advPay > fullPay && e.keyCode !== 46 // keycode for delete && e.keyCode !== 8 // keycode for backspace ) { e.preventDefault(); $the_value = $adv.val(); $the_value = $the_value.substring(0, $the_value.length - 1); $adv.val($the_value); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" name="full" /> <input type="number" name="adv" />