I want to give my users the option to use a textbox and press Enter. The challenge is that I have 5 textbox, and 2 options. 3 textbox belong to one button, and 2 textbox to the other. How do I trigger a particular Button according to the textbox the user was in when he press Enter?
I accomplished this on my own where I had a page with two different login forms for the different user types. What I did was separate the two forms into their own ASP Panel controls and on the panel setting the DefaultButton to whichever one I wished. That way when they finished typing in the form and hit the enter key, it would submit on the correct button.
Example:
<asp:Panel id="panel1" DefaultButton="button1">
<asp:textbox id="textbox1"/>
<asp:textbox id="textbox2"/>
<asp:buton id="button1"/>
</asp:panel>
<asp:panel id="panel2" DefaultButton="button2">
<asp:textbox id="textbox3"/>
<asp:textbox id="textbox4"/>
<asp:button id="button2"/>
</asp:panel>
EDIT: Here is another method of how to do it by assigning an OnKeyPress property to your textboxes. THIS IS A SEPARATE SOLUTION THAN THAT WHICH I DESCRIBED AT THE TOP
Example:
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;
}
}
}
//code behind
TextBox1.Attributes.Add("onkeypress",
"return clickButton(event,'" + Button1.ClientID + "')");
The code behind generates the following code:
<input name="TextBox1" type="text" id="TextBox1" onkeypress="return
clickButton(event,'Button1')" />
In this situation I would group the related textboxes and the button in a Panel. Panel has a DefaultButton property you can use. DefaultButton="IdOfTheDefaultButtonForControlsInThisPanel"
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.panel.defaultbutton.aspx
Using jQuery this is fairly easy to accomplish:
$(function ()
{
$("#id-of-textbox-1, #id-of-textbox2, etc.").keyup(function (e)
{
if (e.keyCode === 13) $("#id-of-submit-button-1").click();
});
// And for the second group
$("#id-of-textbox-3, #id-of-textbox4, etc.").keyup(function (e)
{
if (e.keyCode === 13) $("#id-of-submit-button-2").click();
});
});
If you are using ASP.NET Button controls, be sure to set the property UseSubmitBehavior on those to false.
Related
<input type=text id="txtNum"/>
ex. of button
<asp:Button ID="btnNum1" runat="server" CssClass="btnNumbers" Text="1" />
<asp:Button ID="btnNum5" runat="server" CssClass="btnNumbers" Text="5" />
Basically I have a huge numberpad on my page using Buttons label from 0-9 and backspage and clear. This is going to be for a touchscreen device
I am not sure how to go about when a user touches button1 to place a '1' in my textbox. Then if they hit button5 my textbox value would append the 5 to the 1.
I would like to use javascript to perform this task so it does not do a postback for every button click please help.
The easiest way to prevent the postback is to not use the asp.net button control. Just use standard html button
<button type="button" class="btnNumbers">1</button>
Then just attach to the click event for the button and append it's value to the textbox.
Add following method
$(document).ready(function() { $(".btnNumbers").click(function() { $("#txtNum").val($("#txtNum").val() +$(this).val()); return false; });
});
I am hoping this is easy, but I have looked and can't find a solution that will work for me. I have an aspx page with 2 user controls on it. One is a user control with a spun-up Auto Complete text box, that I want the "Enter" key to to cause a postback.
I have a button in the other control on the page that the onClick does something else. When I put text in the Auto Complete and press enter, the onClick for the button fires. Is there a way to have the enter key not cause the onClick to fire.
I have tried some javascript to disable the enter key press, but that breaks my text box enter.
What are my options.
EDIT 1
Here is some markup that I have
<uc:CompanyAC runat="server" ID="ac" />
<cc2:GenericGridView OnHtmlDataCellPrepared="HtmlDataCellPrepared"
KeyFieldName="CompanyID" ID="gridCompanies" DataSourceID="ManageCompaniesObjectDataSource" runat="server"
AutoGenerateColumns="False" />
The CompanyAC control has a textbox with some jquery that does autocomplete WS call (no need to show that
<asp:TextBox ID="searchbox" runat="server" Width="400px" />
The GenericGridView control contains a button
<asp:Button runat="server" ID="Button" Text="New" AllowFocus="false" OnClick="Button_Click" />
So what happens is that when the Enter Key is hit when the focus is on the Textbox, the button that is in the other control fires its onclick. I do not want that to happen, but I still want the postback to happen
try this
$('input').keypress(function(event){
if(event.keyCode==13)
{
event.preventDefault();
}
})
If you're using jQuery, you might try this:
$('input').on('keypress', function(e){
// Attempt form submit (after event function exits).
var f = $(this).parents('form');
setTimeout(function(){f.submit();}, 1);
// Return false to prevent form submit when enter key is pressed.
return !((window.event) ? window.event.keyCode : e.which)==13);
});
Code :
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
</form>
if I click on an input field and I press Enter, it submits nothing. Why? And how can I decide which page to call, pressing Enter, for each input box?
you set the forms default button:
<form id="Form1"
defaultbutton="SubmitButton"
runat="server">
Or you can do it in code - Page_load:
Page.Form.DefaultButton = btnSearch.UniqueID;
Another helpful tip is that you can set the default button on asp:panel's too. Wrap your 'forms' into a Panel or Multiple panels in form with will give your ability to set multiple submit button per Panel Control:
<asp:Panel runat="server" id="pnlForm1" DefaultButton="btnSubmit">
<asp:Button runat="server" id="btnSubmit"/>
</asp:Panel>
You can put both boxes to separate Panel and set DefaultButton for each Panel.
UPDATE DefaultButton will work if you use Button, LinkButton works only in IE, there are some workarounds :
set linkbutton as default button for asp:panel in asp.net
Reusable Page_PreRender function in asp.net
Use Jquery to resolve it:
$(document).ready(function () {
$('body').bind('keypress', function (e) {
var code = (e.keyCode ? e.keyCode : e.which);
var button = $("#<%= SubmitButton.ClientID %>");
if (button != null && code == 13) {
button.click();
}
});
})
or in C#
Page.Form.DefaultButton = SubmitButton.UniqueID;
HtmlForm.DefaultButton Property
Using Panel.DefaultButton property with LinkButton control in ASP.NET
I have a asp.net Text Box which accepts date in the format MM/DD/YYYY. After entering the date i will hit enter key.if enter key i need to execute server side code.How can we achieve this ?
The problem with Text box is it will fire the Text Changed event only if it looses the focus.
You can use the Panel.DefaultButton property to automatically click a button when the user presses Enter.
For example:
<asp:Panel Id="panel1" runat="server" DefaultButton="btnSubmit">
<asp:TextBox Id="txtDate" runat="server" />
<asp:Button Id="btnSubmit" Text="Submit" OnClick="btnSubmit_Click" runat="server" />
</asp:Panel>
If you don't want to show the button, you can set its style="display: none".
you set jquery tag
so using jquery u can try something like this
$("#field").keydown(function(e){
if(e.keyCode === 13)
{
// enter event
}
});
Use the keydown event:
textBox.Attributes.Add("onKeyDown", "KeyDownHandler()");
Have KeyDownHandler() check the pressed key and if correct, submit the surrounding form or invoke an AJAX request. See keyboard codes at Javascript Char Codes.
Alternatively, textbox ID can be injected into jQuery from .aspx and assigned a direct keydown handler:
$('#<%=textBox.clientID%>').keydown(function (e) { /* Do server request; */ });
You can call this Javascript function to check whether enter key has been pressed or not.
function checkEnterKeyPress(e)
{
var key;
if(window.event)
key = window.event.keyCode; //IE
else
key = e.which; //firefox
if (key == 13){
alert(key);
}
}
I have a ASP.NET form that has a search box, with a Go button. When you first visit the page and type in the search you can hit enter to click the go button. Then when presented with the list of results you click another button to mark the selected result for use. Then I allow the user to repeat to their hart's content to select multiple results. However the 2nd+ time that you enter a search query and hit enter it clicks the button instead of the button. You can see in the browser (IE7+) that the button is selected dispite you typing into the search field. How can I revert it so that after ever button press it selects the button as default?
I've tried using btnGo.Focus() in the button's onClick but that has no effect.
You can do a couple things.
Set the DefaultButton property of the form to the ID of your search button. This can work in a few situations, but lots of people have trouble with it, especially with complex or dynamic forms. Give it a try, simplest is best.
<form runat="server" DefaultButton="btnSearch"> ....
Add a javascript handler to the textbox in question, such that no matter the structure of the page, it will always click the search button when they press enter. The easiest way to do it would be with jQuery:
$("#myTextBox").keydown(function(e) {
if (e.keyCode == 13)
{
__doPostBack('" + <%= btnSearch.UniqueID + "','')");
}
});
but you could do something similar in the codebehind by adding an attribute to the textbox:
myTextBox.Attributes.Add("onKeyPress", "if (event.keyCode == 13) ... ")
<asp:Panel ID="pnl1" runat="server" DefaultButton="ImageButton1">
<asp:TextBox ID="TextBox1" runat="server">
</asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Submit" />
<asp:ImageButton ID="ImageButton1" runat="server" />
</asp:Panel>
or
http://weblogs.asp.net/jeff/archive/2005/07/26/420618.aspx
This should work:
<script language="javascript" type="text/javascript">
function FocusButton() {
var btn = document.getElementById('<%= btnGo.ClientID %>');
btn.Focus();
}
</script>
Then on your search textbox
<asp:TextBox ID="SearchTxt" runat="server" onClick="FocusButton">