Checkbox Validation Problem

**Lee** · Jul 23 '05, 03:16 PM

Re: Checkbox Validation Problem

David Jubinville said:[color=blue]
>
>Hi All,
>
>I recently came across an annoying problem and would greatly
>appreciate any help someone/anyone could offer. Here we go:
>
>1. We have a 'Checklist' consisting of checkboxes and relating text.
>(This is important and also the root of the problem).
>
>2. The user must read and checkoff each point to procede through the
>courseware - the next link/nav should be hidden until such a point
>that all chkbox are validated True.
>
>3.If conditions == True; unlock/show the forward link layer.
>
>4. If conditionts == False; return nothing.
>
>I've tried a plethora of methods to get this script done, and I know
>of many ways to do it using DHTML and leyers etc. However, this is
>woefully inefficient.
>
>I'm not asking for whole code, just an idea of what the structure
>should look like. It should also be noted that this list whill often
>be of differing lengths and therefore should contain some degree of
>dynmaics so it can be linked as opposed to imbedded. Perhaps the most
>contentious point of the whole deal.[/color]

<html>
<head>
<title>demo</title>
<script type="text/javascript">
function checkDone(box) {
var isDone=true;
for (var i=0;i<box.form. elements['required'].length;i++) {
isDone &= box.form.elemen ts[i].checked;
}
if (isDone) {
document.getEle mentById("nextB utton").innerHT ML=
"<button onclick='locati on.href=\"http: www.google.com\ "'>"
+"Next Page</button>";
} else {
document.getEle mentById("nextB utton").innerHT ML=" ";
}
}
</script>
</head>
<body>
<form name="checkrequ ired">
<p>
Any sort of text, images, etc, with checkboxes scattered about
in the form:
<input type="checkbox" name="required" onclick="checkD one(this)">.
</p>
<p>
You can have as many as you like, all identical:
<input type="checkbox" name="required" onclick="checkD one(this)">.
</p>
<p>
The NEXT button won't appear until they are all checked.
Note that this may cause some confusion among users who have
overlooked a checkbox and can't figure out what they're
supposed to do next:
<input type="checkbox" name="required" onclick="checkD one(this)">.
</p>
</form>
<div id="nextButton" > </div>
</body>
</html>

**Fred Oz** · Jul 23 '05, 03:16 PM

Re: Checkbox Validation Problem

Lee wrote:
[...][color=blue]
> <script type="text/javascript">
> function checkDone(box) {
> var isDone=true;
> for (var i=0;i<box.form. elements['required'].length;i++) {
> isDone &= box.form.elemen ts[i].checked;
> }
> if (isDone) {
> document.getEle mentById("nextB utton").innerHT ML=
> "<button onclick='locati on.href=\"http: www.google.com\ "'>"
> +"Next Page</button>";
> } else {
> document.getEle mentById("nextB utton").innerHT ML=" ";
> }
> }
> </script>[/color]
[...]

Alternatively, your next button can be disabled until isDone is true,
so the user sees a greyed-out button - a familiar UI feature.

Another method is to put a condition on the next button that if isDone
is false, give a message to say please complete the page and don't
advance.

You need to ensure your page still works if JavaScript turned off, and
also validate input at the server otherwise your users can just view
the source, grab the URL for the next page and navigate there anyway.

Cheers, Fred.

**xxveganeaterxx** · Jul 23 '05, 03:17 PM

Re: Checkbox Validation Problem

