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);
    }
});

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);
    }
});

• javascript
• jquery

• 3 How is this related to regex? Is that tag correct? – J. Pichardo Commented Jun 1, 2018 at 15:23
• 1 Where id[1] is ing from ? – Junior Joanis Commented Jun 1, 2018 at 15:29
• 1 @JuniorJoanis - these input fields are in multiple rows thats why i assigned id [1]. – Mooni Commented Jun 1, 2018 at 15:34

3 Answers 3

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name="full" />
<input type="number" name="adv" />

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./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>

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" name="full" />
<input type="number" name="adv" />