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>
Related
I am wondering how I am able to set the TargetControlID of my ModalPopupExtender to the Button on my ListView.
The button that I am trying to set the TargetControlID to is in the Alternating and Item template on the ListView. So I believe I would need to set the TargetControlID to either two buttons, or have two different ModalPopupExtenders.
Here is my ModalPopupExtender:
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background" OnLoad="mp1_Load">
</cc1:ModalPopupExtender>
And here is the alternating template for my listview:
<AlternatingItemTemplate>
<!--Input fields that do not apply to the question-->
..
..
..
<asp:Button ID="Button1" runat="server" Text="Show Popup" />
</AlternatingItemTemplate>
This will be the exact same setup for the ItemTemplate.
You could use java-script to do the job instead:
<a id="showModalPopupClientButton" href="#">Open pop-up</a>
<a id="hideModalPopupViaClientButton" href="#">Close pop-up</a>
<script type="text/javascript">
// Add click handlers for buttons to show and hide modal popup on pageLoad
function pageLoad() {
$addHandler($get("showModalPopupClientButton"), 'click', showModalPopupViaClient);
$addHandler($get("hideModalPopupViaClientButton"), 'click', hideModalPopupViaClient);
}
function showModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.show();
}
function hideModalPopupViaClient(ev) {
ev.preventDefault();
var modalPopupBehavior = $find('programmaticModalPopupBehavior');
modalPopupBehavior.hide();
}
</script>
UPDATE (using server side)
You need to set a fake server button(display: none) as a target control id to your popup extender first:
<asp:Button ID="Button1" runat="server" Style="display: none;" />
<cc1:ModalPopupExtender ID="mp1" runat="server"
PopupControlID="Panl1" TargetControlID="Button1"
CancelControlID="Button2" BackgroundCssClass="Background"
OnLoad="mp1_Load">
</cc1:ModalPopupExtender>
on your code behind whenever you want to display or close the popup, you just need to call the following functions:
mp1.Show(); //to display popup
mp1.Hide() //to close popup
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>
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>
I have several ImageButtons on the top of my page, then I have a textbox and button in the middle. If you type in the textbox then hit enter on the keyboard the browser follows the link of the first ImageButton instead of the submit button next to the textbox. I have ran into this in the pase and had to put the imagebuttons on the bottom of the page for it to work correctly, that is not an ok fix in this case. I tried setting UseSubmitBehavior="true" , but that does nothing. I tried putting the textbox and button in a separate DIV and a separate panel, didn't work either
TOP of the page
<div style="position:absolute; left: 70% ; top: 5%;">
<asp:ImageButton ID="imgFB" runat="server" ImageUrl="Images/facebook_icon.jpg" PostBackUrl="http://www.facebook.com/832586561" />
<asp:ImageButton ID="imgLI" runat="server" ImageUrl="Images/linkedin_logo.jpg" PostBackUrl="http://www.linkedin.com/pub/scott-selby/33/304/44a" />
<asp:ImageButton ID="imgCB" runat="server" ImageUrl="Images/careerbuilder_logo.jpg" PostBackUrl="http://www.careerbuilder.com" />
<asp:ImageButton ID="imgCP" runat="server" ImageUrl="Images/codeplex_logo.jpg" PostBackUrl="http://www.codeplex.com" />
</div>
Middle of Page
<div ID="formPanel" runat="server" style="position:absolute; top:235px;">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" UseSubmitBehavior="true" />
</div>
You may set the default button via <form/> attribute.
<form defaultbutton="btnChangeCity" id="form1" runat="server">
...
</form>
Or use Panel control to set default button.
<asp:Panel ID="Panel1" runat="server" DefaultButton="btnChangeCity">
<asp:TextBox ID="txtNewCity" runat="server"></asp:TextBox>
<asp:Button ID="btnChangeCity" runat="server" Text="Change City" />
</asp:Panel>
You surround your controls with <div> which is a good idea, but to have it run at all you also need <form>. In case you just didn't include it, the submit button also has to have OnClick="sub" attribute.
Read more here.
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.