We Keep Coding

How do I change color of a text when its clicked using jquery?

I am trying hard to change the color of a text when it is clicked but not getting success.
There is one label for question, four labels for four options, one label for correct answer and one label for explanation.
What I am trying is when user click on any option then it should match with the correct answer and change the color of the text of that option i.e. when the answer is correct the text color should turn to green otherwise the color should turn to red .
But when I click on any option it is turning to red color only . Correct option should turn to green but it is turning to red . I can't figure out why ?.
Have a look at my code. Show me where I am making mistake and what is the solution.
.aspx :-
<%# Page Title="" Language="C#" MasterPageFile="~/Student/StudentPage.master" AutoEventWireup="true" CodeFile="studpractice.aspx.cs" Inherits="Student_studpractice" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<script type="text/javascript">
$(function () {
$(".optionclass").click(function () {
var $thisoption = $(this);
var $corrans = $(".correctans");
if ($thisoption.text() == $corrans.text()) {
$thisoption.css("color", "green");
} else {
$thisoption.css("color", "red");
}
});
});
</script>
<div>
<div id="tabs">
<ul>
<li>Reasoning</li>
<li>Quantitative Aptitude</li>
<li>English</li>
<li>Mathematics</li>
<li>Computer Concepts</li>
</ul>
<div id="tabs-1">
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" width="100%">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel ID="Panel1" runat="server">
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Question") %>'></asp:Label>
<br />
<br />
<br />
<span>A-</span> <asp:Label class="optionclass" ID="Label2" runat="server" Text='<%#Eval("Option1")%>' ></asp:Label>
<br />
<br />
<span>B-</span> <asp:Label class="optionclass" ID="Label3" runat="server" Text='<%#Eval("Option2")%>'></asp:Label>
<br />
<br />
<span>C-</span> <asp:Label class="optionclass" ID="Label4" runat="server" Text='<%#Eval("Option3")%>'></asp:Label>
<br />
<br />
<span>D-</span> <asp:Label class="optionclass" ID="Label5" runat="server" Text='<%#Eval("Option4")%>'></asp:Label>
<br />
<br />
<asp:Button class="panelButton" runat="server" Text="Show Answer" ClientIDMode="Static" />
<br />
<asp:Panel ID="anspanel" class="AnswerPanel" runat="server" ClientIDMode="Static">
<span>Correct Answer is :-</span><asp:Label class="correctans" ID="Label6" runat="server" Text='<%#Eval("CorrectAns")%>'></asp:Label>
<br />
<br />
<asp:Label ID="Label7" runat="server" Text='<%#Eval("Explanation")%>'></asp:Label>
</asp:Panel>
</asp:Panel>
<br />
<br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="tabs-2">
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="false" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel ID="Panel1" runat="server">
<asp:Label ID="Label1" runat="server" Text='<%#Eval("Question") %>'></asp:Label>
<br />
<br />
<br />
<span>A-</span> <asp:Label class="optionclass" ID="Label2" runat="server" Text='<%#Eval("Option1")%>'></asp:Label>
<br />
<br />
<span>B-</span> <asp:Label class="optionclass" ID="Label3" runat="server" Text='<%#Eval("Option2")%>'></asp:Label>
<br />
<br />
<span>C-</span> <asp:Label class="optionclass" ID="Label4" runat="server" Text='<%#Eval("Option3")%>'></asp:Label>
<br />
<br />
<span>D-</span> <asp:Label class="optionclass" ID="Label5" runat="server" Text='<%#Eval("Option4")%>'></asp:Label>
<br />
<br />
<asp:Button class="panelButton" runat="server" Text="Show Answer" ClientIDMode="Static" />
<br />
<asp:Panel ID="anspanel" class="AnswerPanel" runat="server" ClientIDMode="Static">
<span>Correct Answer is :-</span><asp:Label class="correctans" ID="Label6" runat="server" Text='<%#Eval("CorrectAns")%>'></asp:Label>
<br />
<br />
<asp:Label ID="Label7" runat="server" Text='<%#Eval("Explanation")%>'></asp:Label>
</asp:Panel>
</asp:Panel>
<br />
<br />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="tabs-3">
Tab 3 Content
</div>
<div id="tabs-4">
Tab 4 Content
</div>
<div id="tabs-5">
Tab 5 Content
</div>
</div>
<input type="button" id="btnPrevious" value="Previous" style = "display:none"/>
<input type="button" id="btnNext" value="Next" />
</div>
</asp:Content>

So what wrong you are doing is you are selecting all .correctans and what you should do is select the .correctans specific to that question only.

Change $(".correctans") to $(".correctans")[0] or $(".correctans").first() to get the single correctans element instead of a collection.
EDIT:
Since you have multiple questions and answers on the page, use this to get the correctans for the question they're answering:
var $corrans = $(this).parent().find('.correctans:first');

Javascript get values to gridpanel

