Checkbox Validation Problem

David Jubinville

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.

I've seen remarks on doing this with a radio btn array, but the client
is percise that it /must/ be checkboxes.

Thanks for your interest, and in advance for your help.
David Jubinville

Jul 23 '05 #1

Subscribe Post Reply

3013

Lee

David Jubinville said:

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.

<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.elements[i].checked;
}
if (isDone) {
document.getElementById("nextButton").innerHTML=
"<button onclick='location.href=\"http:www.google.com\"'>"
+"Next Page</button>";
} else {
document.getElementById("nextButton").innerHTML="& nbsp;";
}
}
</script>
</head>
<body>
<form name="checkrequired">
<p>
Any sort of text, images, etc, with checkboxes scattered about
in the form:
<input type="checkbox" name="required" onclick="checkDone(this)">.
</p>
<p>
You can have as many as you like, all identical:
<input type="checkbox" name="required" onclick="checkDone(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="checkDone(this)">.
</p>
</form>
<div id="nextButton"> </div>
</body>
</html>

Jul 23 '05 #2

Fred Oz

Lee wrote:
[...]

<script type="text/javascript">
function checkDone(box) {
var isDone=true;
for (var i=0;i<box.form.elements['required'].length;i++) {
isDone &= box.form.elements[i].checked;
}
if (isDone) {
document.getElementById("nextButton").innerHTML=
"<button onclick='location.href=\"http:www.google.com\"'>"
+"Next Page</button>";
} else {
document.getElementById("nextButton").innerHTML="& nbsp;";
}
}
</script>

[...]

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.

Jul 23 '05 #3

xxveganeaterxx

"Lee" <RE**************@cox.net> wrote in message
news:cn*********@drn.newsguy.com...

David Jubinville said:

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.

<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.elements[i].checked;
}
if (isDone) {
document.getElementById("nextButton").innerHTML=
"<button onclick='location.href=\"http:www.google.com\"'>"
+"Next Page</button>";
} else {
document.getElementById("nextButton").innerHTML="& nbsp;";
}
}
</script>
</head>
<body>
<form name="checkrequired">
<p>
Any sort of text, images, etc, with checkboxes scattered about
in the form:
<input type="checkbox" name="required" onclick="checkDone(this)">.
</p>
<p>
You can have as many as you like, all identical:
<input type="checkbox" name="required" onclick="checkDone(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="checkDone(this)">.
</p>
</form>
<div id="nextButton"> </div>
</body>
</html>

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

Jul 23 '05 #4

xxveganeaterxx

"Fred Oz" <oz****@iinet.net.auau> wrote in message
news:41**********************@per-qv1-newsreader-01.iinet.net.au...

Lee wrote:
[...]
<script type="text/javascript">
function checkDone(box) {
var isDone=true;
for (var i=0;i<box.form.elements['required'].length;i++) {
isDone &= box.form.elements[i].checked;
}
if (isDone) {
document.getElementById("nextButton").innerHTML=
"<button onclick='location.href=\"http:www.google.com\"'>"
+"Next Page</button>";
} else {
document.getElementById("nextButton").innerHTML="& nbsp;";
}
}
</script>

[...]

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.

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

Jul 23 '05 #5

by: Earl Teigrob | last post by:

I wanted my "Terms and Conditions" Checkbox control to participate in my ASP.NET validation just like all the the other controls on the page. After some time of searching the web for an example of...

ASP.NET

required field validator not working for checkbox.

by: Asha | last post by:

greetings i want to use the required field validator control to validate a checkbox. here is the code implemented. <asp:RequiredFieldValidator ID="rfv" ControlToValidate="chkDistiAudit"...

ASP.NET

checkbox and javascript

by: DotNetJunkies User | last post by:

1. i want to populate checkboxlist using javascript only at client side ....how can i do this..by populate word i mean that checkboxes should be checked or unchecked on some condition basis.......

ASP.NET

Strange behavior when automatically setting the focus to a checkbox

by: SJ | last post by:

Hi all, I have come across a weird problem when attempting to automatically set the focus in a vb.net form to a checkbox control... In my form I have (on a tab page in a tab control) several...

Visual Basic .NET

Checkbox Validation on Dynamic ASP Checkboxes

by: clinttoris | last post by:

Hello Experts, I have been told to post this in the Javascript forum as I want to do this client side just before my form gets submitted. Once the user clicks the submit button a javascript...

Javascript

beginner: form validation checkbox problem

by: nescio | last post by:

hello, i am making a form using php/html/javascript a part of the form is (email address) comming from a database. the amount of addresses is always different. every address has a checkbox....

Javascript

Clientside CheckBox validation

by: oakura_ape | last post by:

I have inherited a site that I have ported to ASP.Net 2.0 within the site I have a checkbox in a datalist ItemTemplate as such: <TD width="4%"><INPUT class="rach" id="chk_vid" type="checkbox"...

ASP.NET

javascript validation checkbox error

by: karen987 | last post by:

The code below is for a checkbox, in a form on an asp page. I want to make it mandatory for the user to click it. The other validation statements work fine, this one causes a problem though. The...

Javascript

checkbox validation

by: Ned Balzer | last post by:

I posted this this morning but it never went through, so I am trying again -- apologies for the duplication if so. I need to validate several checkboxes on an asp.net 2.0 page. I don't need to...

ASP.NET

Checkbox validation problem...??

by: sureshl | last post by:

Error in client side validation object expected error in this line,--> OnClientClick="return validation1(<%=maxnumber %>); Syntax error : in this line :for(i=0;i<maxno;i++) i want to validate...

ASP.NET

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

Checkbox Validation Problem

Similar topics