When pressing enter in textbox, how do I focus on submit button using JQuery?
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>
$('input:text')keydown(function(e) {
if (e.keyCode == 13) {
$("input:submit", $(this).closest('tr')).eq(0).focus();
}
}
Are these submit buttons? If so clicking on one will submit the data for all of them. It sounds more like an HTML problem than jQuery. Could you link the site?
Instead of trying to focus the button you want to click, cancel the submit request by the textfield, and instead trigger a click on whatever button you want.
If you're just trying to automatically click the button when you press enter in the text box, you don't need jquery to do this. Look into the DefaultButton
property of the asp Panel control
<asp:Panel runat="server" DefaultButton="myButton">
<asp:TextBox runat="server" ID="myTextBox" />
<asp:Button runat="server" ID="myButton" Text="Click" />
</asp:Panel>
You can't use next() because the textbox and the button are not on the same level of the DOM. Your button has an ID, you could use $('#...NameSearch').focus();
Is your submit button the exact next sibling of the textbox? If not, then the next()
function is not what you want. If there is anything else in the dom between the two, you can use nextAll()
to find it instead.
Update
Now that you have added your markup to the question, I can see why neither of these next() functions work -- your button is not a sibling of the textbox (because they are wrapped in separate table cells).
精彩评论