How do I get a value from the page so that jQuery can process it?

Question

On our utility billing, a person can only play what they owe (or less) to a maximum of a certain amount. I have created a method to check this, however, I need to be able to pass in the total that they owe to finish the comparison. How would I output the total amount due so that jQuery can collect that amount?

Here is my method:

$.validator.addMethod('MaxDue', function(value, element, params) {
    var maxPay = parseFloat($(params.totalDue).val());
    var maxTotal = 750.00;
    var payAmount = parseFloat($(params.payment).val());
    return (payAmount <= maxPay || (maxPay > maxTotal && payAmount <= maxTotal));
}, 'Amount greater than dollar amount allowed.');

Here is the section of the validate rules that are relevant:

        "Payment.PayAmount": {
            required: true,
            min: 0.01,
            MaxDue: {
                totalDue: 88.84,
                payment: "#Payment_PayAmount"
            }
        }

Here is the area of affected output from my code:

<fieldset>

    <legend>Account Information</legend>
    <p>Current Balance: 88.84</p>
    <p>Amount to Pay: <input id="Payment_PayAmount" name="Payment.PayAmount" type="text" value="88.84" /></p>
</fieldset>

Answer 1

Got it.

// Validate the expiration date
$.validator.addMethod('MaxDue', function(value, element, params) {
    var maxPay = parseFloat(params.totalDue);
    var maxTotal = 750.00;
    var payAmount = parseFloat($(params.payment).val());
    return (payAmount <= maxPay || (maxPay > maxTotal && payAmount <= maxTotal));
}, 'Amount greater than dollar amount allowed.');

jQuery.Validate

        "Payment.PayAmount": {
            required: true,
            min: 0.01,
            MaxDue: {
                totalDue: $("#payment").text(),
                payment: "#Payment_PayAmount"
            }
        }

And value gets wrapped in a <span> tag.

    <p>Current Balance: <span id="payment">88.84</span></p>