Question

I have a page with multiple textboxes and each has a button associated with it. This works as a search ‘hub’, I suppose, where the user can search by ID, name etc.

When entering a search term for e.g. name however, pressing enter ‘clicks’ the very first button on the page (ID search), causing an error if the associated textbox is empty (which it would be if someone meant to search by name).

I have attempted to rectify this using JQuery, and have written the following:

$('input:text').click(function (e) {
            e.preventDefault();
            $(this).next('input:button').focus();
    });

I’m simply using the click event so that I can monitor where focus is redirected, but eventually I would use .keypress. However, nothing happens upon clicking a textbox and I can’t see for the life of me what is wrong with the JQuery.

Any advice would be greatly appreciated!

To elaborate on the problem, the .NET code used looks similar to the following throughout the page.

<tr>
    <td style="width:100">Company ID</td>
    <td style="margin-left:3px;">
      <asp:TextBox ID="...TextBox" runat="server" Width="230px"></asp:TextBox>
    </td>
    <td>
    <asp:Button CssClass="Button" ID="...NameSearch" Text="Search" runat="server" /></td></tr>

This is generating this (view source):

<td><input name="...TextBox" id="...TextBox" style="width: 230px;" type="text"/></td>
<td><input name="...NameSearch" class="Button" id="...NameSearch" onclick="javascript:__doPostBack('...NameSearch','')" type="button" value="Search"/></td>

Answer 1

$('input:text')keydown(function(e) {
  if (e.keyCode == 13) {
    $("input:submit", $(this).closest('tr')).eq(0).focus();
  }
}