javascript - Set max value of an input box based on another input box

Question

How can I set the max value of amount input box based on balance input box? For example, if the value of balance input box is 500 so the max value of amount input box is 500. So when the user enters a number in amount input box greater than the value of balance input box, it will show an error message. How can I do that? I'm using angularjs to validate but it seems it's not working on my code.

This what I did: https://jsfiddle.net/mbnxdvpw/

This is how I retrieve the balance data. When the user clicks the payment icon it will show a modal and when it is success the balance data from the database will be retrieved in balance input.

function view_payment(payment_sales_id) {
    var modal = $('#payment-sales-modal');
    $.ajax({
        type: 'POST', 
        url: url + 'GetPaymentDetailsById', 
        data: { payment_sales_id : payment_sales_id }, 
        dataType: 'json',
        success: function (data) {
            modal.modal({ backdrop: 'static', keyboard: false});
            modal.find($('#payment_sales_id')).val(payment_sales_id);
            modal.find($('#payment_net_amount')).val(data.sales_net_amount);
            modal.find($('#payment_balance')).val(data.sales_balance);
        }
    });
}

HTML

<div class="form-group">
    <label for="">Balance <small>*</small></label>
    <input type="text" id="payment_balance" name="payment_balance" placeholder="Balance" class="form-control" ng-model="payment_balance" readonly>
</div>

<div class="form-group">
    <label for="">Amount <small>*</small></label>
    <input type="text" id="payment_amount" name="payment_amount" placeholder="Amount" class="form-control" ng-model="payment_amount" ng-pattern="/^[0-9]+.?[0-9]*$/" max="payment_balance.value">
    <span ng-messages="formPayment.payment_amount.$error" ng-if="formPayment.payment_amount.$dirty">
        <strong ng-message="pattern" class="text-danger">Please type numbers only.</strong>
        <strong ng-message="max" class="text-danger">Please enter a value less than or equal according to balance.</strong>
    </span>
</div>

Answer 1

First of all, you are injecting the value directly on the input payment_balance, that's not the most cleanest angular way to do it. You should use $scope (check my js example below) so you could change it on the fly without need to find the input over and over again (probably not a problem on this particullary code, but one thing to have in mind).

Second, you should use a <form> to check for properties like $error or $dirty. That being said, I did an small example (not focusing the retrieved data).

Happy coding =}