Script to allow entry in checbox equal or less than value in recordset

Within a repeat region user will enter the amount of money received, but it can only be as high as the 'balance' remaining.

If user enters a higher value it should not let him/her.

The value is:  PaymentLines.Fields.Item("Balance")

The text box where user enters the amount being received is:  

<input name="amount" type="text" class="bodytext" id="item<%=(PaymentLines.Fields.Item("Id").Value)%>" value="0" size="5" maxlength="10" disabled="true">

I have googled buts seems this is kind of a specific thing and could not find something this particular.

I am using classic ASP/VBscript on this page
LVL 1
AleksAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

GaryCommented:
If you can rely on your users using only HTML5 browsers (i.e. not IE9 or lower) then you can use the max attribute

<input name="amount" type="text" class="bodytext" id="item<%=(PaymentLines.Fields.Item("Id").Value)%>" value="0" size="5" maxlength="10" 
min="0" max="<%=PaymentLines.Fields.Item("Balance")%>"
disabled="true">

Open in new window


Otherwise you will need to use Javascript

And you will still need to double check this when the page is posted back to the server.
0
AleksAuthor Commented:
I tried the above and I am using IE 11 but it allowed me to enter 120 when the balance is 110 and submitted no problem
0
GaryCommented:
It will only fire when you submit the form
0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
I would store the balance somewhere on the page, such as a hidden variable:

<input type="hidden" name="balance" id="balance" value="<%=PaymentLines.Fields.Item("Balance")%>" />

then, add the ONKEYUP or ONCHANGE event to your textbox that calls a javascript function that'll validate the price for you:

<input name="amount" type="text" class="bodytext" id="item<%=(PaymentLines.Fields.Item("Id").Value)%>" value="0" size="5" maxlength="10" disabled="true" onchange="verifyAmount( this.value );">

finally, create your javascript function to verify the amount:

