# HTML forms and checkboxes

**URL:** <https://boards.straightdope.com/t/html-forms-and-checkboxes/364227>\
**Category:** Factual Questions\
**Created:** [July 12, 2006, 7:54pm UTC](https://boards.straightdope.com/t/html-forms-and-checkboxes/364227 "2006-07-12T19:54:51Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![JimOfAllTrades](https://avatars.discourse-cdn.com/v4/letter/j/ba8739/32.png) [@JimOfAllTrades](https://boards.straightdope.com/u/JimOfAllTrades)\
**Post date:** [July 12, 2006, 7:54pm UTC](https://boards.straightdope.com/t/html-forms-and-checkboxes/364227/1 "2006-07-12T19:54:51Z")

</div>

**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:

```auto

 	
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?

---

<div class="post-metadata">

**Author:** ![ZipperJJ](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/zipperjj/32/211_2.png) [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)\
**Post date:** [July 12, 2006, 8:19pm UTC](https://boards.straightdope.com/t/html-forms-and-checkboxes/364227/2 "2006-07-12T20:19:50Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ZipperJJ](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/zipperjj/32/211_2.png) [@ZipperJJ](https://boards.straightdope.com/u/ZipperJJ)\
**Post date:** [July 12, 2006, 8:37pm UTC](https://boards.straightdope.com/t/html-forms-and-checkboxes/364227/3 "2006-07-12T20:37:33Z")

</div>

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();

---

<div class="post-metadata">

**Author:** ![JimOfAllTrades](https://avatars.discourse-cdn.com/v4/letter/j/ba8739/32.png) [@JimOfAllTrades](https://boards.straightdope.com/u/JimOfAllTrades)\
**Post date:** [July 12, 2006, 8:54pm UTC](https://boards.straightdope.com/t/html-forms-and-checkboxes/364227/4 "2006-07-12T20:54:12Z")

</div>

\*\* ZipperJJ\*\* Thanks very much!

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

Thanks again.

---

<div class="post-metadata">

**Author:** ![Khadro](https://avatars.discourse-cdn.com/v4/letter/k/f07891/32.png) [@Khadro](https://boards.straightdope.com/u/Khadro)\
**Post date:** [July 13, 2006, 12:04am UTC](https://boards.straightdope.com/t/html-forms-and-checkboxes/364227/5 "2006-07-13T00:04:31Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JimOfAllTrades](https://avatars.discourse-cdn.com/v4/letter/j/ba8739/32.png) [@JimOfAllTrades](https://boards.straightdope.com/u/JimOfAllTrades)\
**Post date:** [July 13, 2006, 12:50am UTC](https://boards.straightdope.com/t/html-forms-and-checkboxes/364227/6 "2006-07-13T00:50:21Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![simster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/simster/32/1047_2.png) [@simster](https://boards.straightdope.com/u/simster)\
**Post date:** [July 13, 2006, 2:10am UTC](https://boards.straightdope.com/t/html-forms-and-checkboxes/364227/7 "2006-07-13T02:10:32Z")

</div>

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();

---

<div class="post-metadata">

**Author:** ![JimOfAllTrades](https://avatars.discourse-cdn.com/v4/letter/j/ba8739/32.png) [@JimOfAllTrades](https://boards.straightdope.com/u/JimOfAllTrades)\
**Post date:** [July 13, 2006, 3:11am UTC](https://boards.straightdope.com/t/html-forms-and-checkboxes/364227/8 "2006-07-13T03:11:58Z")

</div>

[QUOTE=simster]  
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.  
[/QUOTE]  
Yeah, I talked to them about changing to radio buttons, but they wanted the checkboxes.

[QUOTE=simster]  
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();  
[/QUOTE]  
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.

---

<div class="post-metadata">

**Author:** ![simster](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/simster/32/1047_2.png) [@simster](https://boards.straightdope.com/u/simster)\
**Post date:** [July 13, 2006, 4:21am UTC](https://boards.straightdope.com/t/html-forms-and-checkboxes/364227/9 "2006-07-13T04:21:45Z")

</div>

oh, well, then… nevermind.

---

<div class="post-metadata">

**Author:** ![JimOfAllTrades](https://avatars.discourse-cdn.com/v4/letter/j/ba8739/32.png) [@JimOfAllTrades](https://boards.straightdope.com/u/JimOfAllTrades)\
**Post date:** [July 13, 2006, 5:29am UTC](https://boards.straightdope.com/t/html-forms-and-checkboxes/364227/10 "2006-07-13T05:29:59Z")

</div>

[QUOTE=simster]  
oh, well, then… nevermind.  
[/QUOTE]  
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.
