If you’ve been coding on the web for more than a few minutes, you’ll have used a form or two with checkboxes and radio buttons. Consider the following code:

What value is shown for mycheckbox and myradio when you hit Submit without checking any box?

The answer: an error is raised. It would depend on your PHP settings but, assuming strict error reporting is enabled, you’ll see “Notice: Undefined index” for both fields.

When a checkbox is unchecked or no radio button is selected, nothing is sent for those fields in the HTTP POST. Unlike other input boxes, there’s no default value — the POSTed field simply doesn’t exist. To make it work correctly, you need to check its existence on the server, e.g.

This is fine presuming you know what fields to expect in a form. However, if the form itself was generated in some way, you couldn’t determine what fields it contained by looking at the POSTed values.

I never questioned this state of affairs until Andy Kirk commented on my recent article How to Create a Toggle Switch in CSS3. He produced an example which used hidden form values with the same name as the checkboxes and radio buttons to set a default (unchecked) value, e.g.

Therefore, values for mycheckbox and myradio are always posted regardless. Andy discovered it within the PHP Zend framework and used it ever since. I’m embarrassed to admit I’d never seen the trick before or worked it out for myself.

A Good Solution?

The hidden field default trick is simple although it makes me slightly uncomfortable. You’re adding unnecessary elements to an HTML page and data to the HTTP POST to solve a server-specific problem. As an alternative, you could use JavaScript to locate all checkboxes and radio buttons then create the hidden fields but, if that code failed or was disabled, it could cause server issues.

My suggestion: if you know what fields a form contains, you don’t require hidden fields to set defaults. However, on those rare occasions you need a generic parser which can analyze any form, it’s a reasonable solution to a quirky problem.

This may not be a fancy HTML5 tutorial, but it’s a great tip. Thanks Andy — you’ve taught an old dog a new trick!

Source Link: http://www.sitepoint.com/html-checkbox-radio-button-defaults/