function verifyAmount( amt ) {
    var balance = document.getElementByID('balance').value;
    if( balance < amt )
          alert(The amount is too high, please enter in a lower amount.')

     return false;          //-- prevent scrolling
}
0
AleksAuthor Commented:
I did, nothing happened. Remember this is inside a repeat region :$
0
GaryCommented:
My mistake, needs to a number input type

<input name="amount" type="number" class="bodytext" id="item<%=(PaymentLines.Fields.Item("Id").Value)%>" value="0" size="5" maxlength="10" 
min="0" max="<%=PaymentLines.Fields.Item("Balance")%>"
disabled="true">

Open in new window

0
AleksAuthor Commented:
Same behavior with the last post of Gary ... no luck, the form still posts
0
GaryCommented:
Post your rendered HTML
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
in order to use Garys solution, you must specify your page to be rendered with HTML5 standards, which is done with the DocType:


<!doctype html>

if your page does not have that specified, or you need to support older HTML standards, then the javascript solution I posted is the way to go.
0
GaryCommented:
The DOCTYPE makes no difference - this is a browser implementation (even though its an HTML5 feature it just needs an HTML5 capable browser)
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
hmmm, you're right. W3Schools listed it as a html5 feature, so my mistake
0
AleksAuthor Commented:
Well .. browser is not cutting it. Can we try javascript to accomplish this ?
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
see my first post in this thread, it's a JS based solution
0
AleksAuthor Commented:
Ok. Ill try that and let you know how it works
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
sounds good. I'm stepping out for a bit for lunch and will check in when I get back
0
AleksAuthor Commented:
Sure
0
GaryCommented:
Monty's code won't work

Change your input to
<input name="amount" type="text" class="bodytext" id="item<%=(PaymentLines.Fields.Item("Id").Value)%>" value="0" size="5" data-max="<%=PaymentLines.Fields.Item("Balance")%>" maxlength="10" disabled="true" onblur="checkAmount(this)">

Open in new window


Use this javascript
<script>
function checkAmount(el) {
    if (el.value > el.getAttribute('data-max')) {
        el.value = 0;
        alert("Maximum value is " + el.getAttribute('data-max'))
    }
}
</script>

Open in new window

0
AleksAuthor Commented:
The code from Gary works great. Can we also modify the script so that it doesn't allow zero ?  (It may be a negative value because of a reimbursement).
The default is zero so I want to force them to enter a value.
0
GaryCommented:
<script>
function checkAmount(el) {
    if (el.value > el.getAttribute('data-max') || el.value==0) {
        el.value = 0;
        alert("Value cannot be zero or greater than " + el.getAttribute('data-max'))
    }
}
</script>

Open in new window

0
AleksAuthor Commented:
It didn't work.  It allowed me to enter zero without a warning.

Also I entered a number over the max and I got the alert but it still went ahead and submitted the form
0
AleksAuthor Commented:
In fact also the first one shows the alert but submits the form anyways.
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
my code pretty much did work, I just needed to force the values to a numeric type by changing the if statement to

if (parseFloat(balance) < parseFloat(amt))
0
AleksAuthor Commented:
Actually the first entry worked without the zero validation, sorry about that one
0
AleksAuthor Commented:
Ah .. I realized what happens. If I click on the button then it validates just fine (First option without the zero validation).
If I hit 'enter' then the alert comes up but the form is submitted.

???
0
AleksAuthor Commented:
Can we add the validation when the form is submitted instead of when the button is clicked to prevent this from happening ?

this is the form code:

<form action="SPSavePaymentLines.asp?caseid=<%=(Casesjoin.Fields.Item("Id").Value)%>" method="post" name="form1" id="form1"  >
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
Are you using jquery on the page or so you need a pure Javascript solution
0
GaryCommented:
Add to the form tag
onSubmit="return checkValues()"

Add this javascript
function checkValues() {
    error = 0
    a = document.getElementsByName('amount')
    n = a.length
    for (i = 0; i < n; i++) {
        if (a[i].value > a[i].getAttribute('data-max') || a[i].value == 0) {
            a[i].style.border = "1px solid red";
            error++
        } else {
            a[i].style.border = "1px solid gray"
        }

    }
    if (error > 0) {

        alert("Correct the highlighted inputs")
        return false;
    }
}

Open in new window

0
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
here's a working jQuery solution that you can just plug directly into your code. It has validation on both when the user exits the field as well as when they try to submit the form.

<!DOCTYPE HTML>
<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
            function verifyAmount( amt ) {
                var balance = document.getElementById('balance').value;
                var verified = parseFloat(balance) < parseFloat(amt);

                if (parseFloat(balance) < parseFloat(amt))
                    alert('The amount is too high, please enter in a lower amount.');

                 return verified;
            }

            function validate() {
                $('.bodytext').each(function () {
                    if (!verifyAmount($(this).val())) return false;
                });
            }
        </script>
    </head>
    <body>
        <form name="frm" id="frm" method="post" action="test.asp" onsubmit="return validate();">
            <input type="hidden" name="balance" id="balance" value="20" />

            <input name="amount1" type="text" class="bodytext" id="item1" onblur="verifyAmount(this.value)"><br />
            <input name="amount2" type="text" class="bodytext" id="item2" onblur="verifyAmount(this.value)"><br />
            <input name="amount3" type="text" class="bodytext" id="item3" onblur="verifyAmount(this.value)"><br />
            <input name="amount4" type="text" class="bodytext" id="item4" onblur="verifyAmount(this.value)"><br />

            <input type="submit">
        </form>
    </body>
</html>

Open in new window

0
AleksAuthor Commented:
There is just one issue with the javascript. Some of the fields are disabled and the default is '0' so it highlights them, it should only check on 'enabled' fields.

I tried leaving the field empty but validation will check and show red box.
It shouldn't validate if the field is disabled
0
GaryCommented:
function checkValues() {
    error = 0
    a = document.getElementsByName('amount')
    n = a.length
    for (i = 0; i < n; i++) {
	if(a[i].disabled==false){
	        if (a[i].value > a[i].getAttribute('data-max') || a[i].value == 0) {
	            a[i].style.border = "1px solid red";
	            error++
	        } else {
	            a[i].style.border = "1px solid gray"
	        }
	}
    }
    if (error > 0) {

        alert("Correct the highlighted inputs")
        return false;
    }
}

Open in new window


@BM
I already told you there are multiple inputs so even your jquery code would fail.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
AleksAuthor Commented:
Thanks to both
0
GaryCommented:
Not sure why you are accepting comments that are wrong.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP

From novice to tech pro — start learning today.