Solved

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

Posted on 2014-10-21
32
109 Views
Last Modified: 2014-10-22
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
Comment
Question by:amucinobluedot
  • 14
  • 10
  • 8
32 Comments
 
LVL 58

Assisted Solution

by:Gary
Gary earned 308 total points
ID: 40395568
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
 

Author Comment

by:amucinobluedot
ID: 40395583
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 308 total points
ID: 40395585
It will only fire when you submit the form
0
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 192 total points
ID: 40395586
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
 

Author Comment

by:amucinobluedot
ID: 40395587
I did, nothing happened. Remember this is inside a repeat region :$
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 308 total points
ID: 40395598
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
 

Author Comment

by:amucinobluedot
ID: 40395616
Same behavior with the last post of Gary ... no luck, the form still posts
0
 
LVL 58

Expert Comment

by:Gary
ID: 40395617
Post your rendered HTML
0
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 192 total points
ID: 40395933
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 308 total points
ID: 40395940
The DOCTYPE makes no difference - this is a browser implementation (even though its an HTML5 feature it just needs an HTML5 capable browser)
0
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 192 total points
ID: 40396998
hmmm, you're right. W3Schools listed it as a html5 feature, so my mistake
0
 

Author Comment

by:amucinobluedot
ID: 40397442
Well .. browser is not cutting it. Can we try javascript to accomplish this ?
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40397452
see my first post in this thread, it's a JS based solution
0
 

Author Comment

by:amucinobluedot
ID: 40397467
Ok. Ill try that and let you know how it works
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40397469
sounds good. I'm stepping out for a bit for lunch and will check in when I get back
0
 

Author Comment

by:amucinobluedot
ID: 40397485
Sure
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 58

Assisted Solution

by:Gary
Gary earned 308 total points
ID: 40397516
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
 

Author Comment

by:amucinobluedot
ID: 40397549
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
 
LVL 58

Assisted Solution

by:Gary
Gary earned 308 total points
ID: 40397558
<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
 

Author Comment

by:amucinobluedot
ID: 40397572
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
 

Author Comment

by:amucinobluedot
ID: 40397578
In fact also the first one shows the alert but submits the form anyways.
0
 
LVL 32

Expert Comment

by:Big Monty
ID: 40397586
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
 

Author Comment

by:amucinobluedot
ID: 40397599
Actually the first entry worked without the zero validation, sorry about that one
0
 

Author Comment

by:amucinobluedot
ID: 40397606
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
 

Author Comment

by:amucinobluedot
ID: 40397607
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
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 192 total points
ID: 40397620
Are you using jquery on the page or so you need a pure Javascript solution
0
 
LVL 58

Assisted Solution

by:Gary
Gary earned 308 total points
ID: 40397643
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
 
LVL 32

Assisted Solution

by:Big Monty
Big Monty earned 192 total points
ID: 40397789
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
 

Author Comment

by:amucinobluedot
ID: 40398335
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
 
LVL 58

Accepted Solution

by:
Gary earned 308 total points
ID: 40398348
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
 

Author Closing Comment

by:amucinobluedot
ID: 40398387
Thanks to both
0
 
LVL 58

Expert Comment

by:Gary
ID: 40398390
Not sure why you are accepting comments that are wrong.
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now