Improving The Checkbox Input On Forms

[Mario T. Lanza]

ASP Developer,

I have read many posts by developers frustrated by how the checkbox
input commonly used on forms works. When the checkbox is checked, all
is fine. The problem with the checkbox is when it is left unchecked
and the form is submitted. The checkbox item will NOT appear in the
Request.Form collection.

This presents several issues.

When looping through the Request.Form collection it is a pain to have
to get the NAME of the fields NOT appearing in the collection. (It
complicates the logic.) It is far easier to loop through the
collection and handle EACH AND EVERY form field item by item.

Another issue exists when the checkbox is used, as it commonly is, to
indicate true or false. This is the very nature of the checkbox!

<INPUT TYPE=CHECKBOX NAME=SUBSCRIBE_TO_NEWSLETTER VALUE='TRUE'>
Newsletter?

When submitting the form while the above item is checked (among other
fields) the Request.Form collection gives you...

SUBSCRIBE_TO_NEWSLETTER = TRUE

When submitting the form while the above is not checked you get
nothing with regard to this field when what you really want is to
get...

SUBSCRIBE_TO_NEWSLETTER = FALSE

Always returning a value for the SUBSCRIBE_TO_NEWSLETTER field would
be convenient for programming. Sure, a RADIO input could be used...

<INPUT TYPE=RADIO NAME=SUBSCRIBE_TO_NEWSLETTER VALUE=TRUE>
<INPUT TYPE=RADIO NAME=SUBSCRIBE_TO_NEWSLETTER VALUE=FALSE CHECKED>
Newsletter?

....but you don't really want to use a radio button sometimes. I know
I often don't. It takes more space that necessary. (And as writers
say, "Less is more.") I simply want a CHECKBOX that always returns a
value.

This issue is esp. troublesome when your form includes multiple rows
from a table. Each input is repeated as many times as their are rows.
When accepting the submitted form data, you use a FOR-NEXT to step
through the index row by row for the updates belonging to each row.

For example:

Dim n, x, pk, fld1, fld2, chk

If Request.Form.Count > 0 Then
n = document.all.item("PrimaryKeyID").Count
For x = 1 to n
pk = document.all.item("PrimaryKeyID")(x)
fld1 = document.all.item("Field1")(x)
fld2 = document.all.item("Field2")(x)
chk = document.all.item("CheckBox1")(x)
...
... build and execute update SQL here ...
...
Next
End If

The problem is that the FOR-NEXT loop "x" index as used by the
checkbox is thrown off the first time that a checkbox is left
unchecked and is thrown off further each time this occurs.

In case you're not following, imagine you're viewing a web page that
has a list of 10 users belonging to your web site (and an interface to
update their name, email, and subscription status -- the
SUBSCRIBE_TO_NEWSLETTER field mentioned earlier). If you checked
every other user as subscribed and then submitted the form, do you
know what would happen? The first 5 users, would be subscribed to
your newsletter, not every other user as you had intended. See how
the checkbox really is a pain?

I finally developed a solution that does EXACTLY what I want and
solves all the above issues. I don't use the CHECKBOX. (At least not
directly.) I use a HIDDEN input that the checkbox changes via the use
of DHTML.

(asterisks included for emphasis only)

<INPUT LANGUAGE=vbscript onClick='document.all.chkbox.value =
Me.checked' TYPE=checkbox *CHECKED*><INPUT ID=chkbox TYPE=hidden
name=SUBSCRIBE_TO_NEWSLETTER value=*'True'*>

I substitute the appropriate values where the *asterisks* appear in my
ASP code. The onClick event handles the rest. Using this little
workaround, you ALWAYS get a value from your CHECKBOX fields.

Mario T. Lanza
Clarity Information Architecture, Inc.

PS: This tip may be published elsewhere, but I never came across it.
I wrote this to help those who might still be wondering how to best
overcome the issues presented by the use of the CHECKBOX input.

[Roland Hall]