I am trying to add values from my textboxes and combos as "history" to by GridPanel. The script looks ok, and my website should return my filled grid, but it doesn't happen.
<script>
var addRecord = function (form, grid) {
if (!form.getForm().isValid()) {
Ext.net.Notification.show({
iconCls: "icon-exclamation",
html: "Form is invalid",
title: "Error"
});
return false;
}
grid.store.insert(0, new MyModel(form.getForm().getFieldValues()));
form.getForm().reset();
};
</script>
<ext:Store
ID="Store1"
runat="server"
AutoSync="true"
ShowWarningOnFailure="false">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="Id" Name="MyModel">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="A" />
<ext:ModelField Name="Operator1" />
<ext:ModelField Name="B" />
<ext:ModelField Name="Operator2" />
<ext:ModelField Name="C" />
<ext:ModelField Name="Wynik" />
<ext:ModelField Name="Data" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="ResourceManager1" runat="server">
</ext:ResourceManager>
<ext:Panel ID="UserForm" runat="server" Layout="HBoxLayout" Title="Kalkulator">
<Items>
<ext:Panel ID="Panel6" Layout="VBoxLayout" runat="server">
<Items>
<ext:Label ID="Label4" Margin="10" Text="A" runat="server">
</ext:Label>
<ext:TextField Name="A" Margin="10" MaskRe="[1-9]" ID="txtA" runat="server">
</ext:TextField>
</Items>
</ext:Panel>
<ext:Panel ID="Panel7" Layout="VBoxLayout" runat="server">
<Items>
<ext:Label ID="Label1" Margin="10" Text="Operator" runat="server">
</ext:Label>
<ext:ComboBox Name="Operator1" Margin="10" ID="cbox1" runat="server"></ext:ComboBox>
</Items>
</ext:Panel>
<ext:Panel ID="Panel8" runat="server" Layout="VBoxLayout">
<Items>
<ext:Label ID="Label5" Margin="10" Text="B" runat="server">
</ext:Label>
<ext:TextField Name="B" Margin="10" MaskRe="[1-9]" ID="txtB" runat="server">
</ext:TextField>
</Items>
</ext:Panel>
<ext:Panel ID="Panel9" runat="server" Layout="VBoxLayout">
<Items>
<ext:Label ID="Label2" Margin="10" Text="Operator" runat="server">
</ext:Label>
<ext:ComboBox Name="Operator2" Margin="10" ID="cbox2" runat="server"></ext:ComboBox>
</Items>
</ext:Panel>
<ext:Panel ID="Panel10" runat="server" Layout="VBoxLayout">
<Items>
<ext:Label ID="Label6" Margin="10" Text="C" runat="server">
</ext:Label>
<ext:TextField Name="C" Margin="10" MaskRe="[1-9]" ID="txtC" runat="server">
</ext:TextField>
</Items>
</ext:Panel>
<ext:Panel ID="Panel11" runat="server" Layout="VBoxLayout">
<Items>
<ext:Button ID="btnhelp" Margin="6" OnDirectClick="helpclick" runat="server" Width="70" Text="=?">
</ext:Button>
<ext:Button ID="btneq" Margin="6" OnDirectClick="equalclick" runat="server" Width="70" Text="Oblicz">
<Listeners>
<Click Handler="addRecord(#{UserForm}, #{GridPanel1});" />
</Listeners>
</ext:Button>
</Items>
</ext:Panel>
<ext:Panel ID="Panel12" runat="server" Layout="VBoxLayout">
<Items>
<ext:Label ID="Label3" Margin="14" Text="Wynik" runat="server">
</ext:Label>
<ext:Label Name="Wynik" Margin="14" ID="lblsc" Text="Wynik" runat="server">
</ext:Label>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
<br />
<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Historia"
Width="1100"
Height="350">
<ColumnModel>
<Columns>
<ext:Column ID="Column1" runat="server" Text="Lp" DataIndex="Lp" />
<ext:Column ID="Column2" runat="server" Text="A" DataIndex="A" />
<ext:Column ID="Column3" runat="server" Text="Operator" DataIndex="Operator1" />
<ext:Column ID="Column4" runat="server" Text="B" DataIndex="B" />
<ext:Column ID="Column5" runat="server" Text="Operator" DataIndex="Operator2" />
<ext:Column ID="Column6" runat="server" Text="C" DataIndex="C" />
<ext:Column ID="Column7" runat="server" Text="Wynik" DataIndex="Wynik" />
<ext:Column ID="Column8" runat="server" Text="Data" DataIndex="Data" />
</Columns>
</ColumnModel>
</ext:GridPanel>
When I click on button it doesn't work. What is an issue?

Edit/Delete dosen't work in Telerik Grid (telerik control)

