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
Related
On my page there is update panel and one text box and button inside same update panel. after i set enter key as default button for update panel. After multiple post back actually after third post back focus is set to the back button of browser. where as i want to set focus to the text box. i tried to set focus to the first text box by using below option which i have written at last line of button event.
1. option => Page.SetFocus(txtOrdertoAdd.ClientID);
2. option => txtOrdertoAdd.Focus();
3. option => Page.ClientScript.RegisterStartupScript(this.GetType(), "Script", "SetFocus(" + txtOrdertoAdd.ClientID + ");</script>");
4. option => ScriptManager.RegisterStartupScript(this, this.GetType(), "selectAndFocus", "$get('" + txtOrdertoAdd.ClientID + "').focus();", true);
i am facing this wired issue specifically in IE where its working fine in fire fox and chrome.Can any one how can i resolve this issue.
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Panel runat="server" ID="Panel1" DefaultButton="Button1">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
and this:
protected void Button1_Click(object sender, EventArgs e)
{
TextBox1.Text = TextBox1.Text + "1";
TextBox1.Focus();
}
Works fine on IE11.
Can you show what you have?
I have a simple JQuery enabled ASP.NET page:
<script>
$(document).ready(function() {
$("#accordion").accordion();
});
</script>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div id="accordion">
<h3><a id="Accordion1" href="#">Accordion Panel 1</a></h3>
<div>
A form input...
<asp:Button id="btnSubmit" runat="server" onclick="btnSubmit_Click" />
</div>
<h3><a id="Accordion2" href="#">Accordion Panel 2</a></h3>
<div>
Some content...
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
If you'll notice, I'm using an UpdatePanel also.
btnSubmit_Click event does something like this:
protected void btnSubmit_Click(object sender, EventArgs e)
{
//Some MySql INSERT, etc.
}
Now what I want to do is for server-side btnSubmit_Click to trigger JQuery to "click" Accordion Panel 2 (so it will open Accordion Panel 2 and close 1). How to do this?
UPDATE: Sorry guys I forgot to mention earlier that It's got an UpdatePanel
Oh well, I just used the "change the value of a hiddenfield after postback then let jquery read that hiddenfield" approach. Thanks guys!
Jquery:
var tag = $("#contentBody_hfTag1").val();
if (tag=="1") { $(".Accordion").accordion({ active: 1 }); }
else { $(".Accordion").accordion({ active: 0 }); }
.aspx
<asp:HiddenField ID="hfTag1" ClientIDMode="Predictable" Value="0" runat="server" />
C#
protected void btnMyButton_Click(object sender, EventArgs e)
{
hfTag1.Value = "1";
}
You can't. Jquery runs on the client, your handler is on the server. You will need to trigger the event on the client when the page reloads after the post back.
You can't do that as Jquery works on client side, from a server side event, as the page reloads. And the state of the accordion will be lost. So what you can do is, instead of making a post back, you can do the same work in a Jquery AJAX call on the button click to do whatever you want and then close the accordion 1 and show accordion 2.
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<i88:InlineScript runat="server">
<script type="text/javascript">
$('Accordion2').click()
</script>
</i88:InlineScript>
<asp:Button ID="cmd" runat="server" Text="Update" />
</ContentTemplate>
</asp:UpdatePanel>
You can put inlineScript which will get Executed every time you update the Panel.
You can also use jQuery.Trigger(); for other event's.
On a ASP.Net page, I am in front of a problem only with IE. Here is the description.
On a page, there is two buttons and one label. The first button is visible and calls a JS function on the click event. This JS function calls the click function of the second button. The second button has an C€ event handler on the click event. The C# event handler edit the label.
In Firefox : the label is correctly edited after the clicks.
In IE (8) : the label is not edited, despite the C€ event handler has been correctly hit.
Also, I observed, in IE, that the Page_Load event is called two times after the JS button click :
Page_Load
button2_OnClick => change of the Label Text
Page_Load => The Label Text is reset :(
In Firefox, the Page_Load is called only once.
My question is : how to make IE refresh correctly the page as Firefox does after a JS button click ?
Below is the sample test code :
1) Page ASPX
<head runat="server">
<title></title>
<script type="text/javascript">
function button1Click(sender, args) {
var button2 = document.getElementById("button2");
button2.click();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button runat="server" ID="button1" Text="Click-me!" OnClientClick="button1Click();" />
<asp:Button runat="server" ID="button2" Text="Second" OnClick="button2_OnClick" style="display:none" />
<p />
<asp:Label runat="server" ID="label1" Text="Init" />
</div>
</form>
</body>
</html>
2) C# code-behind :
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void button2_OnClick(object sender, EventArgs e)
{
label1.Text = "Changed";
}
}
The ID of your button will not be button1 or button2 when it's rendered. It will probably be something like ctl001_button1. Therefore your javascript will not work. In ASP.NET 4 you can override this behaviour by using an assigned ClientID.
<asp:Button runat="server" ID="button1" Text="Click-me!"
OnClientClick="button1Click();" ClientIDMode="Static" />
<asp:Button runat="server" ID="button2" Text="Second"
OnClick="button2_OnClick" style="display:none" ClientIDMode="Static" />
As an aside, this alludes to the main problem with ASP.NET Winforms - it tricks developers into thinking that the web is a connected environment.
What actually happens when you click an <asp:Button /> element by default is that a postback is invoked. I.e. Your browser sends a request to the server for a new page. It sends up something called ViewState which is how the server knows what you've done and what to render. There is no "event" handled as such.
I think the problem is with the way you are trying to get the hidden button
var button2 = document.getElementById("button2");
maybe change this to
var button2 = document.getElementById("<%= button2.ClientID %>");
After the buttons are rendered in the browser, the ID is changed by the ASP.Net engine, and not the same as your source.
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid.aspx
Hope this helps.
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">
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.