"Mario T. Lanza" wrote:
: I have read many posts by developers frustrated by how the checkbox
: input commonly used on forms works. When the checkbox is checked, all
: is fine. The problem with the checkbox is when it is left unchecked
: and the form is submitted. The checkbox item will NOT appear in the
: Request.Form collection.
:
: This presents several issues.
:
: When looping through the Request.Form collection it is a pain to have
: to get the NAME of the fields NOT appearing in the collection. (It
: complicates the logic.) It is far easier to loop through the
: collection and handle EACH AND EVERY form field item by item.
:
: Another issue exists when the checkbox is used, as it commonly is, to
: indicate true or false. This is the very nature of the checkbox!
:
: <INPUT TYPE=CHECKBOX NAME=SUBSCRIBE_TO_NEWSLETTER VALUE='TRUE'>
: Newsletter?
:
: When submitting the form while the above item is checked (among other
: fields) the Request.Form collection gives you...
:
: SUBSCRIBE_TO_NEWSLETTER = TRUE
:
: When submitting the form while the above is not checked you get
: nothing with regard to this field when what you really want is to
: get...
:
: SUBSCRIBE_TO_NEWSLETTER = FALSE
:
: Always returning a value for the SUBSCRIBE_TO_NEWSLETTER field would
: be convenient for programming. Sure, a RADIO input could be used...
:
: <INPUT TYPE=RADIO NAME=SUBSCRIBE_TO_NEWSLETTER VALUE=TRUE>
: <INPUT TYPE=RADIO NAME=SUBSCRIBE_TO_NEWSLETTER VALUE=FALSE CHECKED>
: Newsletter?
:
: ...but you don't really want to use a radio button sometimes. I know
: I often don't. It takes more space that necessary. (And as writers
: say, "Less is more.") I simply want a CHECKBOX that always returns a
: value.
:
: This issue is esp. troublesome when your form includes multiple rows
: from a table. Each input is repeated as many times as their are rows.
: When accepting the submitted form data, you use a FOR-NEXT to step
: through the index row by row for the updates belonging to each row.
:
: For example:
:
: Dim n, x, pk, fld1, fld2, chk
:
: If Request.Form.Count > 0 Then
: n = document.all.item("PrimaryKeyID").Count
: For x = 1 to n
: pk = document.all.item("PrimaryKeyID")(x)
: fld1 = document.all.item("Field1")(x)
: fld2 = document.all.item("Field2")(x)
: chk = document.all.item("CheckBox1")(x)
: ...
: ... build and execute update SQL here ...
: ...
: Next
: End If
:
: The problem is that the FOR-NEXT loop "x" index as used by the
: checkbox is thrown off the first time that a checkbox is left
: unchecked and is thrown off further each time this occurs.
:
: In case you're not following, imagine you're viewing a web page that
: has a list of 10 users belonging to your web site (and an interface to
: update their name, email, and subscription status -- the
: SUBSCRIBE_TO_NEWSLETTER field mentioned earlier). If you checked
: every other user as subscribed and then submitted the form, do you
: know what would happen? The first 5 users, would be subscribed to
: your newsletter, not every other user as you had intended. See how
: the checkbox really is a pain?
:
: I finally developed a solution that does EXACTLY what I want and
: solves all the above issues. I don't use the CHECKBOX. (At least not
: directly.) I use a HIDDEN input that the checkbox changes via the use
: of DHTML.
:
: (asterisks included for emphasis only)
:
: <INPUT LANGUAGE=vbscript onClick='document.all.chkbox.value =
: Me.checked' TYPE=checkbox *CHECKED*><INPUT ID=chkbox TYPE=hidden
: name=SUBSCRIBE_TO_NEWSLETTER value=*'True'*>
:
: I substitute the appropriate values where the *asterisks* appear in my
: ASP code. The onClick event handles the rest. Using this little
: workaround, you ALWAYS get a value from your CHECKBOX fields.

Thanks for the information Mario. Here is a thought to consider:

On the action page, why not just test to see if the checkbox is missing? If
it is, then obviously it is false and you eliminate the need for the hidden
element.

--
Roland Hall
/* This information is distributed in the hope that it will be useful, but
without any warranty; without even the implied warranty of merchantability
or fitness for a particular purpose. */
Technet Script Center - [url]http://www.microsoft.com/technet/scriptcenter/[/url]
WSH 5.6 Documentation - [url]http://msdn.microsoft.com/downloads/list/webdev.asp[/url]
MSDN Library - [url]http://msdn.microsoft.com/library/default.asp[/url]

[Me Padre]

What about when scripting is turned off at the user level?

In a controlled environment (ie. Intranet), you can assume
a safe level of settings within the browser, but for full
compatibility, I believe I read somewhere that 15 - 20% of
browsers have scripting disabled. Thats a big chunk of
potential users.

Either way, your solution is very good.

>-----Original Message-----
>ASP Developer,
>
>I have read many posts by developers frustrated by how

the checkbox

>input commonly used on forms works. When the checkbox is

checked, all

>is fine. The problem with the checkbox is when it is

left unchecked

>and the form is submitted. The checkbox item will NOT

