I am very new to C# asp.net. I am trying to make an online registration form. I am struggling with the below issue. Can someone help me out please?
There are 5 fields for this problem
1) Category : this is a radio button which has 2 options -> Student and Staff
2) Course : this is a Dropdown
3) Semester : this is a Dropdown
4) Department : this is a Free text field
5) Designation : this is a Free text field
If an end user selects Student radio button, then Course & semester fields should be visible and department & designation should NOT be visible
If an end user selects Staff radio button, then department & designation fields should be visible and Course & semester should NOT be visible
Can someone please help me accomplish this.
Here is the code.
<div class="col-lg-10">
<div class="radio">
<label>
<asp:RadioButtonList ID="category" runat="server">
<asp:ListItem Text="Student" Value="student"></asp:ListItem>
<asp:ListItem Text="Staff" Value="staff"></asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator21" runat="server" ControlToValidate="category" ErrorMessage="Category is Requried" Style="color: #58CB00"></asp:RequiredFieldValidator>
</label>
</div>
</div>
</div>
<div class="Department">
<asp:Label ID="Label3" runat="server" Text="Department*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label><br />
<div class="col-lg-10">
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control ddl">
<asp:ListItem>Select your department</asp:ListItem>
<asp:ListItem>Administration</asp:ListItem>
<asp:ListItem>IT Solutions</asp:ListItem>
<asp:ListItem>B.Tech(CSE)</asp:ListItem>
<asp:ListItem>MCA</asp:ListItem>
<asp:ListItem>iMBA</asp:ListItem>
<asp:ListItem>English</asp:ListItem>
<asp:ListItem>Library</asp:ListItem>
<asp:ListItem>Others</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<br />
<div class="Designation">
<asp:Label ID="Label4" runat="server" Text="Designation*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
<div class="col-lg-10">
<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox2" ErrorMessage="Designation is Requried" Style="color: #58CB00"> </asp:RequiredFieldValidator>
</div>
</div>
<div class="Course">
<asp:Label ID="Label5" runat="server" Text="Course*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
<div class="col-lg-10">
<asp:DropDownList ID="DropDownList2" runat="server" CssClass="form-control ddl">
<asp:ListItem>B.Tech(CSE)</asp:ListItem>
<asp:ListItem>MCA</asp:ListItem>
<asp:ListItem>iMBA</asp:ListItem>
<asp:ListItem>English</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<br />
<div class="Semester">
<asp:Label ID="Label6" runat="server" Text="Semester*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
<div class="col-lg-10">
<asp:DropDownList ID="DropDownList3" runat="server" CssClass="form-control ddl">
<asp:ListItem>I</asp:ListItem>
<asp:ListItem>II</asp:ListItem>
<asp:ListItem>III</asp:ListItem>
<asp:ListItem>IV</asp:ListItem>
<asp:ListItem>V</asp:ListItem>
<asp:ListItem>VI</asp:ListItem>
<asp:ListItem>VII</asp:ListItem>
<asp:ListItem>VIII</asp:ListItem>
<asp:ListItem>IX</asp:ListItem>
<asp:ListItem>X</asp:ListItem>
</asp:DropDownList>
</div>
</div>
You can easily do it with jQuery like this:-
$(document).ready(function () {
$('input[name="category"]').change(function () {
if ($.trim($(this).val()) == "student") {
$('.Department,.Designation').hide();
$('.Designation,.Course').show();
}
else {
$('.Department,.Designation').show();
$('.Designation,.Course').hide();
}
});
});
You need to import the jQuery library.
Using category_SelectedIndexChanged we can able to achieve it
.Aspx Code
<div class="col-lg-10">
<div class="radio">
<label>
<asp:RadioButtonList ID="category" runat="server" AutoPostBack="true" OnSelectedIndexChanged="category_SelectedIndexChanged">
<asp:ListItem Text="Student" Value="student"></asp:ListItem>
<asp:ListItem Text="Staff" Value="staff"></asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="RequiredFieldValidator21" runat="server" ControlToValidate="category" ErrorMessage="Category is Requried" Style="color: #58CB00"></asp:RequiredFieldValidator>
</label>
</div>
</div>
<div class="Department" id="department" runat="server" >
<asp:Label ID="Label3" runat="server" Text="Department*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label><br />
<div class="col-lg-10">
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control ddl">
<asp:ListItem>Select your department</asp:ListItem>
<asp:ListItem>Administration</asp:ListItem>
<asp:ListItem>IT Solutions</asp:ListItem>
<asp:ListItem>B.Tech(CSE)</asp:ListItem>
<asp:ListItem>MCA</asp:ListItem>
<asp:ListItem>iMBA</asp:ListItem>
<asp:ListItem>English</asp:ListItem>
<asp:ListItem>Library</asp:ListItem>
<asp:ListItem>Others</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<br />
<div class="Designation" id="desig" runat="server">
<asp:Label ID="Label4" runat="server" Text="Designation*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
<div class="col-lg-10">
<asp:TextBox ID="TextBox2" runat="server" CssClass="form-control"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox2" ErrorMessage="Designation is Requried" Style="color: #58CB00"> </asp:RequiredFieldValidator>
</div>
</div>
<div class="Course" id="cour" runat="server">
<asp:Label ID="Label5" runat="server" Text="Course*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
<div class="col-lg-10">
<asp:DropDownList ID="DropDownList2" runat="server" CssClass="form-control ddl">
<asp:ListItem>B.Tech(CSE)</asp:ListItem>
<asp:ListItem>MCA</asp:ListItem>
<asp:ListItem>iMBA</asp:ListItem>
<asp:ListItem>English</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<br />
<div class="Semester" id="sem" runat="server">
<asp:Label ID="Label6" runat="server" Text="Semester*" CssClass="col-lg-2 control-label" Font-Size="Larger"></asp:Label>
<div class="col-lg-10">
<asp:DropDownList ID="DropDownList3" runat="server" CssClass="form-control ddl">
<asp:ListItem>I</asp:ListItem>
<asp:ListItem>II</asp:ListItem>
<asp:ListItem>III</asp:ListItem>
<asp:ListItem>IV</asp:ListItem>
<asp:ListItem>V</asp:ListItem>
<asp:ListItem>VI</asp:ListItem>
<asp:ListItem>VII</asp:ListItem>
<asp:ListItem>VIII</asp:ListItem>
<asp:ListItem>IX</asp:ListItem>
<asp:ListItem>X</asp:ListItem>
</asp:DropDownList>
</div>
</div>
.CS code
protected void category_SelectedIndexChanged(object sender, EventArgs e)
{
if(category.SelectedValue =="student")
{
cour.Visible = true;
sem.Visible = true;
department.Visible = false;
desig.Visible = false;
}
else
{
cour.Visible = false;
sem.Visible = false;
department.Visible = true;
desig.Visible = true;
}
}
Related
I have a page with textboxes where a user enters their name and address. I also have ASP.NET requiredfieldvalidators associated with each of the input textboxes to verify that they enter in their info. Everything works for validating the fields from C# server-side, however, I need to validate them from client-side as well. I have an OnClientClick and OnClick events tied to a button.
When the OnClientClick function is called, I want to verify that the requiredfieldvalidators are valid (i.e. user entered info into input boxes) and if so, then I am wanting to start a JS timer that will do something after a certain period of time elapses. In the meantime, the Onclick server-side event fires and executes code to insert input into database. The server-side code is executing correctly in that my if (Page.IsValid) is correct.
If student did not enter info into all required fields, then it is false and does not execute the rest of the code. If student did enter all info, then inserts into DB. However, in the client-side code, when I execute if (Page_ClientValidate()) it ALWAYS returns true even if no fields have been filled out.
What am I missing? I want to say if "validation is successful (i.e. all fields have been entered) then start timer, otherwise do not start timer". Below is short snippet of my code. So when client-side function "Test()" is called, it is always saying 'true' even when inputs are empty, but the server-side function shows Page.IsValid is false, stops and shows the validator messages (which are defined in server-side function during Page_Load()). Why does client-side always give me true but server-side is false?
Client:
<%# Page Language="c#" CodeBehind="test1.aspx.cs" AutoEventWireup="false" Inherits="test1" %>
<!DOCTYPE html>
<html>
<head>
<title>xyz</title>
</head>
<body>
<form id="Form1" method="post" runat="server">
<div id="webPage">
<h3 class="section-title" align="left">User Information</h3>
<div class="grid-row no-padding">
<div class="grid-col-xs-12">
<div class="grid-row no-padding">
<div class="grid-col-xs-12">
<div class="form-field" style="padding-bottom: 0px; margin-bottom: 0px;">
<p><span style="color: blue;">Name on Card</span></p>
</div>
</div>
</div>
<div class="grid-row no-padding">
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">First Name:</label>
<asp:TextBox ID="tbBillFirstName" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvFirstName" ControlToValidate="tbBillFirstName" Display="Dynamic" runat="server"
Font-Names="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19"></asp:RequiredFieldValidator>
</div>
</div>
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">Last Name:</label>
<asp:TextBox ID="tbBillLastName" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvLastName" ControlToValidate="tbBillLastName" Display="Dynamic" runat="server"
Font-Names="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19"></asp:RequiredFieldValidator>
</div>
</div>
</div>
<div class="grid-row no-padding">
<div class="grid-col-xs-12">
<div class="form-field" style="padding-bottom: 0px; margin-bottom: 0px;">
<p><span style="color: blue;">Billing Address</span></p>
</div>
</div>
</div>
<div class="grid-row no-padding">
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">Street1:</label>
<asp:TextBox ID="tbBillAddress1" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvAddress1" ControlToValidate="tbBillAddress1" Display="Dynamic"
Font-Names="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19" runat="server"></asp:RequiredFieldValidator>
</div>
</div>
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">Street2:</label>
<asp:TextBox ID="tbBillAddress2" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
</div>
</div>
</div>
<div class="grid-row no-padding">
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">City:</label>
<asp:TextBox ID="tbBillCity" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvBillCity" ControlToValidate="tbBillCity" Display="Dynamic" runat="server" Font-Names="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19"></asp:RequiredFieldValidator>
</div>
</div>
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">State:</label>
<asp:DropDownList ID="StatesDDL" runat="server" DataTextField="State_name" DataValueField="State_code" CssClass="input-textbox editable" AutoPostBack="False" BackColor="#fff2e6"></asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvBillState" ControlToValidate="StatesDDL" Display="Dynamic" InitialValue="Select" runat="server" Font-Name="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19"></asp:RequiredFieldValidator>
</div>
</div>
</div>
<div class="grid-row no-padding">
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">Zip:</label>
<asp:TextBox ID="tbBillZip" runat="server" CssClass="input-textbox editable" BackColor="#fff2e6"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvBillZip" ControlToValidate="tbBillZip" Display="Static"
runat="server" Font-Names="Arial" Font-Size="10" Font-Bold="False" ForeColor="#ff8c19"></asp:RequiredFieldValidator>
<asp:CustomValidator ID="cvZip" Font-Names="Arial" Font-Size="10" Font-Bold="False"
ForeColor="#ff8c19" runat="server" Display="Dynamic" ControlToValidate="tbBillZip"
OnServerValidate="CheckZipFormat"></asp:CustomValidator>
</div>
</div>
<div class="grid-col-xs-6" style="min-width:200px;">
<div class="form-field">
<label class="formlabel">Country:</label>
<asp:DropDownList ID="ddlCountry" runat="server" DataTextField="Country_name" DataValueField="Country_code"
OnSelectedIndexChanged="CountryChanged" AutoPostBack="True"
CssClass="input-textbox editable" BackColor="#fff2e6">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvCountry" runat="server" ControlToValidate="ddlCountry"
Display="Dynamic" Font-Names="Arial" Font-Size="10" Font-Bold="False"
ForeColor="#ff8c19" InitialValue="00"></asp:RequiredFieldValidator>
</div>
</div>
</div>
</div>
</div>
<div id="divSubmit" class="grid-row bottom-nav">
<div class="grid-col-xs-12" style="text-align:center;">
<asp:LinkButton ID="btn_submit2" runat="server" OnClientClick="Test();" OnClick="btn_submit_Click" CssClass="button button-orange" CausesValidation="true">Submit</asp:LinkButton>
</div>
</div>
</div>
<script type="text/javascript">
function Test() {
if (Page_ClientValidate()) {
alert('valid');
}
else {
alert('not valid');
}
}
</script>
</form>
</body>
</html>
Server-side:
public void btn_submit_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
// insert into DB
}
}
I have one asp dropdownlist. And I want to select value by came from client side. I can got data from client side but i can not set it my asp dropdownlist by js
HTML
<div class="col-md-6 form-group">
<asp:Label ID="ATRRegionCountryLabel" AssociatedControlID="ATRRegionCountryDropDownList" CssClass="col-sm-4 control-label" runat="server" Text="Country" />
<p class="col-sm-8">
<asp:DropDownList ID="ATRRegionCountryDropDownList" CssClass="form-control select" data-live-search="true" data-callback="hotels.aspx?cmd=city" data-related="select-location" runat="server" ClientIDMode="Static">
<asp:ListItem Value="0" Text="Please Select" />
</asp:DropDownList>
</p>
</div>
JS
$(document).on('click', '#btn-region-edit', function (e) {
e.preventDefault();
var $this = $(this),
id = $this.data('id'),
name = $this.data('name'),
country = $this.data('country');
$("#<%=ATRRegionCountryDropDownList.ClientID%>").val('210');
alert(country);
});
I solve it like below codes
HTML
<div class="col-md-6 form-group">
<asp:Label ID="ATRRegionCountryLabel"
AssociatedControlID="ATRRegionCountryDropDownList" CssClass="col-sm-4 control-label"
runat="server" Text="Country" />
<p class="col-sm-8">
<asp:DropDownList ID="ATRRegionCountryDropDownList" CssClass="form-control select"
data-live-search="true" data-callback="hotels.aspx?cmd=city" data-related="select-
location" runat="server" ClientIDMode="Static">
<asp:ListItem Value="0" Text="Please Select" />
</asp:DropDownList>
</p>
</div>
JS
$(document).on('click', '#btn-region-edit', function (e) {
e.preventDefault();
var $this = $(this),
id = $this.data('id'),
name = $this.data('name'),
country = $this.data('country');
$('#<%=ATRRegionCountryDropDownList.ClientID %>').val(country).change();
});
I have a bootstrap modal pop up. Inside that there are many controls and submit button. So after successfully submitting I want to close that pop up. Below is the code which shows the message as Record Saved successfully.
if (strMessage == "Success" && strSaveSubmit == "Draft")
{
ClientScript.RegisterStartupScript(Page.GetType(), "erroralert", "alert('Record Saved as Draft Successfully');", true);
}
But with this, I want to close the modal popup which I am unable to. here is that div
<div class="modals">
<form id="frmFileUpload" runat="server">
<div class="col-sm-6">
<asp:HiddenField ID="hdnFileInfo" runat="server" />
<asp:HiddenField ID="hdnClose" runat="server" />
<label>Sap ID</label>
<asp:Label ID="lblSapId" Text="" runat="server" />
</div>
<div class="col-sm-6">
<label>Candidate ID</label>
<asp:Label ID="lblCandidateId" Text="" runat="server" />
</div>
<div class="col-sm-6">
<label>Technical Feasible</label>
<div class="selectWraper">
<asp:DropDownList ID="ddlTechFeasible" runat="server">
<asp:ListItem Text="Select" Value="Select" />
<asp:ListItem Text="YES" Value="YES" />
<asp:ListItem Text="NO" Value="NO" />
</asp:DropDownList>
</div>
</div>
<div class="col-sm-6">
<div class="upload">
<label>Upload Document</label>
<asp:HiddenField ID="hdnGetFileName" runat="server" />
<div id="dvFileUpload">
<asp:FileUpload runat="server" ID="flufileUpload" AllowMultiple="true" CssClass="chooseFile" />
</div>
</div>
</div>
<div class="col-sm-6">
<label>Remarks</label>
<asp:TextBox ID="txtRemarks" runat="server" TextMode="MultiLine" />
</div>
<div class="col-sm-6" style="overflow: auto; height: 100px;">
<asp:GridView ID="grdFilesInfo" runat="server" AutoGenerateColumns="false" EmptyDataText="No files uploaded">
<Columns>
<asp:BoundField DataField="Text" HeaderText="Uploaded Files" />
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkDownload" ToolTip="download files" CssClass="fa fa-download" CommandArgument='<%# Eval("Value") %>' runat="server" OnClick="lnkDownload_Click"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkDelete" ToolTip="delete files" CssClass="fa fa-trash-o" CommandArgument='<%# Eval("Value") %>' runat="server" OnClientClick="if (!confirm('Are you sure you want delete the file?')) return false;" OnClick="lnkDelete_Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div class="clearfix"></div>
<div class="modalButton">
<asp:Button ID="btnSaveDraft" runat="server" Text="Save as Draft" OnClick="btnSaveDraft_Click" CssClass="button" OnClientClick="return SaveOrDraft('Draft');" />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" data-dismiss="modal" OnClick="btnSubmit_Click" CssClass="button" OnClientClick="return SaveOrDraft('Draft');" />
</div>
</form>
</div>
JQuery and Ajax are your friend here.
You could just add this inside a document.ready...
$(document).ready(function() {
$('#<%= btnSubmit.ClientID %>').on('click', function () {
$('.modals').hide(); // hides anything with 'modals' as the class
}
}
You could also just give the modal an ID and use $('#ModalID').hide();
You could assign a static id to the submit button, but the <%= btnSubmit.ClientID %> will pull out the ID for you.
Is this an ajax operation? From the code you have there it looks like it would perform a postback and reload the page anyway.
if (strMessage == "Success" && strSaveSubmit == "Draft")
{
ClientScript.RegisterStartupScript(Page.GetType(), "erroralert", "alert('Record Saved as Draft Successfully');", true);
ScriptManager.RegisterStartupScript(this, this.GetType(), "Popup", "closePopUP();", true);
}
function closePopUP(){
$(".modals").modal('hide');
}
<form id="form1" runat="server">
<div id="header" runat="server" class="clsHeaderContent">
<div class="clsDivBody">
<table cellpadding="0" border="0" cellspacing="0" style="width: 1024px;">
<tr>
<td>
<a href="<%=Page.ResolveUrl("~/Main/Home.aspx")%>">
<asp:Image ID="imgLogo" runat="server" ImageUrl="~/Images/Logo.png" Style="border: 0" />
</a>
</td>
</tr>
<%
If Not Session("Member_Login_Profile") Is Nothing Then
%>
<tr style="height:30px;">
<td align="right" valign="top">
<asp:Button ID="cmdHome" runat="server" Text="Home" />
<asp:Button ID="cmdMyProfile" runat="server" Text="My Profile" />
<asp:Button ID="cmdLogout" runat="server" Text="Logout" />
</td>
</tr>
<tr style="height: 5px;">
<td/>
</tr>
<%
End If
%>
</table>
</div>
</div>
<div class="clsDivBody bg" style="padding: 15px 0;min-height:730px;">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
<div id="backtotop" style="display: block;">^ Back to Top</div>
<div id="push"></div>
<input type="hidden" id="_ispostback" value="<%=Page.IsPostBack.ToString()%>" />
</form>
<form >
<asp:TextBox ID="txtCardNo" runat="server" MaxLength="20" value="Card No." Text="824488" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Card No.':this.value;" />
<asp:RequiredFieldValidator ID="reqCardNo" runat="server" ControlToValidate="txtCardNo" CssClass="clsValidationErrMsg" Display="dynamic" ValidationGroup="Login" />
<asp:RegularExpressionValidator ID="regExCardNo" runat="server" ControlToValidate="txtCardNo" CssClass="clsValidationErrMsg" Display="dynamic" ValidationGroup="Login" />
<asp:TextBox ID="txtPassword" runat="server" MaxLength="16" value="thegardensclub123" TextMode="Password" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'Password':this.value;" />
<asp:RequiredFieldValidator ID="reqPassword" runat="server" ControlToValidate="txtPassword" CssClass="clsValidationErrMsg" Display="dynamic" ValidationGroup="Login" />
<asp:RegularExpressionValidator ID="regExPassword" runat="server" ControlToValidate="txtPassword" CssClass="clsValidationErrMsg" Display="dynamic" ValidationGroup="Login" /><br/>
<%-- <u><asp:LinkButton ID="lnkForgotPwd" runat="server" CausesValidation="False" Text="Forgot your password?" /></u>
--%> <asp:Button runat="server" ID="btnLogin" Text="Log In"/>
</form>
The first snippet is my master page, and the second is my login page.
The problem is, if i dont remove the in master page my textbox in login page, the textbox can not be placed in the panel.
If i remove the in master page, its shows me this error "Control 'ctl00_MainContent_oSM' of type 'ScriptManager' must be placed inside a form tag with runat=server."
If i remove the in login, also the textbox can not be placed in the panel. So what should i do?
I have this code below. I am attempting to on the checkbox click the 2 expanded divs would be shown/hidden. For some reason the functions are being hit but they are not hiding/showing hte divs. I put the exact code in jfiddle and it worked correctly. Any input would be great thanks.
HERE IS JFIDDLE THAT WORKS CORRECTLY http://jsfiddle.net/svmY3/3/
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="HorizontalSinglePageOptinSqueezePage2.ascx.cs" Inherits="UmbracoUsercontrols.HorizontalSinglePageOptinSqueezePage2" %>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
alert('test234123123');
$("#assist").change(function () {
$("#expanded, #expanded2").toggle();
alert('test2343');
});
});
function showhide() {
alert('test');
$("#expanded, #expanded2").toggle();
}
</script>
<!-- BASIC FORM -->
<div class="col-md-4">
<form role="form">
<div class="form-group">
<Asp:TextBox runat="server" class="form-control" type="text" id="name" placeholder="NAME"/>
</div>
<div class="form-group">
<Asp:TextBox runat="server" class="form-control" type="email" id="email" placeholder="EMAIL"/>
</div>
<div class="assistance">I would like immediate assistance: <input type="checkbox" runat="server" id="assist" onclick="showhide();" /></div>
<!-- EXPANDED FORM SECTION 1 -->
<div style="display:none" runat="server" class="expanded" id="expanded">
<div class="form-group">
<asp:textbox runat="server" type="tel" class="form-control" id="phone" placeholder="PHONE"/>
</div>
<p class="center">Please tell us about your situation and we'll see if we can help. We will also email you the <em>The 5 Easiest Ways to STOP Foreclosure in Under 48 Hours or Less</em>.</p>
</div>
<!-- END EXPANDED FORM SECTION 1 -->
</form></div>
<div class="col-md-5">
<!-- EXPANDED FORM SECTION 2 -->
<div runat="server" style="display:none" class="expanded" id="expanded2">
<div class="form-group">
<asp:label runat="server">Are you most interested in:</asp:label>
<asp:dropdownlist runat="server" id="interest" class="pull-right">
<asp:listitem value="Selling" Text="Selling"></asp:listitem>
<asp:listitem value="Refinancing" Text="Refinancing">
</asp:listitem>
<asp:listitem value="Keeping" Text="Keeping"></asp:listitem>
</asp:dropdownlist>
</div>
<div class="form-group">
<Asp:Label runat="server" >Are you in foreclosure:</Asp:Label>
<asp:DropDownList runat="server" ID="foreclosure" OnChange="javascript:toggle();">
<asp:ListItem Value="Yes" Text="Yes" />
<asp:ListItem Selected="True" Value="No" Text="No" />
</asp:DropDownList>
</div>
<div class="form-group">
<asp:label runat="server">Your best guess, how much do you owe on:</asp:label><br />
<asp:label runat="server" >1st Mortgage:</asp:label>
<asp:textbox runat="server" type="text" class="form-control" placeholder="Amount"/>
</div>
<div class="form-group">
<label>2nd Mortgage:</label>
<asp:textbox runat="server" type="text" class="form-control" placeholder="Amount"/>
</div>
<div class="form-group">
<asp:label runat="server" >Have you filed bankruptcy:</asp:label>
<asp:dropdownlist runat="server" ID="bankruptcy" class="pull-right">
<asp:listitem value="No" Text="No"></asp:listitem>
<asp:listitem value="Yes" Text="Yes"></asp:listitem>
</asp:dropdownlist>
</div>
<div class="form-group">
<asp:label runat="server" >Please describe your situation (briefly):</asp:label><br />
<asp:textbox runat="server" ID="situation" class="form-control"></asp:textbox>
</div>
</div>
<!-- END EXPANDED FORM SECTION -->
<asp:button runat="server" id="button" name="button" type="submit" text="Get Your E-Book Now" class="btn btn-primary btn-lg trackMe" data-trackerid="optin" OnClick="submitButton_Click"></asp:button>
<div class="center privacy">
<small>100% Privacy Guaranteed</small>
</div>
</div>
When an ASP control has runat="server", it generates a new id for the element so that it can bind its own JS handler to that new generated id. I bet if you inspect that element on the browser, its id won't be assist. Remove runat="server" if you aren't actually doing a server callback.
Put showhide() inside the $(document).ready function. Otherwise you're assigning the toggle-effect before the according input element is even loaded.
$(document).ready(function () {
$("#assist").change(function () {
$("#expanded, #expanded2").toggle();
});
function showhide() {
$("#expanded, #expanded2").toggle();
}
});