Friday, May 22, 2009

Click the button on keypress in asp.net TextBox

In this post, I am explaining the button click functionality on key press in a textbox. I am using javascript to link the input textbox and the associated button that has to be clicked when the enter key is pressed in the textbox. One can preview it by taking the example of search textbox and GO button!


Fig. Clicking asp.net button on enter key press in textbox

We have seen search textboxes in almost all of the websites which imply 'Go' or 'Search' button click when Return key (Enter key) is pressed. Naturally, users love to press enter key instead of clicking search button next to the input textbox. Wouldn't it be nice if we could do the same for our web pages also? Yeah, I have implemented the button click feature on keypress in textbox control many times. But the last time practice on a web application that added both the textbox and the search button dynamically via javascript was really interesting story that inspired me to re-share the code [since I also learnt it on Internet].

Design Page Markup (SearchPage.aspx)
We do have one textbox and one button in the search page.

<div>

Search Text: <asp:TextBox ID="txtSearchBox" runat="server"></asp:TextBox>

<asp:Button ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" />

</div>

JavaScript Code    
This javascript code will be invoked when enter key is pressed in the textbox.

<script>

function clickButton(e, buttonid){

var evt = e ? e : window.event;

var bt = document.getElementById(buttonid);

if (bt){

if (evt.keyCode == 13){

bt.click();

return false;

}

}

}

</script>

We put this javascript code snippet within the head section of the design page.

Code Behind (SearchPage.aspx.cs)

//page load event handler
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//add attribute on the search textbox
//so that when enter key is pressed in the textbox,
//the search button will be fired
txtSearchBox.Attributes.Add("onkeypress", "return clickButton(event,'" + btnSearch.ClientID + "')");
}
}

//when search button is clicked
protected void btnSearch_Click(object sender, EventArgs e)
{
//my function to perform search
}


Here we add the onkeypress attribute to the textbox. When a key is pressed, the keycode will be passed to the javascript function. The javascript function checks if this is the enter key, and it is enter key then the button click is invoked by the javascript code.

So far we implemented button click on enter key press from an asp.net web control. To add a little user interactivity in the search textbox, you can implement google search like watermark effect in the search textbox. If you further want to prevent multiple postback, you can just disable asp.net button after first click and enable after postback completes.

Don't forget to expose your views via comment box beneath this post. You can freely share this post! Happy Programming!

Shout it kick it on DotNetKicks.com 

23 comments:

Anonymous said...

ayos!

Anonymous said...

very helpful!
salamat po! (^_^)

Fahad said...

the association worked like a beauty....

Anonymous said...

great tutorial
thanks man =)

Juri said...

Thank you for the help provided, I have never used javascript before but the code does the job.
Just wondering if same result can be achieved programmatically in C# without the use of javascript.

Anonymous said...

FANTASTIC!!

Anonymous said...

//page load event handler
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) //I got an error here.
//Leading '.' or '!' can only appear inside a 'With Statement'.

Sumit said...

good Job

Anonymous said...

Lupit mo!!!

Andie said...

Awesome! Thanks for posting!

Anonymous said...

galing.

Anonymous said...

Wonderful job, i can;t describe you how much help you provide me. i was using ajax for search option but fail to use it as because it doesn't work in master page. so i have decided to go manually and here your topics help me lot. thanks once again, it really works for me.

Anonymous said...

great help thank you .....brother you make our life easy god will help u always in your life "Inshallah"

Anonymous said...

thank you for great help brother ....

Anonymous said...

Thank you so much!!!!!It was VERY helpful, my boss wil definetely think I'm a genius:)

Anonymous said...

hey, i m not able to access the linkbutton id in the .cs file could u pls help me

Unknown said...

You should check if the ID in the .aspx is same as you are accessing from .cs file. If yes, did you miss runat="server" attribute of the button?

Anonymous said...

Thank you so much!!

Drago Pun said...

ASP.NET 2.0 comes with defaultbutton property. You can set default button for form and panels. This will be called when form is posting back using enter key.

Rick Jepson said...

Clearly stated and effective

Graciax8 said...

thanks! :)

Sunil Pal said...

U beauty !! U deserve 100 Dosas

Anonymous said...

C#:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//add attribute on the search textbox
//so that when enter key is pressed in the textbox,
//the search button will be fired
txtSearchBox.Attributes.Add("onkeypress", "return clickButton(event,'" + btnSearch.ClientID + "')");
}
}
VB ??
help me !

Post a Comment

Hope you liked this post. You can leave your message or you can put your valuable suggestions on this post here. Thanks for the sharing and cooperation!

Popular Posts

Recent Articles