I have a form which, for the sake of isolating the problem, has about a dozen plain HTML checkboxes (not WebControls), all of which are disabled. They are inside an UpdatePanel.
I have a link which calls
__doPostBack('a-control','my-custom-argument');
Depending on the first argument I supply, the page may do a full postback or a partial one.
When I do a full postback, none of the checkbox values are submitted in the post (because they are disabled). This is the normal and thus desired behavior.
However, when it does a partial postback, the script collects all of the values from my checkboxes and submits them, without indicating which ones were disabled, which breaks my code.
It's annoying and I would like it to behave consistently. Is there anyway to tell the .NET javascript handler to work the way the rest of the world does and not postback the values of disabled HTML form elements?
I have a form which, for the sake of isolating the problem, has about a dozen plain HTML checkboxes (not WebControls), all of which are disabled. They are inside an UpdatePanel.
I have a link which calls
__doPostBack('a-control','my-custom-argument');
Depending on the first argument I supply, the page may do a full postback or a partial one.
When I do a full postback, none of the checkbox values are submitted in the post (because they are disabled). This is the normal and thus desired behavior.
However, when it does a partial postback, the script collects all of the values from my checkboxes and submits them, without indicating which ones were disabled, which breaks my code.
It's annoying and I would like it to behave consistently. Is there anyway to tell the .NET javascript handler to work the way the rest of the world does and not postback the values of disabled HTML form elements?
3 Answers
Reset to default 3Looks like a bug to me. According to this disabled inputs should not be submitted with the form.
Here is my plete test page:
<%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" EnableViewState="false" EnableEventValidation="false" Trace="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml" >
<head>
<title>Test disabled checkboxes</title>
<script>
initState = false;
function disableCheckboxes(disabled) {
document.getElementById('foo').disabled = disabled;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" />
<asp:UpdatePanel runat="server">
<ContentTemplate>
<input runat="server" type="checkbox" id="foo" name="foo" checked="checked" /> Foo
<asp:Button ID="Inside" runat="server" Text="Submit Inside UpdatePanel" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Outside" runat="server" Text="Submit Outside UpdatePanel" />
<br />
<button type="button" onclick="disableCheckboxes(initState=!initState)">Toggle checkboxes</button>
</form>
</body>
</html>
Steps to reproduce:
- Open up Fiddler and the test page.
- Click "Submit Outside UpdatePanel" (triggers a normal Postback). Note in Fiddler the value
"foo=on"is submitted in the POST body. - Click "Toggle checkboxes" to disable the checkbox.
- Click "Submit Outside UpdatePanel" again. Note the parameter
"foo"is omitted from the POST body. This is expected. - Click "Submit Inside UpdatePanel" (triggers a partial Postback). Note the value
"foo=on"is present in the POST body, even though it should have been omitted
The bug appears to be in both MicrosoftAjaxWebForms.js and MicrosoftMvcAjax.js (and the .debug counterparts of each):
if ((type === 'text') ||
(type === 'password') ||
(type === 'hidden') ||
(((type === 'checkbox') || (type === 'radio')) && element.checked)) {
formBody.append(encodeURIComponent(name));
formBody.append('=');
formBody.append(encodeURIComponent(element.value));
formBody.append('&');
}
The disabled attribute on the element being serialized is pletely ignored, going against the spec and de-facto behaviour of form submission implementations.
I can suggest two options:
1) You can remove the name attribute of disabled controls with JavaScript just before doing postback.
2) Override Sys.WebForms.PageRequestManager.getInstance()._onFormSubmit with corrected version of code. Just copy implementation from MicrosoftAjaxWebForms.debug.js, add a handling for the disabled attribute and attach the corrected function to the existing PageRequestManager object:
Sys.WebForms.PageRequestManager.getInstance()._onFormSubmit = function...
Then register this JS block as startup script. It's important to get a correct order of rendered script blocks. I do a similar thing in my subclass of ScriptManager:
protected override void OnResolveScriptReference(ScriptReferenceEventArgs e) {
base.OnResolveScriptReference(e);
if (e.Script.Name.StartsWith("MicrosoftAjax"))
Page.ClientScript.RegisterStartupScript(GetType(), "My patch", MyPatchJs, true);
}
Works like a charm!
In .Net the form tag has the submitdisabledcontrols attribute, which defaults to false. You can at least make things behave consistently if you set it to true.