I need Help about set value from ASP dropdownlist

I need Help about set value from ASP dropdownlist - javascript

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();
});

Related

I want to use select2 in my Dropdown list. Here's my code. But it doesn't work. Do I need to write something in .cs file?

<link href="Content/css/select2.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$("#<%=ddlCName.ClientID%>").select2({
placeholder: "Choose One",
allowClear: true
});
});
</script>
<div class="col-md-3">
<asp:DropDownList ID="ddlCName" CssClass="form-control input-sm" runat="server" Height="33px" Width="250px" DataSourceID="SqlDataSource1" DataTextField="CName" DataValueField="CName">
</asp:DropDownList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:MyConnection %>" SelectCommand="SELECT [CName] FROM [CustomerRegister] ORDER BY [CName]"></asp:SqlDataSource>
</div>

How to change AJAX ColorPickerExtender from code behind

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?

Hide/show fields upon selecting a radiobutton value in asp.net

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;
}
}

Disable is Required Field Validator is not check in asp.net

Please how can I disable the required field validator is the check box is check.
Below is the code to the text box and required field validator.
<asp:CheckBoxList ID="business_owner_CheckBox" runat="server">
<asp:ListItem Value="1" Selected="false">I am a business owner</asp:ListItem>
</asp:CheckBoxList>
<asp:TextBox ID="business_name_Textbox" runat="server" CssClass="login-form-control col-xs-12 col-sm-12 col-md-12"
placeholder="Business Name"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="business_name_Textbox"
ValidationGroup="CreateUserWizard1"></asp:RequiredFieldValidator>

hide/show div on check

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();
}
});

Develop Reference

JavaScript is the programming language of the Web.

I need Help about set value from ASP dropdownlist - javascript

Related

I want to use select2 in my Dropdown list. Here's my code. But it doesn't work. Do I need to write something in .cs file?

How to change AJAX ColorPickerExtender from code behind

Hide/show fields upon selecting a radiobutton value in asp.net

Disable is Required Field Validator is not check in asp.net

hide/show div on check

Categories

Resources