I have a page that has two buttons, btnSearch and btnAddUser. The aspx page is as below. As you can see the default button is btnAddUser. But I would like to set the default button to btnSearch when I type something in the text box txtFilter. I added a JavaScript function clickButton, and in the page_load I added following code. The problem is when I press enter after I type something in the text box, both btnSearch and btnAddUser are clicked. Is there any way I could do so that btnAddUser is not clicked.
txtFilter.Attributes.Add("onkeypress", "return clickButton(event, '" + btnSearch.ClientID + "')");
<asp:Panel ID="MainPanel" runat="server" DefaultButton="btnAddUser">
<table align="center" width="900">
<tr>
<td align="left" width="70%">
<asp:TextBox ID="txtFilter" runat="server" Width="200"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Text="Search"
onclick="btnSearch_Click" CausesValidation="false" />
</td>
<td align="right" width="30%">
<asp:Button ID="btnAddUser" runat="server" Text="Add User" Width="85px"
CausesValidation="False" onclick="btnAddUser_Click" />
</td>
</tr>
<tr>
...
</asp:Panel>
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;
}
}
}
UPDATE: After googling, i found a solution as below. It seems working. But it is not working on Firefox? Anyone know how to resolve it?
function clickButton(e, buttonid) {
var evt = e ? e : window.event;
var keycode = evt.keyCode || evt.which || evt.charCode;
var bt = document.getElementById(buttonid);
if (bt) {
if (keycode == 13) {
evt.cancelBubble = true;
evt.returnValue = false;
if (evt.stopPropagation) {
evt.stopPropagation();
evt.preventDefault();
}
bt.click();
return false;
}
}
}
You don't need javascript just wrap search text box in another panel and set default button, something like this (i stripped table tags) :
<asp:Panel ID="MainPanel" runat="server" DefaultButton="btnAddUser">
<asp:Panel ID="searchPanel" runat="server" DefaultButton="btnSearch">
<asp:TextBox ID="txtFilter" runat="server" Width="200"></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Text="Search"
CausesValidation="false" onclick="btnSearch_Click" />
</asp:Panel>
<asp:Button ID="btnAddUser" runat="server" Text="Add User" Width="85px" CausesValidation="False" onclick="btnAddUser_Click" />
</asp:Panel>