Make sure TD input value doesn't exceed previous TD value

Question

I'm learning JQuery for a school project and need help trying to traverse through elements.

I have a table that shows balances due and input boxes for a user to put in their own amount to pay the balance. When the user is inputting an amount, I don't want the amount to be more than what is due. Here is what I have so far:

HTML:

<table>
    <tr class="arow">
        <td class="balance">
            20.00
        </td>
        <td class="otheramount">
            Other Amount: <input class="forminput" type="number">
        </td>
    </tr>
    <tr class="arow">
        <td class="balance">
            30.00
        </td>
        <td class="otheramount">
            Other Amount: <input class="forminput" type="number">
        </td>
    </tr>
    <tr class="arow">
        <td class="t-currentbalance">
            40.00
        </td>
        <td class="otheramount">
            Other Amount: <input class="forminput" type="number">
        </td>
    </tr>
</table>

JQuery:

$(".forminput").each(function() {
  $(this).on("click change paste", function() {
    var otherAmount = $(this).val();
    var currentBalance = $(this).parent('td').prev('td.balance').html();
    if (otherAmount > currentBalance) {
      alert('You are over the balance amount!');
    }
  });
});

When I go over the amount, I keep getting undefined. I changed it to parents and I get a bunch of random data. Any help will be appreciated, thank you so much!~

Answer 1

1st : no need for .each()

2nd : you need to use parseInt()

3rd : you need to add input keyup events as well

See the demo

 $('.forminput').on("paste input keyup", function() { var otherAmount = parseInt($(this).val()); var currentBalance = parseInt($(this).parent('td').prev('td.balance').text()); if (otherAmount > currentBalance) { alert('You are over the balance amount!'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr class="arow"> <td class="balance"> 20.00 </td> <td class="otheramount"> Other Amount: <input class="forminput" type="number"> </td> </tr> <tr class="arow"> <td class="balance"> 30.00 </td> <td class="otheramount"> Other Amount: <input class="forminput" type="number"> </td> </tr> <tr class="arow"> <td class="t-currentbalance"> 40.00 </td> <td class="otheramount"> Other Amount: <input class="forminput" type="number"> </td> </tr> </table> 

Answer 2

The fact that this is a <td> is really irrelevant to the question or the answer.
You have a .arow which contains a .balance and a .otheramount
When the .otheramount changes, you want to get the .balance that is within the same .arow
Find the closest .arow from the current otheramount: $(this).closest('.arow')
From that you can find the .balance within it: $(this).closest('.arow').find('.balance')
It is the text within this that has the current balance:
var currentBalance = $(this).closest('.arow').find('.balance').text();

One issue is you want to treat this as a value, so you can parseFloat(currentBalance)

You may also want to check the value as it is being typed, not just when the change event occurs, so add the keyup event to the listener, but then you should remove change .

Be careful with parseFloat , you may want to get the .text() value first and pattern-match it to make sure parseFloat doesn't give you NaN .

 // Note this does not check for non-numeric input, so parseFloat could botch things. $(".forminput").on("click paste keyup", function() { var otherAmount = parseFloat($(this).val()); var currentBalance = parseFloat($(this).closest('.arow').find('.balance').text()); if (otherAmount > currentBalance) { alert('You are over the balance amount!'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <table> <tr class="arow"> <td class="balance"> 20.00 </td> <td class="otheramount"> Other Amount: <input class="forminput" type="number"> </td> </tr> <tr class="arow"> <td class="balance"> 30.00 </td> <td class="otheramount"> Other Amount: <input class="forminput" type="number"> </td> </tr> <tr class="arow"> <td class="balance"> 40.00 </td> <td class="otheramount"> Other Amount: <input class="forminput" type="number"> </td> </tr> </table> 

Here we see that the same thing works even if it's not in a table ... this uses divs and spans. I mention this because using tables to lay out your content is considered bad form.
You see here that exactly the same code, no changes , also works with this markup. It depends only on the classes, not on which HTML tags are being used.

 // Note this does not check for non-numeric input, so parseFloat could botch things. $(".forminput").on("click paste keyup", function() { var otherAmount = parseFloat($(this).val()); var currentBalance = parseFloat($(this).closest('.arow').find('.balance').text()); if (otherAmount > currentBalance) { alert('You are over the balance amount!'); } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div> <div class="arow"> <span class="balance"> 20.00 </span> <span class="otheramount"> Other Amount: <input class="forminput" type="number"> </span> </div> <div class="arow"> <span class="balance"> 30.00 </span> <span class="otheramount"> Other Amount: <input class="forminput" type="number"> </span> </div> <div class="arow"> <span class="balance"> 40.00 </span> <span class="otheramount"> Other Amount: <input class="forminput" type="number"> </span> </div> </div>