unchecked checkboxes not being submitted
doowb opened this issue · 5 comments
Description:
When submitting a form with a checkbox, if the checkbox is "unchecked" the value does not get submitted.
Expected Behavior:
The checkbox value will be included even if it's not checked.
Actual behavior:
The checkbox is not included in the submit array.
Versions:
jQuery-form:
4.2.2
jQuery:
3.1.1
Browsers:
Chrome Version 61.0.3163.100
I understand that it's probably desirable to only submit checkbox values if the checkbox is checked. Since this is the current feature, is there a way to make it so I can send false for unchecked checkboxes? The only way I'm thinking of is to use the beforeSubmit function and add the value to the array myself.
The FAQ Why aren’t all my input values posted? may answer your question. Basically, the plugin only posts form elements that conform to the HTML spec for successful controls. If no boxes are checked in a checkbox group, no value is submitted.
While I understand that it is useful to submit default values sometimes (especially for checkboxes), I think it's a good idea for the base plugin to stick to the HTML specification, so that the form data it serializes would be the same as a normal HTML form POST.
I, personally, prefer to handle default values on the backend server. That way I can ensure data integrity regardless of the source (normal form POST, AJAX call, REST service, etc). If you want to set the default value on the frontend, then the beforeSubmit function would be the best place to do that.
Thanks @kevindb. Those links were helpful and now I understand why it was chosen to work that way. I also do validation on the server, but I ran into this issue using a REST API built with loopback. Since the API uses HTTP methods to differentiate if an object is completely overwritten (PUT) or if attributes on the object are updated (PATCH), I'm not able to set a boolean value to false using the PATCH method since an unchecked checkbox isn't even sent to the server.
I accept that this is following an HTML form standard, so I can either write the custom beforeSubmit function to handle it, or I can update my form to use a hidden input that syncs with the checkbox. (I just thought of the hidden input thing as I was typing, but it seems like a better solution than customizing the beforeSubmit).
One option might be to change your checkbox to two radio inputs (with the same name), with one having its value set to 'true' and the other having its value set to 'false'.
@doowb, the "hidden field as default value" method is fairly common. Just keep in mind that if the checkbox is checked, you'll be sending both a true value from the checkbox and a default false value from the hidden field in the form struct. That can confuse some backends.
I like @tmorehouse's suggestion to use radio buttons instead. They're usually clearer and easier for the user for Yes/No true/false type options.
https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/
https://uxplanet.org/radio-buttons-ux-design-588e5c0a50dc#10a5
Awesome suggestions and links! Thanks for the help.