appear in the

>Request.Form collection.
>
>This presents several issues.
>
>When looping through the Request.Form collection it is a

pain to have

>to get the NAME of the fields NOT appearing in the

collection. (It

>complicates the logic.) It is far easier to loop through

the

>collection and handle EACH AND EVERY form field item by

item.

>
>Another issue exists when the checkbox is used, as it

commonly is, to

>indicate true or false. This is the very nature of the

checkbox!

>
><INPUT TYPE=CHECKBOX NAME=SUBSCRIBE_TO_NEWSLETTER

VALUE='TRUE'>

>Newsletter?
>
>When submitting the form while the above item is checked

(among other

>fields) the Request.Form collection gives you...
>
> SUBSCRIBE_TO_NEWSLETTER = TRUE
>
>When submitting the form while the above is not checked

you get

>nothing with regard to this field when what you really

want is to

>get...
>
> SUBSCRIBE_TO_NEWSLETTER = FALSE
>
>Always returning a value for the SUBSCRIBE_TO_NEWSLETTER

field would

>be convenient for programming. Sure, a RADIO input

could be used...

>
><INPUT TYPE=RADIO NAME=SUBSCRIBE_TO_NEWSLETTER

VALUE=TRUE>

><INPUT TYPE=RADIO NAME=SUBSCRIBE_TO_NEWSLETTER

VALUE=FALSE CHECKED>

>Newsletter?
>
>....but you don't really want to use a radio button

sometimes. I know

>I often don't. It takes more space that necessary. (And

as writers

>say, "Less is more.") I simply want a CHECKBOX that

always returns a

>value.
>
>This issue is esp. troublesome when your form includes

multiple rows

>from a table. Each input is repeated as many times as

their are rows.

> When accepting the submitted form data, you use a FOR-

NEXT to step

>through the index row by row for the updates belonging to

each row.

>
>For example:
>
> Dim n, x, pk, fld1, fld2, chk
>
> If Request.Form.Count > 0 Then
> n = document.all.item("PrimaryKeyID").Count
> For x = 1 to n
> pk = document.all.item("PrimaryKeyID")(x)
> fld1 = document.all.item("Field1")(x)
> fld2 = document.all.item("Field2")(x)
> chk = document.all.item("CheckBox1")(x)
> ...
> ... build and execute update SQL here ...
> ...
> Next
> End If
>
>The problem is that the FOR-NEXT loop "x" index as used

by the

>checkbox is thrown off the first time that a checkbox is

left

>unchecked and is thrown off further each time this occurs.
>
>In case you're not following, imagine you're viewing a

web page that

>has a list of 10 users belonging to your web site (and an

interface to

>update their name, email, and subscription status -- the
>SUBSCRIBE_TO_NEWSLETTER field mentioned earlier). If you

checked

>every other user as subscribed and then submitted the

form, do you

>know what would happen? The first 5 users, would be

subscribed to

>your newsletter, not every other user as you had

intended. See how

>the checkbox really is a pain?
>
>I finally developed a solution that does EXACTLY what I

want and

>solves all the above issues. I don't use the CHECKBOX.

(At least not

>directly.) I use a HIDDEN input that the checkbox

changes via the use

>of DHTML.
>
>(asterisks included for emphasis only)
>
><INPUT LANGUAGE=vbscript

onClick='document.all.chkbox.value =

>Me.checked' TYPE=checkbox *CHECKED*><INPUT ID=chkbox

TYPE=hidden

>name=SUBSCRIBE_TO_NEWSLETTER value=*'True'*>
>
>I substitute the appropriate values where the *asterisks*

appear in my

>ASP code. The onClick event handles the rest. Using

this little

>workaround, you ALWAYS get a value from your CHECKBOX

fields.

>
>Mario T. Lanza
>Clarity Information Architecture, Inc.
>
>PS: This tip may be published elsewhere, but I never came

across it.

>I wrote this to help those who might still be wondering

how to best

>overcome the issues presented by the use of the CHECKBOX

input.

>.
>

[Mario T. Lanza]

> Thanks for the information Mario. Here is a thought to consider:

>
> On the action page, why not just test to see if the checkbox is missing? If
> it is, then obviously it is false and you eliminate the need for the hidden
> element.

Yes, I did mention that in my original analysis. The reason is that
it is less convenient and CAN contribute to errors on multi-row
updates.

Mario

[Mario T. Lanza]

> What about when scripting is turned off at the user level?

