Setting HTML Checkbox and HTML Radio Button Defaults
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:
<form action="." method="post">
<label><input name="mycheckbox" type="checkbox" value="1" /> checkbox</label>
<label><input name="myradio" type="radio" value="1" /> radio 1</label>
<label><input name="myradio" type="radio" value="2" /> radio 2</label>
<button type="submit">Submit</button>
</form>
<!-- output -->
<p>Value of mycheckbox: <?php echo $_POST['mycheckbox']; ?></p>
<p>Value of myradio: <?php echo $_POST['myradio']; ?></p>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.
<?php
$mycheckbox = isset($_POST['mycheckbox']);
$myradio = (isset($_POST['myradio']) ? (int) $_POST['myradio'] : 0);
?>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.
<input name="mycheckbox" type="hidden" value="0" />
<label><input name="mycheckbox" type="checkbox" value="1" /> checkbox</label>
<input name="myradio" type="hidden" value="0" />
<label><input name="myradio" type="radio" value="1" /> radio 1</label>
<label><input name="myradio" type="radio" value="2" /> radio 2</label>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!
And if you enjoyed reading this post, you’ll love Learnable; the place to learn fresh skills and techniques from the masters. Members get instant access to all of SitePoint’s ebooks and interactive online courses, like HTML5 & CSS3 For the Real World.
Comments on this article are closed. Have a question about HTML? Why not ask it on our forums?
