How to uncheck a checkbox to return a value using jQuery serialization?

Question

I have an HTML form with some checkboxes. I use the jQuery .serialize() function so that the query string is sent to the database. The problem I encountered is that if the checkbox is not .serialize() , the .serialize() function does not register it in the query string.

My problem is illustrated in this jsfiddle: http://jsfiddle.net/cTKhH/ .

This is a problem because I still need to save the value of the raw flag to the database. Currently, information is saved only when the check box is selected. When it is not installed, and information from .serialize() sent, no changes occur because the information is missing.

Does anyone know how to make my .serialize() function return unchecked value for all checkboxes when they are not checked?

Thanks!!

** EDIT **

A bit more information, now I know why this flag was not sent because it is not a “successful” form control, see here: http://www.w3.org/TR/html401/interact/forms.html#successful -controls .

Hope I'm still .serialize() function to send unverified values.

Answer 1

Here is a simple example - I'm sure you can turn this into a good plugin.

HTML

 <form id="doit" action="" method="post"> <input type="checkbox" name="test" data-checkedName="test" data-uncheckedid="yup" value="true" class="checkedValue" /> <input type="hidden" name="test" id="yup" value="false" /> <input type="submit" value="serialize" /> </form> 

Js

 $(function () { $(".checkedValue").click(function () { var $cb = $(this), $associatedHiddenField = $("#" + $cb.attr("data-uncheckedid")), name = $cb.attr("data-checkedName"); if (this.checked) { $cb.attr("name", name); $associatedHiddenField.removeAttr("name"); } else { $cb.removeAttr("name"); $associatedHiddenField.attr("name", name); } }); $("#doit").submit(function (e) { e.preventDefault(); console.log($(this).serialize()); }); }); 

Answer 2

Description

jQuery.serialize() almost does the same as the browser, after which you submit the form. Unchecked checkboxes are not included in the submit form.

The node must use the select element.

See my jsFiddle example and demo

Example

 <form> <select id="event_allDay" name="a"> <option value="0" selected>No</option> <option value="1">Yes</option> </select> </form> <button id="b">submit</button>​ $('#b').click(function() { alert($('form').serialize()); });​ 

Edit

I do not know if and what server technology you are using. But if you use it, you can fix it using the default values.

Answer 3

A common solution to this problem is to simply enable a hidden field with the same name as the checkbox, and set to false

Thus, the presented values ​​will be either “false” if the check box is not selected, and “true, false” (if your flag is set to “true”) if it is checked.

Depending on your server-side code, a pair of true, false values ​​may be parsed as True, or you may need help with parsing it. Some MVC frameworks will be happy with a true false pair.

Answer 4

Perhaps you can configure the serializeArray function in jQuery to enable the checkbox if it is not set.

Demo

NOTE. Below is just a draft, please feel free to optimize.

 $.fn.serializeArray = function () { var rselectTextarea= /^(?:select|textarea)/i; var rinput = /^(?:color|date|datetime|datetime-local|email|hidden|month|number|password|range|search|tel|text|time|url|week)$/i; var rCRLF = /\r?\n/g; return this.map(function () { return this.elements ? jQuery.makeArray(this.elements) : this; }).filter(function () { return this.name && !this.disabled && (this.checked || rselectTextarea.test(this.nodeName) || rinput.test(this.type) || this.type == "checkbox"); }).map(function (i, elem) { var val = jQuery(this).val(); if (this.type == 'checkbox' && this.checked === false) { val = 'off'; } return val == null ? null : jQuery.isArray(val) ? jQuery.map(val, function (val, i) { return { name: elem.name, value: val.replace(rCRLF, "\r\n") }; }) : { name: elem.name, value: val.replace(rCRLF, "\r\n") }; }).get(); } 

Answer 5

An alternative would be to use the jQuery plugin. For example, serializeJSON has the ability to set the value for unchecked flags, for example:

 $('form').serializeJSON({checkboxUncheckedValue: "false"}); 

In any case, it is generally better to use hidden inputs for unchecked values.

Answer 6

 <input type='hidden' name='check' value='false'/> <input type='checkbox' name='check' value='true'/> 

will output check = false if the checkbox is not selected.