How to make checkboxes have the same submit behavior as other inputs?

Question

I have a search form where several checkboxes are checked by default. When the form submits, as a GET, the url will only contain the list of checkboxes that were left checked.

http://www.example.com/page/?checkbox1=yes&checkbox2=yes

It is difficult with this scenario to determine the difference between when a user first arrives at this search page and when they submit the form with all checkboxes unchecked because the querystrings look the same.

To combat this problem I have started injecting a hidden field before the checkbox with the same name and a 'no' value. When the checkbox is unchecked the browser will send the hidden field's no value and when the checkbox is set then the browser is overriding the hidden field with the checkbox's 'yes' value.

<input type="hidden" name="checkbox1" value="no" />
<input type="checkbox" name="checkbox1" value="yes" />

when the user submits the form with all checkboxes unchecked I get this querystring:

http://www.example.com/page/?checkbox1=no&checkbox2=no

This seems to work on ff, chrome, ie5.5+ so I'am I safe in using this method or is there a better way to make checkboxes submit like inputs and selects?

Answer 1

Address the real problem:

determine the difference between when a users first arrives at this search page and when they submit the form with all checkboxes unchecked

Have one hidden field along the lines of

<input type="hidden" name="submitted" value="true">

You could then use the checkboxes in groups:

<input type="checkbox" name="foo" value="bar" id="foo_bar">
<label for="foo_bar">Bar</label>

<input type="checkbox" name="foo" value="baz" id="foo_baz">
<label for="foo_baz">Baz</label>

Then you can just loop over them on the server. How you do that depends on your server side environment. In most languages you can either call a method that returns an array of data (IIRC Java form libs tend to work this way) or just request the data in array context (Perl libs usually operate this way). PHP is a common language for server side programming and is a bit odd, it requires you to rename fields to end with the characters [].

Answer 2

As you say it seems to work fine. Alternatively you could avoid making it act like a normal input and just do a check to see if the input exists (if the input doesn't exist then treat it as false, if it does, treat it as true).

For example, in PHP

if(isset($_GET['checkbox1']) { ... }

in ASP.NET

if (Request.QueryString["checkbox1"] != null) { ... }

Of course you probably have yours reasons for wanting to do that client-side.

Answer 3

That's a really clever idea. As an unchecked checkbox doesn't appear in the request that really will help to know if a user enters the form for the first time.

But to know that you can simply use a hidden field with a default value. So when the users enters the form, the parameter is not set. As soon as he submits the form, the value is set.

You can also use a name for the submit button and you can then see if it was submitted:

<input type="submit" name="submit" />

Is that solving your problem?