Fixing the Button Bug

Click a Button







Reset Page

In Internet Explorer 6 and 7 the buttons are not handled as they should be. Normally when the button is clicked the value attribute provides the value back to the server. But in Internet Explorer the HTML content between the open and closing button tags is sent to the server.

When the button includes markup to display an image, it will cause that HTML to be submitted back to the server. With ASP.NET validation in place, it will cause an error because it is a security risk to post HTML markup as a part of a form. To correct the problem you must prevent that markup from being included in the form submission.

This example shows a couple of approaches. First the Default simply leaves the buttons as they are. This works properly in Firefox. Then Change Value attempts to replace the inner HTML with safe text before submission but the PostBack event becomes confused. Finally in Disable Button causes the button to be disabled prior to submission which prevents the validation error and allows the PostBack to work properly. It appears that disabling the button is the option which works.

As an added example, the Embedded page includes a User Control for the buttons to show how the Javascript would be rendered. It uses the Disable Button approach and works properly.

The solution simply uses the Page.ClientScript.RegisterOnSubmitStatement available in ASP.NET 2.0. The registered script is fired prior to submission and takes action on the buttons. The script als checks for document.all to ensure the script will only run in Internet Explorer.


 Default | Change ValueDisable ButtonEmbedded

Brennan Stehling : Back to Blog