javascript jquery html form element – also submit checkboxes that have the “off” state

solution: http://jsfiddle.net/az7s5/

[cc lang=”js” escaped=”true” width=”500″]
// serialize form, also send values for checkboxes that are “off”
$(form).children().each(function() {
add = “”;
//access to form element via $(this)
var object = $(this);
if($(object).attr(“type”) == “text”)
{
add = “&”+$(object).attr(“name”)+”=”+$(object).val();
}

if($(object).attr(“type”) == “checkbox”)
{
if($(object).prop(‘checked’))
{
add = “&”+$(object).attr(“name”)+”=on”;
}
else
{
add = “&”+$(object).attr(“name”)+”=off”;
}
}

url += add;
});
[/cc]

Nobody is god – nobody is perfect – “an error only becomes a mistake if you refuse to correct it” (J.F. Kennedy)

It’s really really funny… that there is no “improve product by feedback” from users/customer/employee in 99% if all software/websites and 99% of all companies.

My feedback on the html standard 4.01 form handling would be: NOT GOOD!

… why do you not submit checkboxes that are off? To save bandwidth? C’mon.

Here is the problem: You want a user-defined form on your website.

With php and html this can be done/generated depending on what is in the database (user defines form elements via cms backend).

Problem: You don’t know how many form elements there will be.

The Concept Problem: HTML-4.01-Form only submittes “on” values but no “off” values (for checkboxes).

So how can you guess what checkboxes are defined/are there?

You can not.

Not per default.

Not even (!) the JQuery.serialize(form); function has ever considered this case and has no option to also submit checkboxes that are in the “off” state.

So again and again: Broken technology was given to you – so you can waste your finite human time to do it all over again… FOR YOURSELF!

The stated solution on stack overflow is a really really ugly and ridiculous workaround that i am not willing to follow 😀

http://stackoverflow.com/questions/10339881/how-to-make-unchecked-check-box-return-a-value-with-jquery-serialize

“A common solution to this problem is simply to include a hidden field with the same name as the checkbox, and the value “false”

This way, the submitted values will be either “false” if the checkbox is not checked, and “true,false” (assuming your checkbox has the value of “true”) if it is checked.

Depending on your server-side code, then the “true, false” pair of values may get parsed as True, or it may need some help in parsing it. Some MVC frameworks will be happy with the true,false pair.”

answered Apr 26 ’12 at 20:32
Matt Tew
1,3221613

HTML 4.01 Specification

W3C Recommendation 24 December 1999

http://www.w3.org/TR/html401/interact/forms.html#successful-controls

liked this article?

  • only together we can create a truly free world
  • plz support dwaves to keep it up & running!
  • (yes the info on the internet is (mostly) free but beer is still not free (still have to work on that))
  • really really hate advertisement
  • contribute: whenever a solution was found, blog about it for others to find!
  • talk about, recommend & link to this blog and articles
  • thanks to all who contribute!
admin