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);
});
Related
I have a bit of an odd issue. I am using a modal popup and it requires a button but I call it via code.
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></ajaxToolkit:ToolkitScriptManager>
<ajaxToolkit:ModalPopupExtender ID="MPE" runat="server"
TargetControlID="phantomButton"
PopupControlID="infoPanel"
CancelControlID="closeInfoPanelButton"
DropShadow="true">
</ajaxToolkit:ModalPopupExtender>
<asp:Button ID="phantomButton" runat="server" Text="phantomButton" CssClass="phantomButton" />
PhantomButton is hidden via CSS. I have another text box and when enter is pressed it appears to fire the phantom button which causes the popup. Why would this be happening? Also, how do I disable the button so this doesn't happen?
Check the Default Button property of your modal popup panel (or whatever panel your textbox is in). Most likely this property was set to PhantomButton my mistake. If this is the case, whenever that textbox receives focus and enter is pressed, it will trigger your PhantomButton click event. See here for more info on the default button.
<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 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 am using an ASP datagrid, and I have a ButtonColumn. When the button is rendered to the page, it is a input of type submit. So its a submit button. The button is used for deleting records. But I want to have some javascript that confirms that the user wants to delete the record. The problem that I have is that even if I return false from the confirm method, the submit event still happens...
Here is the Server Side Code that assigns the javascript method to the click event:
Button deleteButton = e.Item.Cells[6].Controls[0] as Button;
if (deleteButton != null)
{
deleteButton.OnClientClick = "confirmDelete()";
}
Here is the ASP.net code that creates the datagrid:
<asp:DataGrid
runat="server"
ID="UsersList"
OnItemCommand="UsersList_ItemCommand"
AutoGenerateColumns="false"
HeaderStyle-CssClass="dataTableHeader"
Width="60%">
<Columns>
<asp:HyperLinkColumn DataNavigateUrlField="Username" DataTextField="Username" HeaderText="Username" DataNavigateUrlFormatString="~/Account/EditUser.aspx?user={0}"/>
<asp:BoundColumn DataField="Email" HeaderText="Email" />
<asp:ButtonColumn Text="Delete" HeaderText="Delete" ButtonType="PushButton" CommandName="DeleteUser" CausesValidation="false" />
</Columns>
</asp:DataGrid>
Here is the Javscript code that confirms the delete:
<script>
function confirmDelete() {
var x = confirm("This action cannot be undone. Are you sure you want to delete this user?");
return x;
}
</script>
Perhaps there is no way to accomplish this with a ButtonColumn. I'm considering changing to a TemplateColumn, and just putting a button in there. But then I will have to redesign the code that handles these click events on the back end, which is currently handled in the ItemCommand handler.
Try:
deleteButton.OnClientClick = "return confirmDelete()";
You need to confirm delete on form.submit(), not deletebutton.click(), but you'll need to either assign an anonymous validation function to form.submit by the deletebutton.click(), or set a delete flag on deletebutton click, then check that value on form.submit(). That way other buttons that you WANT to submit the form still submit. And don't forget to clear the variable/or anon function after validation fails.
Replace the onclick listener on the button with an onsubmit listener on the form that returns false if you don't want to submit the form, something like:
<form onsubmit="return confirmDelete();" ...>
If confirmDelete returns false, the submit is cancelled. If it returns any other value, the form is submitted.
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">