How to submit unchecked checkbox also

Question

If checkbox is not checked, clicking on form submit button does not submit any data.

Some checkboxes may be not present in form depending on form fields selected by

Answer 1

This is a common issue with checkboxes in HTML forms and isn't unique to ASP.NET.

The answer is to have a hidden field that accompanies each checkbox. When the checkbox is modified, use a client-side event to update the hidden field.

The hidden field will always be submitted.

However, since you're using ASP.NET MVC, if you use the HTML.CheckBoxFor helper, it will handle this for you automatically.

Answer 2

My shortest solution: use a checkbox's onchange() event to set a hidden sibling to 0 or 1. As follows:

var htm = '<input type="checkbox" '+(isMale>0?"checked":"")+' onchange="this.nextSibling.value=this.checked==true?1:0;" /><input type="hidden" name="Gender" value="'+isMale+'" />';

Submit ONLY sends the hidden sibling, NOT the checkbox because it has no name attribute. So the above is serialized as "...&Gender=1..." or "...&Gender=0..." depending on isMale value.

Answer 3

I found myself in this issue recently, and this is my solution. I do it without hidden field. Just change the 'value' of the checkbox to 'off', and make sure it is checked so it is sent. Note: I have only tested against a php server, but it should work.

        // Prepare checkboxes
    var checkboxes = document.querySelectorAll('input[type="checkbox"]')
    checkboxes.forEach(function(cbox) {
        if (!cbox.checked) { // If the checkbox is checked it keeps its value, default value is 'on' 
            cbox.value='off' // Otherwise change the value to off, or something else
            cbox.checked = true // We need to check it, so it sends the value
        }
    })

Answer 4

I ran into a similar issue while using jQuery/Java - Instead of using an additional hidden field, I forced a submission each time the form was saved irrespective of whether fields were modified.

e.g. If chkBox1 =unchecked (will send null - control value attribute via jQuery onClick or onChange event of checkbox)

<input name="chkBox1 " class="editable-value" id="chkBox1 " style="display: inline;" type="checkbox" data-type="A" data-original-value="checked" data-force-save="true" value="N"/>

and ChkBox2=checked (Will send Y)

<input name="ChkBox2" class="editable-value" id="ChkBox2" type="checkbox" CHECKED="Y" data-type="A" data-original-value="checked" value="Y">

are the on screen values and I try to save the data,in my Java code I perform a null check on the value obtained in the getter and interpret a null as an 'N'. This avoids the overhead of a hidden field although one is free to choose the solution that addresses their particular situation.

Answer 5

This is a very common problem - when checkbox isn't selected it wont send to server value off/ false by itself. Most popular answer that I found was to add hidden field with the same name as checkbox and value = false. But then when someone checked it it sent me two values.

And I didn't like it. This is what I did:

Somewhere in HTML:

<input type="checkbox" name="${name}" onclick="true" >

In JQuery:

First step is to set hidden values on all checkboxes that aren't checked.

$(document).ready(function () {
        $(".checkbox").each(function () {
                 if ($(this).prop("checked") == undefined) {
                    $(this).after("<input type=\"hidden\" name=\"" + $(this).attr("name") + "\" value="off">")
                 }
              }
        )
     });

Secondly we have to react on user clicking the check-box: while unselecting add hidden field, when selecting - remove next sibling in DOM - we expected hidden field there.

WARNING: when check-boxes have common parent you should check if next sibling's type is hidden and then remove it!:

   $(".checkbox").click(function () {
                    if ($(this).prop("checked") == undefined) {
                       $(this).after("<input type=\"hidden\" name=\"" + $(this).attr("name") + "\" value=off>")
                    } else {
                       $(this).next().remove();
                    }
                 }
           );

And it works for me :)

Answer 6

My form is created dynamically, so incorporating additional hidden fields would have been quite complicated. For me it works by temporarily altering the field type in a submit handler of the form.

myForm.addEventHandler("submit", ev => {
    for (let oField of ev.target.elements) {
        if (oField.nodeName.toUpperCase() === "INPUT" &&
                oField.type === "checkbox" &&
                ! oField.checked) {
            oField.type = "text";    // input type text will be sent
                         // After submitting, reset type to checkbox
            oReq.addEventListener("loadstart",
                        () => { oField.type = "checkbox"; });
        }
    }
});

This feels a bit dirty, but works for my.