>
> In a controlled environment (ie. Intranet), you can assume
> a safe level of settings within the browser, but for full
> compatibility, I believe I read somewhere that 15 - 20% of
> browsers have scripting disabled. Thats a big chunk of
> potential users.
>
> Either way, your solution is very good.

You have a good point that I will definitely consider for the websites
that I develop for a worldwide audience. Most of the sites I develop
are for a single client (and his employees) and I have the ability to
dictate the browser and the browser settings without much fuss.

Mario

[Roland Hall]

"Mario T. Lanza" wrote:
: > Thanks for the information Mario. Here is a thought to consider:
: >
: > On the action page, why not just test to see if the checkbox is missing?
If
: > it is, then obviously it is false and you eliminate the need for the
hidden
: > element.
:
: Yes, I did mention that in my original analysis. The reason is that
: it is less convenient and CAN contribute to errors on multi-row
: updates.

This works but you have to expire the form page because all checkboxes get
turned on.

check1.asp source:

<%@ Language=VBScript %>
<%
Option Explicit
Response.Buffer = True
%>
<html>
<head>
<script type="text/javascript">
function validate() {
var formCol = document.forms["form0"];
var elCol = formCol.checks;
for(i=0; i<elCol.length; i++) {
if(elCol(i).checked) {
elCol(i).value="true";
} else {
elCol(i).value="false";
elCol(i).checked=true;
}
}
formCol.action="/lab/asp/check2.asp";
formCol.submit();
return true;
}
</script>
</head>
<body>

<form id=form0 name=form0 method=post onSubmit="return validate()">
<input id=check0 name=checks type=checkbox value="" /><br />
<input id=check1 name=checks type=checkbox value="" /><br />
<input id=check2 name=checks type=checkbox value="" /><br />
<input type=submit value="Submit" />
</form>
</body>
</html>

check2.asp source:

<%@ Language=VBScript %>
<%
Option Explicit
Response.Buffer = True

dim i, chk, x
i = 0

For Each x In Request.Form
Response.Write(x & " = " & Request.Form(x) & "<br />" & vbCrLf)
Next

chk = split(Request.Form("checks"),", ")
for i = 0 to ubound(chk)
Response.Write("check" & i & ": " & chk(i) & "<br />" & vbCrLf)
next
%>

Result if 2nd box only is selected:

checks = false, true, false
check0: false
check1: true
check2: false

Here is an alternative:
check1b.asp

<%@ Language=VBScript %>
<%
Option Explicit
Response.Buffer = True
%>
<html>
<head>
<script type="text/javascript">
function validate() {
var formCol = document.forms["form0"];
var elCol = formCol.checks;
for(i=0; i<elCol.length; i++) {
if(elCol(i).checked) {
elCol(i).value=elCol(i).id + ", true";
} else {
elCol(i).value=elCol(i).id + ", false";
elCol(i).checked=true;
}
}
formCol.action="/lab/asp/check2b.asp";
formCol.submit();
return true;
}
</script>
</head>
<body>

<form id=form0 name=form0 method=post onSubmit="return validate()">
<input id=check0 name=checks type=checkbox value="" /><br />
<input id=check1 name=checks type=checkbox value="" /><br />
<input id=check2 name=checks type=checkbox value="" /><br />
<input type=submit value="Submit" />
</form>
</body>
</html>

check2b.asp

<%@ Language=VBScript %>
<%
Option Explicit
Response.Buffer = True

dim i, chk, x
i = 0

For Each x In Request.Form
Response.Write(x & " = " & Request.Form(x) & "<br />" & vbCrLf)
Next

chk = split(Request.Form("checks"),", ")
for i = 0 to ubound(chk) step 2
Response.Write(chk(i) & ": " & chk(i+1) & "<br />" & vbCrLf)
next
%>

Now it could be read as a 2-dimensional array. With this method, you don't
need to know the variable. Just use the id passed in the form.

Result if 2nd box only is selected:

checks = check0, false, check1, true, check2, false
check0: false
check1: true
check2: false

[url]http://kiddanger.com/lab/asp/check1.asp[/url]
[url]http://kiddanger.com/lab/asp/check1b.asp[/url]

HTH..

--
Roland Hall
/* This information is distributed in the hope that it will be useful, but
without any warranty; without even the implied warranty of merchantability
or fitness for a particular purpose. */
Technet Script Center - [url]http://www.microsoft.com/technet/scriptcenter/[/url]
WSH 5.6 Documentation - [url]http://msdn.microsoft.com/downloads/list/webdev.asp[/url]
MSDN Library - [url]http://msdn.microsoft.com/library/default.asp[/url]