HTML forms and checkboxes

Factual Questions
1

Short question:

Can a checkbox in an html form send one value to the server when checked, and a different value when not checked? So far, it looks like to me that when not checked, the only choice is to send nothing to the server when you post the form.

What I would like is the checkbox to post something like “yes” when checked, and “no” when not checked. Or any two values; True/False, on/off, etc.
Longer explanation:

I’m trying to make some changes to a website that someone else designed. And although I’m a programmer, I’m a novice web programmer at best.

The site is done in a combination of html and asp pages. They have a dozen or so forms that we need to save the contents of and allow certain users to display the form later, showing all the data as it was filled in.

The forms are currently posting to an asp script, which is using the request.form collection to save the data as a comma delimited set.

The code in the asp script looks something like this:


 	
InputFieldCount = Request.Form.Count
For i = 1 To (InputFieldCount)
        FormsText = FormsText & request.form(i) & strQuote
next

This collects all the data posted from the form in the “FormsText” variable, which winds up looking something like this:

“data from form field 1”,”data from form field 2”,……”data from last field”

This then gets saved in a varchar field in the database (MS SQL), pulled out later and displayed.

The problem is with checkboxes. If the checkbox is checked, whatever you specified as the value for the checkbox appears in the request.form collection just as it should. But if the checkbox is not checked, you don’t get a null in that position, that field is not included in the collection at all, and the Request.Form.Count is lower by 1. It is as if the checkbox doesn’t exist.

Needless to say this makes it difficult later to put the data back into a form by putting the first item in the comma delimited set into the first field on the form, the second item in the set into the second field and so on. The missing checkbox makes everything “slide up” one position, and the comma delimted set no longer lines up with the fields in the form.

So given all that, is there a way to make checkboxes post a value when not checked, as well as when checked?

2

You can use JavaScript to validate and then set values right before submission.

I don’t want to drive and code at the same time here (I’m in the middle of something) but you need to fire an event onSubmit (put the call in your form tag) that checks the value of CheckBoxName. If CheckBoxName.value = null or = ‘’ (eep, i forget!) then CheckBoxName.value = ‘no;’ then submit the form from the JS func.

Make sense? Sorry to explain so shoddily, perhaps will explain better later.

3

Man I’m sorry. I just double-checked myself here and remembered it’s not checkbox.value it’s checkbox.checked.

So…

if (MyForm.MyCheckBox.checked) {
MyForm.MyCheckBox.value = ‘yes’;
}else{
MyForm.MyCheckBox.value = ‘no’;
}
MyForm.submit();

4

** ZipperJJ** Thanks very much!

I’ll start playing with this immediately and see if I can make it work.

Thanks again.

5

A checkbox will only send it’s value if it is checked.

What you would need to do is use the code snippets that Zipper supplied, but additionally, once you’ve changed the value, change the checked status of the checkbox to true, so it will send through the new, negative (in your case) value.

For just about any other type of form input, you would not need to do that step of course. It’s probably the same with radio buttons.

6

I was just going to post my results so far, and I see that Khadro has already posted one of the things I found.

After using the code from ZipperJJ to set the value, I did have to set the checkbox to checked. Then the value was passed. This is now working on several of the forms.

I’m still having a problem on one of the forms where there was already an “onSubmit” calling a small function to do some minor validation (some fields can’t be blank, etc.). For some reason when I add my function to the mix it’s messing up both functions.

But I’m pretty sure I’ve just got a type somewhere, I’ll keep working on it.

Thanks again for the help!

7

What you really want here is a radio button, a pair of them in fact, that share the same name, but different values…

{input type=radio name=field value=true }
{input type=radio name=field value=false}

Whichever you want as the ‘defualt’ value you add the checked attribute to.

If you really want to use the checkbox instead (some folks prefer it)… use the javascript snippet above, but instead of setting the attribute to the checkbox to ‘checked’ and changing the value (which could cause some user confusion) use a hidden field {input type=hidden name=valueoffieldIwant value=""} and set its value… use the code on the server side to get the value of the hidden field and ignore the checkbox alltogether.

something like:
if (MyForm.MyCheckBox.checked) {
MyForm.hiddenfield.value = ‘yes’;
}else{
MyForm.hiddenfield.value = ‘no’;
}
MyForm.submit();

8

Yeah, I talked to them about changing to radio buttons, but they wanted the checkboxes.

The problem here is that I need to save the data from the form, and I’m using the request.form collection without using field names, only an array index that corresponds to the relative position of each field within the form.

In order to re-apply the data to the form later it has to line up, one saved field for each form field. Even if I use a hidden field to save the state of the checkbox, the checkboxes appear and disappear within the array of fields depending on whether they were checked or not.

So the only way I can find to always get the checkboxes to always exist in the request.form collection is to always set all the checkboxes on.

This actually works ok since the user just sees the form for a fraction of a second after they hit the submit button anyway, and then all they see is the confirmation page saying we accepted their form.

Then at a later time when the office wants to look at the submitted form, I can easily re-apply the data to a copy of the form that is displayed by an asp shell script. The asp script will creates the checkboxes as either checked or unchecked based on their state at the time the data was saved, then displays the form.

9

oh, well, then… nevermind.

10

But believe me I appreciate the suggestion anyway. Just because I couldn’t use it here doesn’t mean I didn’t learn something from it.

And I may use it later. As little as I know about this stuff, every tip is good to have.