A "fix" for unchecked checkbox submission behavior

[jcwatson11]

The Problem Defined

There have been several discussions revolving around the fact that an unchecked checkbox will not submit anything to the server on an Ajax submission using the Ext library.

For example, a checked checkbox (name:'mycheckbox') with an inputValue of '1' will submit:

mycheckbox=1

in the URI string submitted by the Ajax request. However, an unchecked checkbox will submit NOTHING AT ALL for the unchecked field. This is frustrating to developers who need to record the unchecked value in a database somewhere, and need to know that the check was removed by the user trying to save that valuable bit of information.

Although not sending an unchecked field was standard HTML behavior up to this point, it seems to me that with the advent of such a great library as Ext, there is no need for this behavior to continue. It only causes developers to continually jerry-rig work arounds, and wastes valuable development time.

A Recommended Permanent Solution for Ext

The ext-base.js file contains this behavior in its Ext.lib.Ajax.serializeForm() definition. There is a very simple change that could make this issue go away permanently for all developers using Ext, and I wonder why the Ext core team doesn't simply implement it in the base code. There very well may be a good reason, but I haven't encountered or thought of it yet, so this thread is intended to open that discussion.

Here's the recommended solution:

What should the submitted value of an unchecked checkbox be? I think it should either be zero or an empty string. If the input value is '1', then the unchecked value would logically be '0'. Otherwise an empty string. However, if anyone can think of reasons why this wouldn't be the case, please bring it up.

Change the definition of Ext.lib.Ajax.serializeForm as follows:

Change

case"checkbox":
     if(G.checked){
          K+=encodeURIComponent(E)+"="+encodeURIComponent(H)+"&"
     }
     break;

to

case"checkbox":
     ev = (H=='1') ? '0':'';
     if(G.checked){
          K+=encodeURIComponent(E)+"="+encodeURIComponent(H)+"&"
     } else {
          K+=encodeURIComponent(E)+"="+encodeURIComponent(ev)+"&"
     }
     break;

With that the problem would seem to have been solved forever for anyone using Ext.

Is there any reason why this (or something similar to it) shouldn't be implemented into Ext core?

(For a more in-depth discussion on how to update your Ext version to fix this permanently, see the following thread.)
http://extjs.com/forum/showthread.php?t=25924

[evant]

The HTML standard says that only "successful" controls may be submitted (more info here: http://www.w3.org/TR/html4/interact/...html#h-17.13.2). An unchecked checkbox is not "successful", therefore it shouldn't be submitted along with the other values.

Although it would be nice to have it as a global configuration option.

[jcwatson11]

Although it would be nice to have it as a global configuration option.

I'm all for a configurable option!! Yes, yes! Let's do that!

As with all beurocracy... just because it's the rule, doesn't mean it makes sense. If I uncheck a checkbox and click save, that's data that needs to be recorded in my database when I click submit. I'm successfully unchecking the checkbox and that new information should successfully get to my database somehow. The state of the data record has changed from the time the form loaded it.

I'm sure if we took a poll, we would have quite a respectable number of developers who have hit their heads against this wall enough times to merit addressing this issue with a configurable option.

[Shyru]

Another solution is to use a specialized submit action which can be plugged into the forms. This is easy to accomplish and works without modifying the ext sourcecode. - Personally i find this the better solution as it also fixes some other problems with form submission in ext.

I detailed my solution here: How to submit ext forms the right way.

[jcwatson11]

Hi Shyru,

What a great extension! It provides a one-stop place to fix any and all the issues Ext forms might have. And it doesn't change the core behavior of Ext.lib.Ajax. Good solution.

I actually had not run into the combobox or the date issues yet. Comboboxes for me actually do submit the ID number instead of the display value. I'm running Ext 2.0. Maybe this was something that changed in a recent release?

I also hadn't even thought about the date locale issue, but you're absolutely right. And this is a great way to provide an extendable way to do any other data translation before it hits the server.

Thanks for the submission!

Anyone else have any thoughts?

Jon

[infinit]

Another solution is to use a specialized submit action which can be plugged into the forms. This is easy to accomplish and works without modifying the ext sourcecode. - Personally i find this the better solution as it also fixes some other problems with form submission in ext.

I detailed my solution here: How to submit ext forms the right way.

Thanks for the info.

But Error when used with a REST style rails backend => When I post a modified record, if configured params: { _method:

[jcwatson11]

I'm sorry, I'm not familiar with rails. But you may consider using Firefox with Firebug and debugging using un-minified copies of all Ext javascript files: ext-all-debug.js is one, And I believe you can get an unminified copy of ext-base.js some where on this website. I don't remember how I got my copy. I would post mine, but it would need to match the version of Extjs that you're running.

[mystix]

And I believe you can get an unminified copy of ext-base.js some where on this website.

this will help:
https://forum.sencha.com/forum/showthread.php?t=26381

as will this portion of the the Learn wiki:
http://extjs.com/learn/Ext_FAQ#Best_...hooting_errors

[kanister]

The HTML standard says that only "successful" controls may be submitted (more info here: http://www.w3.org/TR/html4/interact/...html#h-17.13.2). An unchecked checkbox is not "successful", therefore it shouldn't be submitted along with the other values.

Although it would be nice to have it as a global configuration option.

So maybe you schouldnt submit empty strings also?

Seriiously please stop briinging up retardedideas as dogmas. all controls schould have the same behaviour that is submitting binded values (whatever it would be).

[mitchellsimoens]

So maybe you schouldnt submit empty strings also?

Seriiously please stop briinging up retardedideas as dogmas. all controls schould have the same behaviour that is submitting binded values (whatever it would be).

Please remain respectful no matter the circumstance.