javascript - Input field value should not be greater than other field value - Stack Overflow

admin管理员组

文章数量:1356335

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

Share Improve this question Follow edited Jun 2, 2018 at 11:50 Mooni asked Jun 1, 2018 at 15:21 MooniMooni 14311 silver badge1313 bronze badges 3

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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

本文标签：