PDA

View Full Version : Disabled Panel controls do not submit contained fields in Internet Explorer



AdamDawes
3 Mar 2010, 3:20 AM
I have a simple ExtJS-based form that displays a Panel, inside which are two TextFields (a username and password field). The Panel is disabled by specifying its disabled:true property when it is initialized.

In Firefox, Chrome, Opera and Safari the disabling of the Panel just causes a transparent mask to appear in front of the panel area, preventing the user from clicking on the input controls contained inside it. When the form is submitted, the values from those controls are sent back to the server as normal, the Panel does not affect this at all.

In all versions of Internet Explorer however (tested with IE6, IE7 and IE8), the fields inside the disabled Panel are not submitted. This is causing problems in my application as I need these values even though their panel is disabled.

Can anyone suggest why this might be?

I attach a full working example as an .htm file. You will of course need to modify the <form> element to point to a working server in order to see the content of the submission. The relevant code is here:


<form action="http://your-server-name-here" method="post">

<input name="submit" value="submit" type="submit" />

<div id="div_ReadOnlyPanel">
<div id="ReadOnlyPanel">
<input name="ReadOnlyUsername" id="ReadOnlyUsername" maxlength="15" value="usernamevalue" />
<br>
<input name="ReadOnlyPassword" id="ReadOnlyPassword" maxlength="15" type="password" value="passwordvalue" />
</div>
</div>

</form>

<script type="text/javascript" language="JavaScript">

Ext.onReady(function(){
//****** Set up the username field
var extReadOnlyUsername = new Ext.form.TextField({
"id" : 'extId_ReadOnlyUsername'
});
extReadOnlyUsername.applyToMarkup(Ext.get('ReadOnlyUsername'));

//****** Set up the password field
var extReadOnlyPassword = new Ext.form.TextField({
"id" : 'extId_ReadOnlyPassword',
"inputType" : 'password'
});
extReadOnlyPassword.applyToMarkup(Ext.get('ReadOnlyPassword'));

//****** Set up the panel
var extReadOnlyPanel = new Ext.Panel({
"id" : 'extId_ReadOnlyPanel',
"contentEl" : 'ReadOnlyPanel',
"renderTo" : 'div_ReadOnlyPanel',
"forceLayout" : true,
"disabled" : true,
"deferredRender" : false
});
});

</script>
When this is submitted in Firefox etc., the following submission is received:


submit=submit&ReadOnlyUsername=usernamevalue&ReadOnlyPassword=passwordvalue

When submitted in IE, the following is received:


submit=submit

I tried this with ExtJS 2.2 and 3.1 with the same results.

Does anyone have any suggestions as to how I can get this to work in IE the way it does in everything else?

Many thanks!

Animal
3 Mar 2010, 3:56 AM
http://www.w3.org/TR/html401/interact/forms.html#h-17.12.1

AdamDawes
3 Mar 2010, 5:21 AM
Thanks for the link. I'm aware that disabled controls don't submit a value, my question in this regard is more: why is ExtJS disabling the controls in IE? In all the other browsers it leaves them enabled, and so they still submit their data.

(This means that in browsers other then IE I can actually tab into the controls inside the disabled panel and change their values, but that's a problem for another thread. :) )

Animal
3 Mar 2010, 5:35 AM
You'll have to debug it.