In: , ,
On: 2008 / 09 / 07 Viewed: 22343 times

I ran into an interesting problem, facing what is certainly an HTML limitation that had somehow never really occurred to me. The thing is: when you submit a form with empty fields, empty values are POSTed, except for checkboxes and radio buttons which are not posted at all, just as if they were no such field in the form.

For instance, this form:

HTML:
  1. <form method="post" action="">
  2. <input type="text" name="input" value="">
  3. <input type="hidden" name="hidden" value="">
  4. <input type="checkbox" name="checkbox">
  5. </form>

Submitting it, leaving empty values and not checking the checkbox, you would get the following $_POST array (notice the missing "checkbox")

PHP:
  1. array (
  2.   "input" => "",
  3.   "hidden" => ""
  4. )

In short: <input type="checkbox" name="field" value="something"> either gets submitted as field = "something" if checked, or doesn't exist if unchecked.

My problem was that I needed to process an arbitrary number of checkboxes while being able to know wether a checkbox was left unchecked, that is I needed to have a value for each checkbox in the $_POST array, either blank/off/empty or checked/on/whatever.

The solution I found was simple: before each checkbox, add a hidden field with the same name:

HTML:
  1. <form method="post" action="">
  2. <input type="hidden" name="checkbox" value="">
  3. <input type="checkbox" name="checkbox">
  4. </form>

This way, there is always a value for field checkbox in the $_POST array: either "" if the checkbox was unchecked, or "on" if it was checked. I've uploaded a simple HTML form if you're curious to try: regular way, without the "special hidden" fields, or without the duplicate hidden fields. Submit the form with all fields left to empty and see the resulting $_POST array.

This simple yet effective and smart workaround was found by Cameron and I really love it. (And the image above is by Joey Rozier from a restaurant where you apparently can build your perfect burger, seems fun:)

This trick might or might now suit your need: for instance, client-side javascript serialization of the form could lead to something unexpected because of the duplicated fields. Also, this won't work with arrays of checkboxes (something like having multiple <input type="checkbox" name="field[]"/>). But for the particular case I had to deal with, it was very perfect. Love it.

Related posts

Metastuff

This entry "Posting Unchecked Checkboxes in HTML Forms" was posted on 07/09/2008 at 9:47 pm and is tagged with , ,
Watch this discussion : Comments RSS 2.0. You can trackback this post from your own site

5 Blablas

  1. 1
    stratosg Italy »
    said, on 08/Sep/08 at 12:32 am # :

    stumbled on the same problem several times and the solution defers each time because of my needs. what i usually do is have a hidden field called checkboxes or smth like that and store there a string like "checkbx1=0;checkbx2=1...". i have a small javascript that runs everytime a checkbox is changed and loops through all the checkboxes of the form and creates the string. serverside i just use a split and voila everything falls to place. the problem is when js is disabled but give or take it's ok... yours is a much simpler way but as you said is the solution for a limited variation of problems. also i must admit that i hadn't thought this simple before :) :) :)

  2. 2
    Carbonize Great Britain (UK) »
    said, on 19/Sep/08 at 4:22 pm # :

    What's wrong with the method most of us use which is

    PHP:
    1. $_POST['checkbox'] = (isset($_POST['checkbox'])) ? 1 : 0;

  3. 3
    stratosg Greece »
    thought, on 19/Sep/08 at 11:24 pm # :

    nothing is wrong :) it's just another way to do it ;)

  4. 4
    Ozh France »
    commented, on 20/Sep/08 at 9:46 am # :

    Carbonize » This works fine as long as you know how many checkboxes you have in the submitted form. The trick is when you *don't* know.

  5. 5
    Justin United States »
    wrote, on 15/Oct/08 at 2:33 am # :

    This is a lifesaver, scratching my head on this for about an hour wondering if I could ever figure out how to account for something that doesn't exist. I knew there had to a simple, non-bloated code solution where you account for every checkbox, and this is it! Thanks

Leave a Reply

Comment Guidelines or Die

  • HTML: You can use these tags: <a href=""> <em> <i> <b> <strong> <blockquote>
  • Posting code: Post raw code (no <> &lt; etc) within appropriate tags : [php][/php], [css][/css], [html][/html], [js][/js], [sql][/sql], [xml][/xml], or generic [code][code]
  • Gravatars: Curious about the little images next to each commenter's name ? Go to Gravatar.
  • Spam: Various spam plugins on patrol. I'll put pins in a Voodoo doll if you spam me.
  • I will mark as Spam test comments, all comments with SEO names (ie "My Cool Online Shop" instead of "Joe") or containing forum-like signatures.

Read more ?

Close
E-mail It