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();
}
});
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 am using bootstrap modal for one of the comment/feedback forms, It works working sometime and sometime it only shows the black overlay & no modal.
Not sure where it is wrong as i don't get any error in the console also.
I am facing two issues, When it works then it closes the form when i click the save button without saving or validating.
and second issue with i am facing now is that when i click on button/link to open the modal it only show the black overlay and no modal window
<a id="btnPostComment" class="btn btn-com-po" >POST COMMENT</a>
$(window).load(function() {
$("#btnPostComment").click(function() {
$("#modalPostComment").modal({
backdrop: 'static',
keyboard: false
});
});
});
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="modalPostComment">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="category-headding ">POST A COMMENT</h3>
</div>
<div class="modal-body" style="padding:25px;">
<asp:UpdatePanel ID="updPanelForm" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Panel ID="pnlForm" runat="server">
<div class="row">
<div class="col-sm-12">
<p>[*] required field.</p>
<asp:ValidationSummary ID="vsCommentForm" runat="server" CssClass="validation-sum" ValidationGroup="vgCommentForm" />
<asp:RequiredFieldValidator ID="rfvFullName" runat="server" ErrorMessage="Name field can't be left blank" CssClass="css-validator" ControlToValidate="txtFullName" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfvtxtEmail" runat="server" ErrorMessage="Email field can't be left blank" CssClass="css-validator" ControlToValidate="txtEmail" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rfevtxtEmail" runat="server" ErrorMessage="Enter correct email" ControlToValidate="txtEmail" CssClass="css-validator" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="vgCommentForm"></asp:RegularExpressionValidator>
<asp:RequiredFieldValidator ID="rfvddlCountry" runat="server" InitialValue="0" ErrorMessage="Select Country" CssClass="css-validator" ControlToValidate="ddCountry" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfMessage" runat="server" ErrorMessage="Message field can't be left blank" CssClass="css-validator" ControlToValidate="txtMessage" ValidationGroup="vgCommentForm"></asp:RequiredFieldValidator>
<asp:TextBox ID="txtValidate" CssClass="hidden" runat="server"></asp:TextBox>
</div>
<div class="col-sm-12">
<span class="input">
<asp:TextBox ID="txtFullName" CssClass="input_field" runat="server"></asp:TextBox>
<label class="input_label" for="input-1">
<span class="input_label_content" data-content="Full Name">Full Name *</span>
</label>
</span>
</div>
<div class="col-sm-12">
<span class="input">
<asp:TextBox ID="txtEmail" CssClass="input_field" runat="server"></asp:TextBox>
<label class="input_label" for="input-2">
<span class="input_label_content" data-content="Email Address">Email Address *</span>
</label>
</span>
</div>
<div class="col-sm-12">
<span class="input">
<asp:TextBox ID="txtMessage" runat="server" CssClass="input_field" TextMode="MultiLine" MaxLength="10" TabIndex="4"></asp:TextBox>
<label class="input_label" for="message">
<span class="input_label_content" data-content="Your Email">Your Message *</span>
</label>
</span>
</div>
<div class="col-sm-12">
<asp:Button ID="btnSaveComment" CssClass="btn btn-stylex" runat="server" Text="Post Your Comment" CausesValidation="true" ValidationGroup="vgCommentForm" UseSubmitBehavior="False" OnClientClick="ValidateCommentForm(this);" OnClick="btnSaveComment_Click"
/>
</div>
</div>
</asp:Panel>
<asp:Panel ID="pnlMessage" runat="server" Visible="false">
<asp:Label ID="lblSuccess" CssClass="lbl-com-success" runat="server" Text="Comment posted"></asp:Label>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>
Try this
Bump for a bit of an explanation? I thought it might have been because jQuery wasn’t being loaded until later...
I’ve seen the workarounds but i’d like to understand in case I come across this again
I have this code:
<div class="entryrow">
<div class="input" style="width: 40%;">
<asp:TextBox ID="txtColor" runat="server" Width="95%" Font-Size="Large"></asp:TextBox>
</div>
<div class="input">
<asp:ImageButton ID="imgbtnColorPicker" runat="server" ImageUrl="~/images/icons/colorpicker.png" />
</div>
<ajaxToolkit:ColorPickerExtender runat="server" ID="cpBackgroundColor" TargetControlID="txtColor" OnClientColorSelectionChanged="colorChanged"
SampleControlID="imgbtnColorPicker" PopupButtonID="imgbtnColorPicker" />
<div class="clear"></div>
</div>
<asp:HiddenField ID="hfColor" runat="server" />
and js:
function colorChanged(sender) {
sender.get_element().style.color =
"#" + sender.get_selectedColor();
};
How can I set the ColorPickerExtender color from the code behind when I load the page. From the code I take the current color for this element and put it in the Hidden field. How do I trigger an event about changing color in ColorPickerExtender?
This question already has answers here:
Show/Hide div when checkbox selected [closed]
(3 answers)
Closed 6 years ago.
I am new to jquery. I want to make a functionality. When user click on Yes checkbox a div gets hidden. I am trying to do it but its not working.
Please Let me know what mistakes I am doing?
Code as Follows
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="../Scripts/jquery-1.8.2.js"></script>
<link href="../Content/bootstrap.css" rel="stylesheet" />
<script type="text/javascript">
function valueChanged() {
debugger;
if ($('.chkYes').is(":checked"))
$("#hidedivs").hide();
}
</script>
</head>
<body>
<form id="form1" runat="server">
      
<div class="container">
<div class="row">
<div class="col-lg-6">
<asp:Label runat="server" ID="lblFirstName" Text="First Name"></asp:Label>
</div>
<div class="col-lg-6">
<asp:TextBox runat="server" ID="txtFname" class="form-control" placeholder="Enter your First Name"></asp:TextBox>
</div>
</div>
 
<div class="row">
<div class="col-lg-6">
<asp:Label runat="server" ID="lblLastName" Text="Last Name"></asp:Label>
</div>
<div class="col-lg-6">
<asp:TextBox runat="server" ID="txtLname" class="form-control" placeholder="Enter your Last Name"></asp:TextBox>
</div>
</div>
 
<div class="row" id="hidedivs">
<div class="col-lg-6">
<asp:Label runat="server" ID="lblAge" Text="Age"></asp:Label>
</div>
<div class="col-lg-6">
<asp:TextBox runat="server" ID="txtAge" class="form-control" placeholder="Enter your Age"></asp:TextBox>
</div>
</div>
 
<div class="row">
<div class="col-lg-6">
<asp:label runat="server" ID="IsSapApplicable" Text="Is SAP Applicable"></asp:label>
</div>
<div class="col-lg-6">
<asp:Label runat="server" ID="lblYes" Text="Yes"></asp:Label>
<input type="checkbox" id="chkYes" onchange="valueChanged();" value="1"/>
<asp:Label runat="server" ID="lblNo" Text="No"></asp:Label>
<input type="checkbox" id="chkNo"/>
</div>
</div>
</div>
</form>
</body>
</html>
You're targetting a class when you should be targetting the id
your html has an id but not a class. "." represents a class in your jQuery selector and '#' is an id
<input type="checkbox" id="chkYes" onchange="valueChanged();" value="1"/>
if ($('.chkYes').is(":checked"))
$("#hidedivs").hide();
should be
if ($('#chkYes').is(":checked"))
$("#hidedivs").hide();
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;
}
}