Wednesday, August 26, 2009

Default Submit Button

When developing the desktop application it is very common that you set the default accept and cancel button for the window form. So that if user click the enter key then action take place like submission of the inputs entered by the user or other actions and when user click the esc key then the form close. In window form , form has two properties called accept button and cancel button which are used for this purpose. But when you want to give this type of functionality in the web application then there is little difference and more ways that you can give this functionality. In this post I will show you how you can give this functionality to user.

First Way
With the release of the ASP.NET 2.0, the problem of making the default button is much easier with the introduction of the "default button" property of the form. Now defaultbutton attribute can be used with <form> or <asp:panel> control. What button will be "clicked" depends of where actually cursor is and what button is chosen as a default button for form or a panel.Here is sample HTML code that contains one form and one panel control:

<form defaultbutton="buttonID" runat="server">
With the above html code you can set the default button for the form or to the panel control. In default button property you have to mention the ID of the button control which is used as the default button when enter key is pressed on the form or on the panel control.

Second Way
In the second of achieving default button functionality is the JavaScript way and below is the JavaScript code which is used to set the default button for the page. Here I have a simple function named "DefaultButton" which will return Boolean value of true or false depending on the
the value of the keycode, if 13 which is used as the enter key value, it will call the click event of the button which is set as the default button and return false else it will return true.
function DefaultButton()
if(event.which || event.keyCode)
if ((event.which == 13) || (event.keyCode == 13))
return false;
return true;
The default button function is registered against the onkeypress JavaScript of the form, So that keypress while focusing on any of the control on the form it will raise the click event of the button when the user click the enter key. You have to registered only one keypress event for the form no need to right code for every input control when they are in focus and has to manage the enter key for there own. You can download the source code from here.

All and any comments / bugs / suggestions are welcomed!

No comments: