一个输入字段值不应大于表的其他字段值

Question

I am asking this question again because i have a new issue in it. 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 have got the following answer previously which worked for me, But now i have a new issue in it. it works with existing data which are fetched from the database in array form. But when i increase a new row with JavaScript it is not working in it.

I am trying with this code

 $('.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); } }); var i = $('table tr').length; $("#newRow").on('click', function() { html = '<tr>'; html += '<td><input type="number" value="15" id="fullPayment_' + i + '"></td>'; html += '<td><input type="number" id="advancePayment_' + i + '" class="advance"></td>'; html += '</tr>'; $('table').append(html); i++; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td> <input type="number" value="12" id="fullPayment_1"> </td> <td> <input type="number" id="advancePayment_1" class="advance"> </td> </tr> <tr> <td> <input type="number" value="19" id="fullPayment_2"> </td> <td> <input type="number" id="advancePayment_2" class="advance"> </td> </tr> </table> <button type="button" id="newRow"> + Add </button> 

Answer 1

Try changing the event handler to this format:

$(document).on('change keyup blur','.advance', function(e){... });

More about event delegation here: https://learn.jquery.com/events/event-delegation/

Demo: http://jsfiddle.net/GCu2D/3643/

 $(document).on('change keyup blur', '.advance', 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); } }); var i = $('table tr').length; $("#newRow").on('click', function() { html = '<tr>'; html += '<td><input type="number" value="15" id="fullPayment_' + i + '"></td>'; html += '<td><input type="number" id="advancePayment_' + i + '" class="advance"></td>'; html += '</tr>'; $('table').append(html); i++; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td><input type="number" value="12" id="fullPayment_1"></td> <td><input type="number" id="advancePayment_1" class="advance"></td> </tr> <tr> <td><input type="number" value="19" id="fullPayment_2"></td> <td><input type="number" id="advancePayment_2" class="advance"></td> </tr> </table> <button type="button" id="newRow"> + Add </button> 

Answer 2

Your code could be a lot more dynamic and automated.

Perhaps something like this;

<table>
  <tr>
    <td><input type="number" value="12" id="fullPayment_1" class="fullPayment"></td>
    <td><input type="number" value="0" id="advancePayment_1" class="advance"></td>
  </tr>
  <tr>
    <td><input type="number" value="19" id="fullPayment_2" class="fullPayment"></td>
    <td><input type="number" value="0" id="advancePayment_2" class="advance"></td>
  </tr>
</table>


$(function() {

//Put it on the parent element so new inputs have the binding too
  $('table').on('keyup', '.advance', function() {
  //Get the together belonging advance and fullpayment rows
    var $advance = $(this);
    var $fullPayment = $(this).parents('tr').find('.fullPayment');
    //Pars the values to numerics for a good comparison
    var advanceValue = parseFloat($advance.val());
    var fullValue = parseFloat($fullPayment.val());
    console.log(advanceValue, fullValue)
    if (advanceValue > fullValue) {
      $advance.val(fullValue);
    }

  });

});

See this working JSFiddle