I trying to edit row or delete it an this just doesn't work,and don't throw any ex
Do any know what i am missing here?
My server side is empty i didn't put any functions there.
I think if don't get any errors maybe,i have problem in sql security that don't allow me to do update
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="RadGroupedGridForm.aspx.cs" Inherits="RadGroupedGridForm" %>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<div>
<asp:SqlDataSource ConnectionString="<%$ ConnectionStrings:WebsiteConnectionString %>" ID="DataSource1" runat="server" DeleteCommand="DELETE FROM [TABLE_PRODUCT_CATEGORY] WHERE [ID] = #ID" InsertCommand="INSERT INTO [TABLE_PRODUCT_CATEGORY] ([ID], [LoadCategory], [ProductCategory], [ShortDescription], [NumberOfItems]) VALUES (#ID, #LoadCategory, #ProductCategory, #ShortDescription, #NumberOfItems)" SelectCommand="SELECT [ID], [LoadCategory], [ProductCategory], [ShortDescription], [NumberOfItems] FROM [TABLE_PRODUCT_CATEGORY]" UpdateCommand="UPDATE [TABLE_PRODUCT_CATEGORY] SET [LoadCategory] = #LoadCategory, [ProductCategory] = #ProductCategory, [ShortDescription] = #ShortDescription, [NumberOfItems] = #NumberOfItems WHERE [ID] = #ID">
<DeleteParameters>
<asp:Parameter Name="ID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="LoadCategory" Type="Boolean" />
<asp:Parameter Name="ProductCategory" Type="String" />
<asp:Parameter Name="ShortDescription" Type="String" />
<asp:Parameter Name="NumberOfItems" Type="Int16" />
<asp:Parameter Name="ID" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>
<telerik:RadGrid ID="RadGrid1" runat="server" ShowGroupPanel="True" GridLines="None" DataSourceID="DataSource1" AllowFiltering="False" AllowFilteringByColumn="True" AutoGenerateDeleteColumn="True" AutoGenerateEditColumn="True" CellSpacing="0">
<MasterTableView GroupLoadMode="server" ShowGroupFooter="False" GroupsDefaultExpanded="False" AutoGenerateColumns="False" DataKeyNames="ID">
<Columns>
<telerik:GridBoundColumn DataField="ID" DataType="System.Int32" FilterControlAltText="Filter ID column" HeaderText="ID" ReadOnly="True" SortExpression="ID" UniqueName="ID">
</telerik:GridBoundColumn>
<telerik:GridCheckBoxColumn DataField="LoadCategory" DataType="System.Boolean" FilterControlAltText="Filter LoadCategory column" HeaderText="LoadCategory" SortExpression="LoadCategory" UniqueName="LoadCategory">
</telerik:GridCheckBoxColumn>
<telerik:GridBoundColumn DataField="ProductCategory" FilterControlAltText="Filter ProductCategory column" HeaderText="ProductCategory" SortExpression="ProductCategory" UniqueName="ProductCategory">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ShortDescription" FilterControlAltText="Filter ShortDescription column" HeaderText="ShortDescription" SortExpression="ShortDescription" UniqueName="ShortDescription">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="NumberOfItems" DataType="System.Int16" FilterControlAltText="Filter NumberOfItems column" HeaderText="NumberOfItems" SortExpression="NumberOfItems" UniqueName="NumberOfItems">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings AllowDragToGroup="True">
</ClientSettings>
</telerik:RadGrid>
</div>
</form>
</body>
</html>

Please add below property in your radgrid and check.
<telerik:RadGrid AllowAutomaticDeletes="true"
AllowAutomaticUpdates="true" AllowAutomaticInserts="true">

create user wizard step 2 javascript doesn't respond