"Lee" <REM0VElbspamtr ap@cox.net> wrote in message
news:cn06h602d8 e@drn.newsguy.c om...[color=blue]
> David Jubinville said:[color=green]
> >
> >Hi All,
> >
> >I recently came across an annoying problem and would greatly
> >appreciate any help someone/anyone could offer. Here we go:
> >
> >1. We have a 'Checklist' consisting of checkboxes and relating text.
> >(This is important and also the root of the problem).
> >
> >2. The user must read and checkoff each point to procede through the
> >courseware - the next link/nav should be hidden until such a point
> >that all chkbox are validated True.
> >
> >3.If conditions == True; unlock/show the forward link layer.
> >
> >4. If conditionts == False; return nothing.
> >
> >I've tried a plethora of methods to get this script done, and I know
> >of many ways to do it using DHTML and leyers etc. However, this is
> >woefully inefficient.
> >
> >I'm not asking for whole code, just an idea of what the structure
> >should look like. It should also be noted that this list whill often
> >be of differing lengths and therefore should contain some degree of
> >dynmaics so it can be linked as opposed to imbedded. Perhaps the most
> >contentious point of the whole deal.[/color]
>
>
> <html>
> <head>
> <title>demo</title>
> <script type="text/javascript">
> function checkDone(box) {
> var isDone=true;
> for (var i=0;i<box.form. elements['required'].length;i++) {
> isDone &= box.form.elemen ts[i].checked;
> }
> if (isDone) {
> document.getEle mentById("nextB utton").innerHT ML=
> "<button onclick='locati on.href=\"http: www.google.com\ "'>"
> +"Next Page</button>";
> } else {
> document.getEle mentById("nextB utton").innerHT ML=" ";
> }
> }
> </script>
> </head>
> <body>
> <form name="checkrequ ired">
> <p>
> Any sort of text, images, etc, with checkboxes scattered about
> in the form:
> <input type="checkbox" name="required" onclick="checkD one(this)">.
> </p>
> <p>
> You can have as many as you like, all identical:
> <input type="checkbox" name="required" onclick="checkD one(this)">.
> </p>
> <p>
> The NEXT button won't appear until they are all checked.
> Note that this may cause some confusion among users who have
> overlooked a checkbox and can't figure out what they're
> supposed to do next:
> <input type="checkbox" name="required" onclick="checkD one(this)">.
> </p>
> </form>
> <div id="nextButton" > </div>
> </body>
> </html>
>[/color]

Wow, I never expected full code, you my man, are a genius!

Thanks a ton for your help. It's especially nice that you've out it into a
working commented format.

Regards,
David

**xxveganeaterxx** · Jul 23 '05, 03:17 PM

Re: Checkbox Validation Problem

"Fred Oz" <ozfred@iinet.n et.auau> wrote in message
news:4193c70f$0 $6545$5a62ac22@ per-qv1-newsreader-01.iinet.net.au ...[color=blue]
> Lee wrote:
> [...][color=green]
> > <script type="text/javascript">
> > function checkDone(box) {
> > var isDone=true;
> > for (var i=0;i<box.form. elements['required'].length;i++) {
> > isDone &= box.form.elemen ts[i].checked;
> > }
> > if (isDone) {
> > document.getEle mentById("nextB utton").innerHT ML=
> > "<button onclick='locati on.href=\"http: www.google.com\ "'>"
> > +"Next Page</button>";
> > } else {
> > document.getEle mentById("nextB utton").innerHT ML=" ";
> > }
> > }
> > </script>[/color]
> [...]
>
> Alternatively, your next button can be disabled until isDone is true,
> so the user sees a greyed-out button - a familiar UI feature.
>
> Another method is to put a condition on the next button that if isDone
> is false, give a message to say please complete the page and don't
> advance.
>
> You need to ensure your page still works if JavaScript turned off, and
> also validate input at the server otherwise your users can just view
> the source, grab the URL for the next page and navigate there anyway.
>
> Cheers, Fred.[/color]

The courseware has existed with this 'hidden link' in the past. However, the
person who was taking care of this courseware before had used DHTML layers
to 'hide' the forward button. The problem with the way they constructed the
page are too many and too complex to explain. Let's just say they were going
to the moon just to check the weather on earth.

The client is solid in wanting the link 'hidden' and not disabled. However,
I will certainly keep your comments in mind for the future, thanks!

Regards,
David

Checkbox Validation Problem

Checkbox Validation Problem

Comment

Comment

Comment

Comment