Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 120
  • Last Modified:

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
0
Aleks
Asked:
Aleks
  • 14
  • 10
  • 8
13 Solutions
 
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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
 
AleksAuthor Commented:
Thanks to both
0
 
GaryCommented:
Not sure why you are accepting comments that are wrong.
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

  • 14
  • 10
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now