I have an asp.net 4.5 create user form where the first 2 steps are laid out using the TemplatedWizardStep.
In step 2 I have some javascript that is supposed to react to radio button click actions.
I originally had the radio actions in step 1 and the javascript worked as expected.
Since I moved it to step 2, it no longer works.
I went to firebug and set a watch on the script, but the script was not available in step 2. In page source view none of the controls for step 2 were included, only controls from step 1. I was on step 2 when I checked page source view.
Does anyone know how to make this work as expected?
Thanks
Create User Wizard
<asp:CreateUserWizard runat="server" ID="RegisterUser" LoginCreatedUser="false" ViewStateMode="Disabled"
OnCreatedUser="RegisterUser_CreatedUser" ActiveStepIndex="0"
AnswerRequiredErrorMessage="Please answer selected question"
DuplicateUserNameErrorMessage="The user name is already in the system. Enter another user name.">
<LayoutTemplate>
<asp:PlaceHolder runat="server" ID="wizardStepPlaceholder" />
<asp:PlaceHolder runat="server" ID="navigationPlaceholder" />
</LayoutTemplate>
<WizardSteps>
<asp:TemplatedWizardStep ID="wzdStep1" runat="server" StepType="Start">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanelStep1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<fieldset>
<ul>
<li>
<asp:Label ID="lblFullName" runat="server" AssociatedControlID="txtFullName">Full name</asp:Label>
<input runat="server" data-rule-minlength="2" data-rule-required="true" class="controltext" type="text" placeholder="Enter Full Name" id="txtFullName" />
</li>
<li>
<asp:Label ID="lblCountry" runat="server" AssociatedControlID="ddCountry">Country</asp:Label>
<asp:DropDownList ID="ddCountry" AppendDataBoundItems="true" AutoPostBack="true" DataSourceID="lnqCountry" DataTextField="CntryName" DataValueField="CntryID" CssClass="controltext" runat="server">
<asp:ListItem Value="-1">---Select Country---</asp:ListItem>
</asp:DropDownList>
<asp:LinqDataSource ID="lnqCountry" runat="server"
ContextTypeName="ClientStudio.SalonDataClassesDataContext" OrderBy="CntryName"
TableName="CntrysLUs">
</asp:LinqDataSource>
</li>
<li>
<asp:Label ID="lblStates" runat="server" AssociatedControlID="ddStates">State</asp:Label>
<div class="input-append controltext" id="divStateSelect" style="display: inline-block">
<asp:DropDownList ID="ddStates" data-rule-required="true" AutoPostBack="false" EnableViewState="true" AppendDataBoundItems="true" DataSourceID="lnqStates" DataTextField="StateName" DataValueField="StateID" CssClass="controltext" runat="server">
<asp:ListItem Value="-1">---Select State---</asp:ListItem>
</asp:DropDownList>
<button class="button button-basic" id="btnAddState" onclick="addState();" type="button">
Add
</button>
</div>
<div class="input-append input-prepend" id="divStateAdd" style="display: none">
<span class="add-on">
<i class="icon-edit"></i>
</span>
<input class="controltext" runat="server" id="txtStateName" type="text" placeholder="Enter State Name" />
<button class="button button-basic" runat="server" id="btnSaveState" onclick="saveState">
Save!
</button>
<button class="button button-basic" onclick="clearState();" id="btnClearState" type="button">
Clear
</button>
</div>
<asp:LinqDataSource ID="lnqStates" runat="server"
ContextTypeName="ClientStudio.SalonDataClassesDataContext" OrderBy="StateName"
TableName="StatesLUs" Where="CntryID == #CntryID"
Select="new (StateID, StateName, CntryID)">
<WhereParameters>
<asp:ControlParameter ControlID="ddCountry" Name="CntryID"
PropertyName="SelectedValue" Type="Int32" />
</WhereParameters>
</asp:LinqDataSource>
</li>
<li>
<asp:Label ID="lblCity" runat="server" AssociatedControlID="txtCity">City Name</asp:Label>
<input runat="server" data-rule-minlength="2" data-rule-required="true" class="controltext" type="text" placeholder="Enter City Name" id="txtCity" />
</li>
</ul>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</ContentTemplate>
<CustomNavigationTemplate>
<div class="pull-right">
<asp:Button ID="Button1" runat="server" CssClass="btn btn-success btn-large" CommandName="MoveNext" Text="Next" />
</div>
</CustomNavigationTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="wzdStep2" StepType="Auto">
<ContentTemplate>
<fieldset>
<ul>
<li>
<asp:Label ID="lblStylist" runat="server" AssociatedControlID="RadioButtonList1">Do you currently have a stylist or stylists?</asp:Label>
<asp:RadioButtonList ID="RadioButtonList1" AutoPostBack="false" onclick="javascript:radio(this);" CssClass="controltext"
RepeatLayout="Table" RepeatDirection="Vertical" RepeatColumns="1"
runat="server">
<asp:ListItem Value="1" Selected="True"> <i> Yes, I have a stylist(s) I see on a regular basis</i></asp:ListItem>
<asp:ListItem Value="0"> <i> No, I am looking for a new stylist</i></asp:ListItem>
</asp:RadioButtonList>
</li>
<li id="liSearch" style="display: block">
<asp:Label ID="Label1" runat="server">Find by Salon or Stylist Name</asp:Label>
<div class="clear"></div>
<br />
<div class="input-append input-prepend">
<span class="add-on">
<i class="icon-search"></i>
</span>
<input class="controltext" type="text" id="FindBySalon" placeholder="Enter Salon Name..."></input>
<button class="button button-basic" onclick="findBySalon();" id="btnFindBySalon" type="button">
Find by Salon!
</button>
</div>
<div class="clear"></div>
<div class="input-append input-prepend">
<span class="add-on">
<i class="icon-search"></i>
</span>
<input class="controltext" type="text" id="FindByStylist" placeholder="Enter Stylists Name..."></input>
<button class="button button-basic" onclick="findByStylist();" id="btnFindByStylist" type="button">
Find by Stylists Name!
</button>
</div>
</li>
<li id="liResults" style="display: none">
<asp:Label ID="lblResults" runat="server" AssociatedControlID="ddResults">Search Results</asp:Label>
<asp:DropDownList ID="ddResults" AutoPostBack="true" OnSelectedIndexChanged="ddResults_SelectedIndexChanged" CssClass="controltext" DataValueField="StylistID" DataTextField="Results" runat="server"></asp:DropDownList>
</li>
<li id="liSelf" style="display: none">
<asp:Label ID="Label2" runat="server" AssociatedControlID="ddSelf">Is this you?</asp:Label>
<asp:DropDownList ID="ddSelf" CssClass="controltext" DataValueField="CustomerID" DataTextField="Results" runat="server"></asp:DropDownList>
</li>
</ul>
</fieldset>
</ContentTemplate>
<CustomNavigationTemplate>
<div class="pull-right">
<asp:Button ID="Button2" runat="server" CssClass="btn btn-success btn-large" CommandName="MovePrevious" Text="Previous" />
<asp:Button ID="Button3" runat="server" CssClass="btn btn-success btn-large" CommandName="MoveNext" Text="Next" />
</div>
</CustomNavigationTemplate>
</asp:TemplatedWizardStep>
<asp:CreateUserWizardStep runat="server" ID="RegisterUserWizardStep">
<ContentTemplate>
<p class="message-info">
Passwords are required to be a minimum of <%: Membership.MinRequiredPasswordLength %> characters in length.
</p>
<p class="validation-summary-errors">
<asp:Literal runat="server" ID="ErrorMessage" />
</p>
<fieldset>
<ol>
<li>
<asp:Label runat="server" AssociatedControlID="UserName">User name</asp:Label>
<asp:TextBox runat="server" ID="UserName" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="UserName"
CssClass="field-validation-error" ErrorMessage="The user name field is required." />
</li>
<li>
<asp:Label runat="server" AssociatedControlID="Email">Email address</asp:Label>
<asp:TextBox runat="server" ID="Email" TextMode="Email" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Email"
CssClass="field-validation-error" ErrorMessage="The email address field is required." />
</li>
<li>
<asp:Label runat="server" AssociatedControlID="Password">Password</asp:Label>
<asp:TextBox runat="server" ID="Password" TextMode="Password" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="Password"
CssClass="field-validation-error" ErrorMessage="The password field is required." />
</li>
<li>
<asp:Label runat="server" AssociatedControlID="ConfirmPassword">Confirm password</asp:Label>
<asp:TextBox runat="server" ID="ConfirmPassword" TextMode="Password" />
<asp:RequiredFieldValidator runat="server" ControlToValidate="ConfirmPassword"
CssClass="field-validation-error" Display="Dynamic" ErrorMessage="The confirm password field is required." />
<asp:CompareValidator runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword"
CssClass="field-validation-error" Display="Dynamic" ErrorMessage="The password and confirmation password do not match." />
</li>
<li>
<asp:Label ID="lblSecurityQ" runat="server" AssociatedControlID="Question">Select Security Question</asp:Label>
<asp:DropDownList ID="Question" CssClass="controltext" runat="server">
<asp:ListItem>What is your mother's maiden name?</asp:ListItem>
<asp:ListItem>What city were you born in?</asp:ListItem>
<asp:ListItem>What city was your mother born in?</asp:ListItem>
<asp:ListItem>What is your favorite sport?</asp:ListItem>
<asp:ListItem>What is your favorite pets name?</asp:ListItem>
<asp:ListItem>What grade school did you graduate from?</asp:ListItem>
<asp:ListItem>What is your favorite meal?</asp:ListItem>
<asp:ListItem>What is your favorite soap?</asp:ListItem>
</asp:DropDownList>
</li>
<li>
<asp:Label ID="lblSecurityAns" runat="server" AssociatedControlID="Answer">Security Answer</asp:Label>
<asp:TextBox ID="Answer" CssClass="controltext" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" runat="server" ControlToValidate="Answer"
CssClass="field-validation-error" Display="Dynamic" ErrorMessage="Please enter the answer to selected question above." />
</li>
</ol>
</fieldset>
</ContentTemplate>
<CustomNavigationTemplate>
<div class="pull-right">
<asp:Button ID="Button4" runat="server" CssClass="btn btn-success btn-large" CommandName="MovePrevious" Text="Previous" />
<asp:Button ID="Button5" runat="server" CssClass="btn btn-success btn-large" CommandName="MoveNext" Text="Next" />
</div>
</CustomNavigationTemplate>
</asp:CreateUserWizardStep>
<asp:CompleteWizardStep ID="wzdComplete">
<ContentTemplate>
<p>
Your account has been created, but before you can login you must first verify your email address.
</p>
<p>
A message has been sent to the email address you specified. Please check your email inbox and follow the instructions in that email to verify your account.
</p>
<br />
</ContentTemplate>
<CustomNavigationTemplate>
<asp:Button ID="Button6" runat="server" CssClass="btn btn-success btn-large" CommandName="MovePrevious" Text="Previous" />
<asp:Button ID="Button7" runat="server" CssClass="btn btn-danger btn-large" CommandName="Cancel" Text="Cancel" />
<asp:Button ID="Button8" runat="server" CssClass="btn btn-primary btn-large" CommandName="MoveComplete" Text="Next" />
</CustomNavigationTemplate>
</asp:CompleteWizardStep>
</WizardSteps>
</asp:CreateUserWizard>
JavaScript
<script type="text/javascript">
function radio(cnt) {
var radioButtons = document.getElementById("ContentPlaceHolder1_RegisterUser_ctl05_RadioButtonList1");
var inputs = radioButtons.getElementsByTagName("input");
var li = document.getElementById("liSearch");
var liResults = document.getElementById("liResults");
var liSelf = document.getElementById("liSelf");
if (inputs[1].checked) {
li.style.display = "none";
liResults.style.display = "none";
liSelf.style.display = "none";
} else {
li.style.display = "block";
liResults.style.display = "block";
liSelf.style.display = "block";
}
}
</script>

