HTML form send unchecked checkboxes

Question

I need to send a very long form with lots of checkboxes. They're grouped by areas, like this:

<fieldset>
    <legend>Whatever1</legend>
    <div class="checkbox-list">
        <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Arts"> Arts</label>
        <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Bars"> Bars</label>
        <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Books"> Books</label>
        (more items)
    </div>
</fieldset>
<fieldset>
    <legend>Whatever2</legend>
    <div class="checkbox-list">
        <label class="checkbox inline"><input type="checkbox" name="Interests" value="Architecture"> Architecture</label>
        <label class="checkbox inline"><input type="checkbox" name="Interests" value="Audio"> Audio/vídeo</label>
        <label class="checkbox inline"><input type="checkbox" name="Interests" value="Business"> Business</label>
        (more items)            
    </div>
</fieldset>

The form is much longer, but you get the idea.

Using name="Hobbies" value="Arts" my django backend receives all the checkboxes grouped in a Hobbies array, which is very convenient, but I need to know the unchecked checkboxes, too. I know about the hidden input trick, but it's not useful to me, because I use the value field as part of the checkbox grouping.

Any idea about what can I do?

score 3 · Accepted Answer · answered Feb 18 '13 at 20:25

Well, as I guess you already know, there is fundamentally no way of asking the browser which boxes were left unticked. Blame the inventors of HTML forms...

Here are a few simple approaches which don't break your grouping logic:

Re-generate the list of checkboxes which you displayed on your server side. This is preferable in a lot of cases anyway, since it means you're not trusting the data coming back to be exactly what you displayed. (Consider what happens if I use a debugging tool like Firebug to delete one of your checkboxes, or add a new one...)
Include hidden inputs with a corresponding name for each checkbox - "Interests_All", "Hobbies_All", etc - so that you have two arrays of data, one including just the checked items, one including everything displayed.
Use radio buttons instead of check-boxes. Yes, they display differently, but they can have the functionality you want of submitting a Yes/No value, rather than just adding to the array or not.

Your second suggestion solved my problem. Thank you very much. — César García Tapia, Feb 18 '13 at 21:37

zxqx · Answer 2 · 2013-02-18T20:48:04.090

You could add a hidden input field, and on form submit, use jQuery to populate the value of the hidden input with an array containing the values of the unchecked checkboxes:

$("form").on("submit", function(e) {
  e.preventDefault();

  // Create an array of unchecked Hobbies
  var uncheckedValues = [];
  $(this).find("input[name='Hobbies']:not(:checked)").each(function() {
    uncheckedValues.push(this.value);
  });

  // Set the uncheckedValues array as hidden input value
  $("#your-hidden-input").val(uncheckedValues);
  alert($("#your-hidden-input").val());

  // Handle the form submission
  handleFormSubmit();
});

See DEMO.

score 0 · Answer 3 · answered Feb 18 '13 at 20:31

0

How about setting a default false value for each checkbox in the backend. If a value has been passed by the browser, you can then change the value to true.

answered Feb 18 '13 at 20:31

at0g

61
1
4

score 0 · Answer 4 · answered Feb 18 '13 at 21:36

I've solved it. The idea was in IMSoP's answer. Here's my solution, maybe it can help someone:

<fieldset>
    <legend>Whatever1</legend>
    <div class="checkbox-list">
        <input type="hidden" name="Hobbies_Arts">
        <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Arts"> Arts</label>
        <input type="hidden" name="Hobbies_Bars">
        <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Bars"> Bars</label>
        <input type="hidden" name="Hobbies_Books">
        <label class="checkbox inline"><input type="checkbox" name="Hobbies" value="Books"> Books</label>
        (more items)
    </div>
</fieldset>

With that, is very easy to handle the lists in the django side.

HTML form send unchecked checkboxes

4 Answers4