I have a few text boxes and buttons on my form.
Lets say txtBox1 is next to btnSubmit1,
txtBox2 is next to btnSubmit2,
txtBox3 is next to btnSubmit3.
How can I set the focus on btnSubmit3 when the user starts to type something in txtBox3.
Meaning..... if a user type in a text box the program will know what button to fire when the user press the enter key.
If you use a panel, you should be able to set a defaultbutton. I´m not sure if it´s an win forms application or a web forms application, but this is how you should do it with web forms:
<asp:Panel id="panel1" runat="server" DefaultButton="Button1">
<asp:TextBox id="textbox1" runat="server" />
<asp:Button id="Button1" runat="server" Text="Button 1" />
</asp:Panel>
<asp:Panel id="panel2" runat="server" DefaultButton="Button2">
<asp:TextBox id="textbox2" runat="server" />
<asp:Button id="Button2" runat="server" Text="Button 2" />
</asp:Panel>
<asp:Panel id="panel3" runat="server" DefaultButton="Button3">
<asp:TextBox id="textbox3" runat="server" />
<asp:Button id="Button3" runat="server" Text="Button 3" />
</asp:Panel>
Use JavaScript and add a "onblur" for those TextBoxes...
Example:
<asp:TextBox ID="t1" runat="server" onblur="CheckIfTextBox1ShouldFocusOnButton1();" />
:)
I've seen it done like this but don't ask me to explain it or to say what the pros and cons are over any other method. Just thought I would publish it in case its useful to you.
// Fires a particular event when enter is pressed within a textbox.
function FireButtonOnEnter(controlID)
{
if((event.which ? event.which : event.keyCode) == 13)
{
window.event.returnValue = false;
window.event.cancelBubble = true;
document.getElementById(controlID).click();
}
}
Call it by adding the following for the textbox...
txtOrgName.Attributes.Add("OnKeyDown", String.Format("return FireButtonOnEnter('{0}');", btnOrgNameGo.ID));
This is an easy solution if you know that the only browser being used is IE.
You just have to add to the Page load
txtBox1.Attributes.Add("onKeyPress", "javascript:if (event.keyCode == 13)
__doPostBack('" + btnSubmit1.UniqueID + "','')");
txtBox2.Attributes.Add("onKeyPress", "javascript:if (event.keyCode == 13)
__doPostBack('" + btnSubmit2.UniqueID + "','')");
txtBox3.Attributes.Add("onKeyPress", "javascript:if (event.keyCode == 13)
__doPostBack('" + btnSubmit3.UniqueID + "','')");
The reason that this only works in IE is that it uses the Javascript "event" key word that doesn't work in Firefox.
Related
I have an ASP.NET website and I have a forgot password page where the user enters their email address in a text box and when they click the button to retrieve password, the event runs as fine.
Only problem is if the user types in their email address and presses ENTER instead, it runs a search (I have a search bar at the top of the page) and so the result comes back as 'search query not found'. But this search bar at the top is on a different ASP.NET page.
So anyway, I want the event onclick to run when the user presses enter and not run a search query. Does anyone have any ideas? I've searched on this site but not really found the answer I need.
There are couple ways you can do this. If it is a webform and you have your textbox wrapped with an asp:panel you can do as below:
<asp:Panel ID="p" runat="server" DefaultButton="myButton">
<%-- Text boxes here --%>
<asp:Button ID="myButton" runat="server" />
</asp:Panel>
If its not a webform or you want to move away from that try below:
<asp:TextBox ID="TextBox1" runat="server" onkeypress="return EnterEvent(event)"></asp:TextBox>
<asp:Button ID="Button1" runat="server" style="display:none" Text="Button" />
function EnterEvent(e) {
if (e.keyCode == 13) {
__doPostBack('<%=Button1.UniqueId%>', "");
}
}
And in the codebehind fire your button click in the page load based on the parameters of the postback.
Specify the "defaultbutton" property to the ID of (event you want to fire).
You can specify the "defaultbutton" property at the Form level (in the form tag)
Or else you can define them at panel level in the tag.
The form level setting is overridden at the panel level setting.
The Event Handler for the specified button gets fired simulating a true submit button functionality.
<form id="sampleform" runat="server" defaultbutton="button1">
<div>
<asp:TextBox ID="textBox1" runat="server"></asp:TextBox>
<asp:Button ID="button2" runat="server" Text="Cancel" OnClick="Button2_Click" />
<asp:Button ID="button1" runat="server" Text="Ok" OnClick="button1_Click" />
<asp:Panel ID="panel1" runat="server" defaultbutton="Button5">
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBox5" runat="server"></asp:TextBox>
<asp:Button ID="Button5" runat="server" Text="Button5" OnClick="Button5_Click" />
</asp:Panel>
</div>
</form>
In this example, Button1 is the default button for the form (Type something in Textbox 1 and hit enter, button1_Click gets fired). But for "Panel 1", default button will be Button 5 (Type in Textbox3 or Textbox 5 and hit enter).
You can have any number of panels with different default button for each panel.
Adding an ASP Panel around the text box and button with the id of the button name as the property for DefaultButton was the best way to do this.
<asp:Panel ID="p" runat="server" DefaultButton="myButton">
<%-- Text boxes here --%>
<asp:Button ID="myButton" runat="server" />
</asp:Panel>
In Internet Explorer if I hit enter in the TextBox P it submits the Form using the onclick event of LoginButton.
This is what I want to happen.
In Google Chrome if I hit enter it submits the form with the onclick of Button1.
This is not what I want to happen.
Button1 is actually not visible on the form under normal circumstances. It is made visible under certain circumstances to do a different task then login.
How can I force this, browser independently, to always use LoginButton onclick when someone presses enter?
<asp:TextBox ID="P" runat="server" TextMode="Password" Width="150"></asp:TextBox>
<asp:LinkButton CssClass="button" ID="LoginButton"
runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1"
onclick="LoginButton_Click" />
<asp:Button
ID="Button1" runat="server"
Text="Submit" onclick="Button1_Click" />
You set the forms default button:
<form id="Form1" defaultbutton="SubmitButton" runat="server">
The Following works for me.
<form id="form1" runat="server" defaultbutton="LoginButton">
<div>
<asp:TextBox ID="P" runat="server" TextMode="Password" Width="150"></asp:TextBox>
<asp:LinkButton CssClass="button" ID="LoginButton"
runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1"
OnClick="LoginButton_Click" />
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" > </asp:button>
</div>
</form>
You'll probably want to set a default button in your Page_Load method, like this:
this.Form.DefaultButton = this.LoginButton.UniqueID;
I ended up using C# in my Page_Load(object sender, EventArgs e) method to set the DefaultButton. Found this on another stackoverflow post.
https://stackoverflow.com/a/2213237/2907463
this.Form.DefaultButton = Login1.FindControl("LoginButton").UniqueID;
I have an AspxCallback control that is supposed to update textbox text when i click the Button. But nothing happens when I click the button.
Here is my sample code for the test:
C#:
protected void callback_Callback(object source, DevExpress.Web.ASPxCallback.CallbackEventArgs e)
{
txtTest.Text = "Text for Textbox";
}
ASP.NET:
<asp:Button ID="btnTest" runat="server" Text="CLICK" OnClientClick="callback.PerformCallback(); return false;" />
<br />
<asp:TextBox ID="txtTest" runat="server" Width="200" Height="25"></asp:TextBox>
<dx:ASPxCallback ID="callback" runat="server" ClientInstanceName="callback"
oncallback="callback_Callback">
</dx:ASPxCallback>
"Your problem resides on the fact that the TextBox is not inside a CallBack Panel.
The way a callback works is like an ajax call that can update only the Ajax enabled so to say controls. Those controls can be put inside a callback panel for this exact reason.
<dxcp:ASPxCallbackPanel ID="ASPxCallbackPanel1" runat="server" Width="223px" BackColor="#FFFFC0" ClientInstanceName="callbackPanel1" Height="78px" oncallback="callback_Callback">
<PanelCollection>
<dxp:panelcontent runat="server">
<asp:Button ID="btnTest" runat="server" Text="CLICK"
OnClientClick="callbackPanel1.PerformCallback(); return false;" />
<br />
<asp:TextBox ID="txtTest" runat="server" Width="200" Height="25"></asp:TextBox>
</dxp:panelcontent>
</PanelCollection>
</dxcp:ASPxCallbackPanel>
I think this will solve your problem. Now your code will update the TextBox properly.
I have Logout button in master page in my website.
Now i had made a content page belonging to master page, in that i have 1 textbox and 1 button. In this page i have done coding of search on a button click of a value written in textbox. but when i enter some text in a textbox and just make enter click it calls the logout button which is in master page.
I just want that when i write some text in textbox and press enter, it should call a button where the search coding is done.
If you are using normal ASP.NET, you can surround your textbox and button with a Panel. On that panel you can set the property "DefaultButton". Every control in this panel will trigger that DefaultButton when trying to submit form via the Enter keypress.
<asp:Panel runat="server" DefaultButton="btnSearch">
<asp:TextBox runat="server" ID="txtSearch" Text="" />
<asp:Button runat="server" ID="btnSearch" Text="Search" />
</asp:Panel>
You have to use default panel. try this, I hope this will help you
<div id="search">
<asp:Panel ID="defaultpanel" runat="server">
<asp:TextBox ID="txtSearch" runat="server" Text=""></asp:TextBox>
<asp:Button ID="btnSearch" runat="server" Text="Go" OnClick="btnSearch_Click"
TabIndex="0" />
</asp:Panel>
and add the script as
<script type="text/javascript">
$('[id*=txtSearch]').keydown(function (e) {
var code = e.keyCode || e.which;
//alert("jj");
if (code === 13)
{
e.preventDefault();
$("[id*=btnSearch]").trigger('click');
}
});
</script>
I have a simple web page that has few asp panels. I make a search of record from database and these panels are made visible on the page.
but when, say, i enter an invalid value in the textbox to check whether the RequiredFieldValidator is working fine or not, the Error message is displayed. But the Panels that are already visible on the form are not hidden.
I understand, that because the form is not making a post back, therefore these panels are not set to invisible. Can something please guide me as to how to hide these panels if the requiredfieldvalitor throws an error?
You would either have to disable ClientValidation to allow a postback, or use custom JavaScript. If a visible postback is an issue, you can easily use UpdatePanels.
Attach dependent elements by data-dependentClass of validator and place this script below form closing tag
<form id="form1" runat="server">
<asp:TextBox ID="TextBox1" runat="server" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
Text="*" data-dependentClass="addressValidation" />
<br />
<asp:TextBox ID="TextBox2" runat="server" />
<br />
<asp:Button runat="server" Text="Click Me" />
<hr />
<asp:Panel runat="server" ID="Panel1" CssClass="addressValidation">
Rendered at:
<%= DateTime.Now.ToLongTimeString() %>
</asp:Panel>
</form>
<script type="text/javascript">
var originalValidatorUpdateDisplay = ValidatorUpdateDisplay;
ValidatorUpdateDisplay = function (val) {
originalValidatorUpdateDisplay.call(null, val);
var dependentClass = val.getAttribute("data-dependentClass");
if (dependentClass) {
elements = document.getElementsByClassName(dependentClass);
for (var i = 0; i < elements.length; i++) {
elements[i].style.display = val.isvalid === false ? "none" : "";
}
}
}
</script>