CODEWITHSUNDEEP
javascriptjquery
Mooni
Mooni

Reputation: 143

One input field value should not be greater than other field value of table

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>

Upvotes: 3

Views: 1716

Answers (2)

NoobishPro
NoobishPro

Reputation: 2549

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

Upvotes: 1

K K
K K

Reputation: 18099

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>

Upvotes: 3

Related Questions