ASP.NET hide Panel on requiredfieldvalidator - c#

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>

Related

How to execute event when user presses return on web page

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>

2 buttons click,1 in master another in content page

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>

Tracking Textbox Entries with Google Analytics

I am trying to capture in google analytics the data that is entered into a textbox. The code that I have so far is below, I am trying to capture the data by Javascript, but I can't seem to get it to work. The CMS Platform I am using is sitecore.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="SalesRepSearch.ascx.cs" Inherits="USEndoscopy.Website.layouts.USEndoscopy.Sublayouts.SalesRepSearch" %>
<%# Import Namespace="USEndoscopy.Library.Search" %>
<script type="text/javascript">
var textbox = document.getElementById('txtZipCode'),
submitButton = document.getElementById('btnSalesRepSearch');
submitButton.onClick = function () {
_trackEvent('data-store', textbox.name, textbox.value, 0);
// 'data-store' can be replaced with whatever category of data you want, for sortability's sake
// the 0 can be replaced with any other numerical data you want - but it must be numerical
}
</script>
<p></p>
<p>
<asp:Panel DefaultButton="btnSalesRepSearch" runat="server">
<asp:TextBox ID="txtZipCode" runat="server" Width="300px"></asp:TextBox>
<asp:Button ID="btnSalesRepSearch" runat="server" CssClass="buttonregular" Text="Search" OnClick="btnSalesRepSearch_Click" />
<asp:RequiredFieldValidator ID="reqTxtZipCode" runat="server" ValidationGroup="ZipCode" ControlToValidate="txtZipCode" Display="Dynamic" ErrorMessage="Please enter a valid US Zip code" CssClass="error"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="regExTxtZipCode" runat="server" ValidationExpression="^\d {5}(-\d{4})?$" ValidationGroup="ZipCode" ControlToValidate="txtZipCode" Display="Dynamic" ErrorMessage="Please enter a valid US Zip code" CssClass="error"></asp:RegularExpressionValidator>
</asp:Panel>
</p>
<p>
<asp:Repeater ID="salesRepContainer" runat="server">
<ItemTemplate>
<%# ((SalesRep)Container.DataItem).RepName %><br />
<%# ((SalesRep)Container.DataItem).Phone %><br />
<%# ((SalesRep) Container.DataItem).Email %><br />
</ItemTemplate>
</asp:Repeater>
</p>
<p>
<sc:Text Field="InternationalMessage" runat="server" />
</p>
Did you check the source code of the rendered HTML? Has the ASP.Net WebControl ID's ended up as something completely different due being nested in the panel?
Maybe you should add a CSS class to these and use document.getElementsByClassName
If you are using jQuery then you could use the attributeEndsWith selector
$('input[id$="txtZipCode"]');
$('input[id$="btnSalesRepSearch"]')
It's because ASP.NET has changed the ID value of your textboxes at the time of rendering them.
If your running .net V4 or greater then add ClientIDMode="Static" to your textbox and
button. This tells .net to not change the ID of your control.
<asp:TextBox ID="txtZipCode" runat="server" ClientIDMode="Static" Width="300px"></asp:TextBox>
<asp:Button ID="btnSalesRepSearch" runat="server" ClientIDMode="Static" CssClass="buttonregular" Text="Search" OnClick="btnSalesRepSearch_Click" />
If your running less than .net 4 change your Javascript to: (.ClientID gets the ID that .net gave the control when it rendered it)
var textbox = document.getElementById('<%= txtZipCode.ClientID %>'),
submitButton = document.getElementById('<%= btnSalesRepSearch.ClientID %>');
UPDATE
You might be having an issue where your javascript function is trying to assign a click function to your button before your button is actually available on the DOM.
So try the following:
Javascript function
function btnSearchClick(){
var textbox = document.getElementById('txtZipCode');
// Change your google code to this:
_gaq.push(['_trackEvent', textbox.name, textbox.value, 0]);
return true;
}
And on your button add the property
onClientClick="return btnSearchClick()"

very simple c# submit button

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.

Setting focus to a button from text box?

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.

Categories