PDA

View Full Version : A "fix" for unchecked checkbox submission behavior



jcwatson11
4 Mar 2008, 10:16 PM
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
4 Mar 2008, 10:24 PM
The HTML standard says that only "successful" controls may be submitted (more info here: http://www.w3.org/TR/html4/interact/forms.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
4 Mar 2008, 10:55 PM
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
5 Mar 2008, 6:04 AM
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 (http://www.diloc.de/blog/2008/03/05/how-to-submit-ext-forms-the-right-way/).

jcwatson11
5 Mar 2008, 11:01 AM
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
12 Mar 2008, 2:20 AM
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 (http://www.diloc.de/blog/2008/03/05/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
13 Mar 2008, 12:40 PM
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
14 Mar 2008, 9:44 AM
And I believe you can get an unminified copy of ext-base.js some where on this website.


this will help:
26381

as will this portion of the the Learn wiki (http://extjs.com/learn/):
http://extjs.com/learn/Ext_FAQ#Best_practices_for_troubleshooting_errors

kanister
20 Jun 2011, 4:59 AM
The HTML standard says that only "successful" controls may be submitted (more info here: http://www.w3.org/TR/html4/interact/forms.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
20 Jun 2011, 11:11 AM
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.

jcwatson11
20 Jun 2011, 11:22 AM
Kanister: This thread is over 2 years old. Many of the issues reported during that time have been overcome by later versions of Ext.

Further, evant was only bringing up what he believes is w3c standard for the purpose of mutually beneficial discussion on this forum. You are welcome to add to any debate with fact or technical principle. But name-calling (calling someone's ideas retarded) is not part of a mutually beneficial discussion. This sort of behavior can get you banned from the Ext forums. Whether evant was being dogmatic or not has more to do with his personal attitude, which is very difficult to infer from a written post. In other words, whether he is being dogmatic or not is pure speculation.

Before you post, please consider that what you assume about someone's tone in a forum post does not necessarily reflect reality. If you believe the best about others, communication is much more effective.