I suppose that you set by hand the id
ContentPlaceHolder1_RegisterUser_ctl05_RadioButtonList1
and that id change when you move it to step2.
Change it to dynamic get the id as:
var radioButtons = document.getElementById("<%=RadioButtonList1.ClientID%>");
and it will work.

How to find Control inside EditFormSettings of RadTree List using javascript

I have been using RadTreeList in one of my project, I have used RadUpload Control which lies inside the EditFormSettings of the RadTreeList. I have used javascript for validating RadUpload control (i.e. where user has selected any file or not), now the problem here is that I'm not able to find/get the RadUpload control inside the RadTreeList in my javascript, though I'm getting the RadTreeList control.
Below is my code :-
function IsFilesSelected(source, args) {
debugger;
args.IsValid = true;
var treeList = $find("<%= FAQRadTreeList.ClientID %>");
var RadUpload = treeList._findChildControl.getName("UploadDocumentRadUpload");
var UploadLabel = treeList.selectItem(ImageExtensionLabel);
var FileInputs = RadUpload.getFileInputs();
for (var i = 0; i < FileInputs.length; i++) {
if (FileInputs[i].value && FileInputs[i].value.length > 0) {
args.IsValid = true;
}
else {
if (UploadLabel == null || UploadLabel.innerHTML == '')
args.IsValid = false;
else
args.IsValid = true;
}
}
}
While my RadTreeList is shown as :--
<telerik:RadTreeList ID="FAQRadTreeList" runat="server" AllowPaging="True" DataSourceID="FAQSqlDataSource"
PageSize="20" DataKeyNames="FAQ_ID" ParentDataKeyNames="FAQ_Parent_ID" AutoGenerateColumns="False"
Width="100%" OnInsertCommand="FAQRadTreeList_InsertCommand" OnItemCommand="FAQRadTreeList_ItemCommand"
OnItemDataBound="FAQRadTreeList_ItemDataBound" OnUpdateCommand="FAQRadTreeList_UpdateCommand"
OnItemDrop="FAQRadTreeList_ItemDrop">
<PagerStyle Mode="NextPrevNumericAndAdvanced" />
<Columns>
<telerik:TreeListEditCommandColumn UniqueName="InsertCommandColumn" ButtonType="ImageButton"
AddRecordText="Add" ShowEditButton="true" ItemStyle-CssClass="MyImageButton">
<ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="60px" />
<HeaderStyle VerticalAlign="Top" HorizontalAlign="Left" Width="60px" />
</telerik:TreeListEditCommandColumn>
<telerik:TreeListTemplateColumn DataField="FAQ_Title" UniqueName="FAQ_Title" HeaderText="Title">
<ItemTemplate>
<asp:Label ID="FAQTitleLabel" runat="server" Text='<%# Bind("FAQ_Title") %>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="120px" />
<HeaderStyle HorizontalAlign="Left" VerticalAlign="Top" Width="120px" />
</telerik:TreeListTemplateColumn>
<telerik:TreeListTemplateColumn DataField="FAQ_Description" UniqueName="FAQ_Description"
HeaderText="Description">
<ItemTemplate>
<asp:Label ID="FAQDescriptionLabel" runat="server" Text='<%# ( Eval("FAQ_Description").ToString().Length > 150)? string.Concat(Eval("FAQ_Description").ToString().Substring(0, 150), ".....") : Eval("FAQ_Description") %>'></asp:Label>
<telerik:RadToolTip ID="FAQDescriptionRadToolTip" TargetControlID='<%# ( Eval("FAQ_Description").ToString().Length > 150)? "FAQDescriptionLabel" : "" %>'
Width="400px" Height="300px" ContentScrolling="Y" runat="server" HideDelay="1000"
Position="TopCenter" RelativeTo="Element" ShowDelay="1000">
<%# Eval("FAQ_Description")%>
</telerik:RadToolTip>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" VerticalAlign="Top" />
<HeaderStyle HorizontalAlign="Left" VerticalAlign="Top" />
</telerik:TreeListTemplateColumn>
<telerik:TreeListTemplateColumn DataField="ParentName" UniqueName="ParentName" HeaderText="Parent Item">
<ItemTemplate>
<asp:Label ID="ParentTitleLabel" runat="server" Text='<%# Bind("ParentName") %>'></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Left" VerticalAlign="Top" Width="100px" />
<HeaderStyle HorizontalAlign="Left" VerticalAlign="Top" Width="100px" />
</telerik:TreeListTemplateColumn>
<telerik:TreeListTemplateColumn DataField="FAQ_Order" UniqueName="FAQ_Order" HeaderText="Order">
<ItemTemplate>
<telerik:RadNumericTextBox ID="FAQOrderRadNumericTextBox" MinValue="1" NumberFormat-DecimalDigits="0"
Enabled="false" runat="server" Width="50px" Text='<%# Bind("FAQ_Order") %>'>
<EnabledStyle Font-Names="Verdana" HorizontalAlign="Right" />
</telerik:RadNumericTextBox>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
</telerik:TreeListTemplateColumn>
<telerik:TreeListTemplateColumn HeaderText="Status" DataField="FAQ_ActiveStatus"
UniqueName="FAQ_ActiveStatus">
<ItemTemplate>
<asp:Label ID="ActiveStatusLabel" runat="server" CssClass='<%# (Convert.ToBoolean(Eval("FAQ_ActiveStatus"))) ? "active" : "inactive" %>'
ToolTip='<%# (Convert.ToBoolean(Eval("FAQ_ActiveStatus"))) ? "Active" : "Inactive" %>'
Text=" "></asp:Label>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
</telerik:TreeListTemplateColumn>
<telerik:TreeListTemplateColumn DataField="FAQ_ActiveStatus" HeaderText="Action"
UniqueName="ActiveStatus">
<ItemTemplate>
<asp:ImageButton ID="ActiveInactiveButton" runat="server" ToolTip='<%# (Convert.ToBoolean(Eval("FAQ_ActiveStatus"))) ? "Make inactive" : "Make active" %>'
Width="14px" Height="14px" CommandName="ActiveInactive" ImageUrl='<%# (Convert.ToBoolean(Eval("FAQ_ActiveStatus"))) ? "../App_Themes/ELPISCMS/images/inactive.png" : "../App_Themes/ELPISCMS/images/active.png" %>' />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Top" Width="60px" />
</telerik:TreeListTemplateColumn>
</Columns>
<EditFormSettings EditFormType="Template" PopUpSettings-Width="100%">
<FormTemplate>
<asp:Panel ID="DetailsPanel" runat="server" DefaultButton="SaveRadButton">
<table border="0" cellpadding="0" cellspacing="5" class="innertable">
<tr>
<td class="td18">
Title : <span class="mandatorymark">*</span>
</td>
<td class="td82">
<telerik:RadTextBox ID="FAQTitleRadTextBox" runat="server" SkinID="FAQTitleRadTextBox">
</telerik:RadTextBox>
<asp:RequiredFieldValidator ID="ReferenceTitleRequiredFieldValidator" runat="server"
ValidationGroup="FAQValidationGroup" Display="Dynamic" SetFocusOnError="true"
ControlToValidate="FAQTitleRadTextBox" CssClass="requiredfield" ErrorMessage="Required!"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="td18">
Description : <span class="mandatorymark">*</span>
</td>
<td class="td82">
<telerik:RadTextBox ID="FAQDescriptionRadTextBox" runat="server" TextMode="MultiLine"
Rows="8" SkinID="FAQDescriptionRadTextBox">
</telerik:RadTextBox>
<%-- <telerik:RadEditor ID="ReferenceDescriptionRadEditor" runat="server" AutoResizeHeight="false"
EnableResize="false" OnClientLoad="OnClientLoad" EditModes="Design, Html" AllowScripts="false"
ContentFilters="RemoveScripts,MakeUrlsAbsolute,FixUlBoldItalic,FixEnclosingP,IECleanAnchors,MozEmStrong,ConvertFontToSpan,ConvertToXhtml,IndentHTMLContent"
NewLineBr="true" StripFormattingOptions="AllExceptNewLines" StripFormattingOnPaste="AllExceptNewLines"
Height="600px" Width="700px">
<ImageManager ViewPaths="~/uploads/editoruploadimages" UploadPaths="~/uploads/editoruploadimages"
DeletePaths="~/uploads/editoruploadimages" />
<CssFiles>
<telerik:EditorCssFile Value="" />
</CssFiles>
<ContextMenus>
<telerik:EditorContextMenu Enabled="true">
<telerik:EditorTool Name="Cut" />
<telerik:EditorTool Name="Copy" />
<telerik:EditorTool Name="Paste" />
</telerik:EditorContextMenu>
</ContextMenus>
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="AjaxSpellCheck" />
<telerik:EditorTool Name="FindAndReplace" />
<telerik:EditorTool Name="SelectAll" />
<telerik:EditorTool Name="Cut" />
<telerik:EditorTool Name="Copy" />
<telerik:EditorTool Name="Paste" />
<telerik:EditorTool Name="Redo" />
<telerik:EditorTool Name="Undo" />
<telerik:EditorTool Name="InsertLink" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="Bold" />
<telerik:EditorTool Name="Italic" />
<telerik:EditorTool Name="Underline" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="FontName" />
<telerik:EditorTool Name="RealFontSize" />
<telerik:EditorTool Name="ApplyClass" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="ForeColor" />
<telerik:EditorTool Name="BackColor" />
<telerik:EditorTool Name="FormatStripper" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="InsertAnchor" />
<telerik:EditorTool Name="InsertCustomLink" />
<telerik:EditorTool Name="InsertDate" />
<telerik:EditorTool Name="InsertGroupbox" />
<telerik:EditorTool Name="InsertHorizontalRule" />
<telerik:EditorTool Name="InsertUnorderedList" />
<telerik:EditorTool Name="InsertOrderedList" />
<telerik:EditorTool Name="Paragraph" />
<telerik:EditorTool Name="InsertTable" />
<telerik:EditorTool Name="InsertSnippet" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="Indent" />
<telerik:EditorTool Name="Outdent" />
<telerik:EditorTool Name="JustifyRight" />
<telerik:EditorTool Name="JustifyLeft" />
<telerik:EditorTool Name="JustifyCenter" />
</telerik:EditorToolGroup>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="LinkManager" />
<telerik:EditorTool Name="ImageManager" />
<telerik:EditorTool Name="ImageMapDialog" />
<telerik:EditorTool Name="DocumentManager" />
<telerik:EditorTool Name="ConvertToLower" />
<telerik:EditorTool Name="ConvertToUpper" />
<telerik:EditorTool Name="ToggleScreenMode" />
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>
<div style="float: right;">
<span id="counter" style="text-align: right;"></span>
</div>--%>
<asp:RequiredFieldValidator ID="FAQDescriptionRequiredFieldValidator" runat="server"
ValidationGroup="FAQValidationGroup" Display="Dynamic" SetFocusOnError="true"
ControlToValidate="FAQDescriptionRadTextBox" CssClass="requiredfield" ErrorMessage="Required!"></asp:RequiredFieldValidator>
</td>
</tr>
<td class="td18">
Upload Document : <span class="mandatorymark">*</span>
</td>
<td class="td82">
<telerik:RadUpload ID="UploadDocumentRadUpload" runat="server" ControlObjectsVisibility="AddButton,RemoveButtons"
InputSize="50" AllowedFileExtensions=".png,.jpg,.jpeg,.gif" oncontextmenu="return false;"
onpaste="return false;" ReadOnlyFileInputs="true"/>
<span style="line-height: 15px; vertical-align: top;">
<asp:Label ID="ImageExtensionLabel" runat="server" Text="<br/>(Only .PNG,.JPG,.JPEG,.GIF images allowed)" />
<br />
<asp:Label runat="server" ID="ImageNameLabel" Visible="false" />
</span>
<br />
<telerik:RadProgressArea ID="UploadDocumentRadProgressArea" runat="server" ProgressIndicators="CurrentFileName">
</telerik:RadProgressArea>
<asp:CustomValidator ID="IsFilesSelectedCustomValidator" runat="server" ClientValidationFunction="IsFilesSelected"
Display="Dynamic" SetFocusOnError="true" CssClass="requiredfield" ValidationGroup="FAQValidationGroup"
ErrorMessage="Required!"></asp:CustomValidator>
<asp:CustomValidator ID="ValidateExtensionCustomValidator" runat="server" ClientValidationFunction="validateImageRadUpload"
Display="Dynamic" SetFocusOnError="true" CssClass="requiredfield" ValidationGroup="FAQValidationGroup"
ErrorMessage="<br/>(Only .PNG,.JPG,.JPEG,.GIF images allowed)"></asp:CustomValidator>
</td>
<tr>
<td>
</td>
<td class="td82">
<telerik:RadGrid ID="FilesRadGrid" runat="server" AllowFilteringByColumn="True" AllowPaging="True"
AllowSorting="True" AutoGenerateColumns="False" CellSpacing="0" DataSourceID="FilesSqlDataSource"
GridLines="None" Width="530px" Visible="false" OnItemCommand="FilesRadGrid_ItemCommand">
<MasterTableView DataKeyNames="FAQ_Uploads_ID" DataSourceID="FilesSqlDataSource">
<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
<HeaderStyle Width="20px" />
</RowIndicatorColumn>
<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
<HeaderStyle Width="20px" />
</ExpandCollapseColumn>
<Columns>
<telerik:GridBoundColumn DataField="FileName" FilterControlAltText="Filter FileName column"
HeaderText="File Name" SortExpression="FileName" UniqueName="FileName" FilterControlWidth="80%">
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
<ItemStyle HorizontalAlign="Left" Font-Size="11px" Font-Names="Arial" VerticalAlign="Middle" />
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="Action" AllowFiltering="false">
<ItemTemplate>
<asp:ImageButton ID="DeleteImageButton" runat="server" ToolTip="Delete" CommandName="Del"
ImageUrl="~/App_Themes/ELPISCMS/images/delete.png" OnClientClick="if (!confirm('Are you sure, you want to delete this record?')) {return false;}"
CommandArgument='<%# Eval("FAQ_Uploads_ID") +":"+ Eval("FAQ_Uploads_ID") %>' />
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
</telerik:GridTemplateColumn>
</Columns>
<EditFormSettings>
<EditColumn FilterControlAltText="Filter EditCommandColumn column" />
</EditFormSettings>
</MasterTableView>
<FilterMenu EnableImageSprites="False" />
<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default" />
</telerik:RadGrid>
<asp:SqlDataSource ID="FilesSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:elpis_cmsConnectionString %>"
SelectCommand="Usp_FAQ_Uploads_Select" SelectCommandType="StoredProcedure">
<SelectParameters>
<asp:ControlParameter ConvertEmptyStringToNull="true" ControlID="FAQIDHiddenField"
DbType="Int32" Name="FAQ_ID" PropertyName="Value" />
</SelectParameters>
</asp:SqlDataSource>
</td>
</tr>
<tr>
<td class="td18">
Status :
</td>
<td class="td82">
<asp:RadioButton ID="ActiveRadioButton" runat="server" CssClass="radiobutton" Checked="true"
GroupName="ActiveInactive" />Active
<asp:RadioButton ID="InactiveRadioButton" runat="server" CssClass="radiobutton" GroupName="ActiveInactive" />Inactive
</td>
</tr>
<tr>
<td>
</td>
<td class="td82">
<telerik:RadButton ID="SaveRadButton" runat="server" Text='<%# (Container is TreeListEditFormInsertItem) ? "Save" : "Update" %>'
CausesValidation="true" CommandName='<%# (Container is TreeListEditFormInsertItem) ? "PerformInsert" : "Update" %>'
ValidationGroup="FAQValidationGroup" Width="80px">
<Icon PrimaryIconUrl="~/App_Themes/ELPISCMS/images/save2.png" PrimaryIconLeft="5"
PrimaryIconTop="3" />
</telerik:RadButton>
<telerik:RadButton ID="CancelRadButton" runat="server" Text="Cancel" CommandName="Cancel"
CausesValidation="false" Width="80px">
<Icon PrimaryIconUrl="~/App_Themes/ELPISCMS/images/cancel2.png" PrimaryIconLeft="5"
PrimaryIconTop="3" />
</telerik:RadButton>
</td>
</tr>
</table>
</asp:Panel>
</FormTemplate>
</EditFormSettings>
<ClientSettings AllowItemsDragDrop="true">
<Selecting AllowItemSelection="True" />
</ClientSettings>
</telerik:RadTreeList>
<asp:SqlDataSource ID="FAQSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:elpis_cmsConnectionString %>"
SelectCommand="Usp_FAQ_Select" SelectCommandType="StoredProcedure"></asp:SqlDataSource>
Can anyone help me ?
Thanks