How Do I Dynamically Switch the DefaultButton at Run-Time?

In a previous article I showed you how to use the ASP.NET 2.0 DefaultFocus and DefaultButton features inside a Master Page. You saw how you could use the UniqueID of a control to pass the right control ID to the WebForm_AutoFocus JavaScript method. In this short article, I'll show you how you can use another client side script method to dynamically switch the DefaultButton at run-time.

Update!! 01-15-2006
I just tried this concept in a larger application using validator controls, and then things seems to break. Somehow, the validator controls and switching the DefaultButton dynamically don't play nice together. I haven't yet found a work-around, but if you know a way to fix this, please let me know.

Introduction

It's not uncommon that your page contains multiple text boxes and buttons that should each fire different events at the server. For example, consider the two boxes at the top of my web site. The first Go button should fire a search action with the search term entered in the first text box. The second button should take you directly to an article specified by a Quick Doc ID in the second text box.

Most users will fill in one of the two text boxes, simply hit enter and then expect the proper action to be carried out. But in my current site (built with .NET 1.1) this is not the case. (Try it and you'll see what I mean). If you enter a search term and hit enter, you go to the search page. However, if you enter a Quick Doc ID and hit enter, nothing happens.

The new DefaultButton from ASP.NET 2.0 is a welcome addition in that it allows you to specify the button that must be "clicked" when you hit enter. However, in the scenario described above, this is not enough. If I am typing a search term, I want the first Go button to be the DefaultButton and if I am entering a Quick Doc ID I want the second button to be the DefaultButton.

Attributes to the Rescue

Fortunately, switching what button is considered the default button at run-time isn't too difficult. If you look at the source of a page that has the DefaultButton set up, you'll see something similar to the following in the <form> tag:

<form name="form1" method="post" action="SomePage.aspx" 
     onkeypress="javascript:return WebForm_FireDefaultButton(event, 
     'Button1')" id="form1"
>

As you can see, all this code does is call a method called WebForm_FireDefaultButton and pass it up the event that triggered the initial action and the unique ID of a control. You can use this knowledge to change the DefaultButton from JavaScript at run-time. The simplest way to use this, is to call this method in the onclick event of a text box. You can add these onclick handlers through code using the controls Attributes collection. For example, in my new ASP.NET 2.0 version of this web site, I added the following code in the Page_Load event of the user control that has the search and the Quick Doc ID buttons:

txtQuickSearch.Attributes.Add("onclick",
   "document.forms[0].onkeypress = "
   + "new Function(\"return WebForm_FireDefaultButton(event, '" 
   + btnQuickSearch.UniqueID + "');\");");

txtQuickDocId.Attributes.Add("onclick",
   "document.forms[0].onkeypress = "
   + "new Function(\"return WebForm_FireDefaultButton(event, '" 
   + btnQuickDocId.UniqueID + "');\");");  

Whenever you click the search text box, onclick is fired and WebForm_FireDefaultButton is called. This method is then passed the unique ID of the appropriate button. The same applies to the Quick Doc ID button: when you click it, WebForm_FireDefaultButton is called and the DefaultButton is switched again.

The only thing you need to watch out for is that you need to set the DefaultButton at least once in your page using "normal" ways (as an attribute on the <form> tag for example, or through code as shown in my article about DefaultButtons in master pages). If you don't do this, ASP.NET won't inject the <script> tag that retrieves the required JavaScript code (including WebForm_FireDefaultButton) from the server.


Where to Next?

Wonder where to go next? You can post a comment on this article.

Doc ID 379
Full URL https://imar.spaanjaars.com/379/how-do-i-dynamically-switch-the-defaultbutton-at-run-time
Short cut https://imar.spaanjaars.com/379/
Written by Imar Spaanjaars
Date Posted 01/14/2006 18:46
Date Last Updated 01/15/2006 11:07
Listened to when writing I Love Her All the Time by Sonic Youth (Track 4 from the album: Bad Moon Rising)

Comments

Talk Back! Comment on Imar.Spaanjaars.Com

I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.

When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.

If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the Doc ID of the document.

(Plain text only; no HTML or code that looks like HTML or XML. In other words, don't use < and >. Also no links allowed.