I am using an ASP RadioButtonList with ListItem elements inside. I have given each option value. See below as an example:
<asp:RadioButtonList ID="rblTestList" runat="server">
<asp:ListItem Selected="True" Text="Test1" Value="Test1" />
<asp:ListItem Text="Test2" Value="Test2" />
<asp:ListItem Text="Test3" Value="Test3" />
<asp:ListItem Text="Test4" Value="Test4" />
</asp:RadioButtonList>
I am trying to get the value of the selected ListItem. I am using the following line of code to get the value, but all I get is the value 1 (not the text value I gave it). The API says the Value property is of type String, so I see cannot see why it isn't working. (See: ListItem.Value Property)
var option = $('#<%=rblTestList.ClientID %> input[type=radio]:checked').val();
Does anyone know what the issue is here?
Edit: Updated code snippet (old one was wrong)
Use Checkbox On Change Event to Get Value
$('#<%=rblTestList.ClientID%>').on('change',function () {
if($(this).is(':checked')){ //Checks Checked or Not
var Value = $(this).val(); //Here Your Value
}
});
try this
$(function () {
$(".Jqanchor").click(function () {
var option = $('# input[type=radio]:checked').next().text();
alert(option);
});
})
and aspx
<asp:RadioButtonList ID="rblTestList" runat="server">
<asp:ListItem Selected="True" Text="Test1" Value="1" />
<asp:ListItem Text="Test2" Value="2" />
<asp:ListItem Text="Test3" Value="3" />
<asp:ListItem Text="Test4" Value="4" />
</asp:RadioButtonList>
content
Try this
$('document').ready(function () {
$('#<%=rblTestList.ClientID%>').click(function () {
if($(this).is(':checked')){
var selectedValue = $(this).val();
alert(selectedValue);
}
});
});
UPDATE 1:
It's a server side control and here you need to find the input radio control first and check for it's check or uncheck property.
Try this Update
$('document').ready(function () {
$('#<%=rblTestList.ClientID%>').find('input[type=radio]').click(function () {
if($(this).is(':checked')){
var selectedValue = $(this).val().replace('Test','');
alert(selectedValue);
}
});
});
UPDATE 2
if you want the numeic output then you have to put the options value in numeric like Value="1".
The HTML
<asp:RadioButtonList ID="rblTestList" runat="server">
<asp:ListItem Selected="True" Text="Test1" Value="1" />
<asp:ListItem Text="Test2" Value="2" />
<asp:ListItem Text="Test3" Value="3" />
<asp:ListItem Text="Test4" Value="4" />
</asp:RadioButtonList>
The jquery code remains same as in UPDATE 1
It turned out it was related to resource keys. I had initially used numbers and then changed to text but the resource keys were not updated so it always priority over the inline value attribute. I missed out the resource key part in my snippet as I thought it wasn't important. My mistake. Sorry for wasting everyone's time!
Related
How to only auto check option 3 if the if statement below is true?
I have the following in my .aspx:
<asp:CheckBoxList ID="CB_Test" runat="server">
<asp:ListItem Text="Opt 1" Value="1" />
<asp:ListItem Text="Opt 2" Value="2" />
<asp:ListItem Text="Opt 3" Value="3" />
</asp:CheckBoxList>
In the .aspx.cs page,
if(variable = "3")
CB_Test.Checked = true;
The above is not working for me.
I suppose you wanna check particular item depends on the value instead of the CheckBoxList itself.
Therefore, what you want should be something like
foreach (ListItem item in CB_Test.Items)
{
if (item.Value == "3")
item.Selected = true;
}
Hi I have dropdown list code I want to add placeholder there how I can add?
<asp:DropDownList id="ddlyear" runat="server" >
<asp:ListItem >Experience</asp:ListItem>
<asp:ListItem>Fresher</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:DropDownList>
I want to show like this
You can just do this:
<asp:DropDownList id="ddlyear" runat="server" >
<asp:ListItem selected hidden>Experience</asp:ListItem>
<asp:ListItem>Fresher</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:DropDownList>
The selected makes it the default, while hidden prevents it to be visible on the expanded list.
It's the simplest way possible.
You can't do it on HTML alone, you'd need Html + jQuery to achieve this.
<asp:DropDownList ID="ddlyear" runat="server">
<asp:ListItem>Experience</asp:ListItem>
<asp:ListItem>Fresher</asp:ListItem>
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
</asp:DropDownList>
After this, you need your jQuery to do the magic by removing and re attaching your placeholder.
<script>
var isChanged = false;
$(function () {
$('#ddlyear').focusin(function () {
if (!isChanged) {
// this removes the first item which is your placeholder if it is never changed
$(this).find('option:first').remove();
}
});
$('#ddlyear').change(function () {
// this marks the selection to have changed
isChanged = true;
});
$('#ddlyear').focusout(function () {
if (!isChanged) {
// if the control loses focus and there is no change in selection, return the first item
$(this).prepend('<option selected="selected" value="0">Experience</option>');
}
});
});
</script>
Take note that you need jQuery to use this, just install it as a nuget package or download it manually and add a declaration in your aspx.
<head runat="server">
<title></title>
// Sample only, you can place it in any location or use any version
<script src="../scripts/jquery-2.2.2.min.js"></script>
</head>
#amit
Brother try this....
<select placeholder="select your beverage">
<option value="" default="" selected="">select your beverage</option>
<option value="tea">Tea</option>
<option value="coffee">Coffee</option>
<option value="soda">Soda</option>
</select>
In many cases it would be acceptable to have an empty or dummy item as the first item. 'Empty' means that the value is empty, the text can be anything you want.
So like this:
<asp:DropDownList id="ddlyear" runat="server">
<asp:ListItem Value="">Select</asp:ListItem>
<asp:ListItem Value="Experience">Experience</asp:ListItem>
<asp:ListItem Value="Fresher">Fresher</asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
</asp:DropDownList>
I have a radioButtonList inside a Panel. The panel uses UpdatePanel to update its panel.
<asp:UpdatePanel ID="upnlTeacherDismissal" runat="server" UpdateMode="Conditional" OnLoad="tmrRefreshTeacher_OnTick">
<asp:Panel ID="pnlDismissalTeacher" runat="server"; color:White; width:100%;">
<asp:RadioButtonList ID="rbtnStatusDismissal" AutoPostBack="true"
runat="server" RepeatDirection="Horizontal" OnSelectedIndexChanged="rbtnStatusDismissal_OnSelectedIndexChanged" >
<asp:ListItem ID="id1" Text="In Class" Value="1" />
<asp:ListItem ID="id2" Text="Dismiss" Value="4" />
<asp:ListItem ID="id3" Text="Field Trip" Value="5" />
</asp:RadioButtonList>
The updatepanel refreshes every 5 seconds which is trigerred by Javascript function (I know there's timer from System.Class.UI but for some reason I have to use JS function). Here is the refresh function:
function refresh() {
//update teacher panel
__doPostBack('<%=upnlTeacherDismissal.UniqueID%>', '');
}
setInterval(refresh, 5000);
When doPostBack, on behind code, I want to set the radio button value to the updated value from database but there's no any change from the UI (radiobutton value is still 1). The program will execute this function every 5 seconds (not from rbtnStatusDismissal_OnSelectedIndexChanged).
protected void tmrRefreshTeacher_OnTick(object sender, EventArgs e)
{
//... few lines to check the database if table changes
rbtnStatusDismissal.SelectedValue = (int)data.statusID;
//let's say (int)data.statusID equals 5
upnlTeacherDismissal.Update();
}
I've tried to debug and see that .SelectedValue has been set to the value of the data.statusID (let's say 5). But the radio button's value in UI still equals 1 (instead of 5).
What's wrong and what should I do?
its work perfectly for me you are missing something i edited and replace that
<asp:UpdatePanel ID="upnlTeacherDismissal" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp:Panel ID="pnlDismissalTeacher" runat="server" style="color:White; width:100%;">
<asp:RadioButtonList ID="rbtnStatusDismissal" AutoPostBack="true" runat="server" RepeatDirection="Horizontal" OnSelectedIndexChanged="rbtnStatusDismissal_OnSelectedIndexChanged">
<asp:ListItem ID="id1" Text="In Class" Value="1" />
<asp:ListItem ID="id2" Text="Dismiss" Value="4" />
<asp:ListItem ID="id3" Text="Field Trip" Value="5" />
</asp:RadioButtonList>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
on server side
protected void rbtnStatusDismissal_OnSelectedIndexChanged(object sender, EventArgs e)
{
rbtnStatusDismissal.SelectedValue = "5";
upnlTeacherDismissal.Update();
}
and this js function
<script type="text/javascript">
function refresh() {
//update teacher panel
__doPostBack('<%=upnlTeacherDismissal.UniqueID%>', '');
}
setInterval(refresh, 5000);
</script>
if you have any question and will not get answer then ask in comments.
I have made a radio button list in an aspx page in C#
<asp:RadioButtonList ID="RblMentor_teacher_student" class="case" runat="server"
RepeatDirection="Horizontal" AppendDataBoundItems="False" >
<asp:ListItem Text="Docent" Value="0"></asp:ListItem>
<asp:ListItem Text="Mentor" Value="1"></asp:ListItem>
<asp:ListItem Text="Student" Value="2"></asp:ListItem>
</asp:RadioButtonList>
It works perfectly as I want that it shows the selected person is either teacher or student or mentor.
But I want that no one can change the selection of this.
Can anyone help.
You could put this in your Page_load() and it would disable the whole list.
RblMentor_teacher_student.Enabled = false;
Or you could disable a specific list item
<asp:ListItem Text="Docent" Value="0" Disabled="Disabled"></asp:ListItem>
You can set Enabled property to false
On selectedindexchanged event of radiobutton..then put enable property false for selected item
Using jQuery:
Benefit of using this is that the checked value will be always post on submit.
$(function () {
$("input[type=radio]", $("#<%= RblMentor_teacher_student.ClientID%>")).each(function (index) {
if ($(this).attr("checked") != "checked") {
$(this).attr("disabled", "disabled");
}
});
});
I have a form containing two DropDowns lists:
Marital Status
No. of Children
Now I would like to enable the No. of Children DropDown upon selection of following items in the Marital Status DropDown:
Widow
Divorced
Awaiting Divorce
How can I do it?
In the MaritalStaus DropDownList Selected Index changed event, If the selected values match your options then enable the NoOfChild DropDownList.
protected void MaritalStaus_SelectedIndexChanged(object sender, EventArgs e)
{
//Match the selected value here : for Example:
if (MaritalStaus.SelectedValue.Equals("Divorced") || /*Other Comparisions */)
{
NoOfChild.Enabled = true;
}
}
DropDown lists have ListItem collection in them. Each ListItem has a Text and a Value. Try setting the text as "Divorced" and value as "D" or better to an integer like "1", something similar to ID. You will get these Text/Value from a Database table if you are retrieving it from the Database.
Make the No. of Children DropDown Enabled = false by default and then Enable = true as explained in the code snippet above by ebad86.
you can also use cascading dropdown from ajaxcontroltoolkit
http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/CascadingDropDown/CascadingDropDown.aspx
.aspx
<asp:DropDownList ID="ddlMaritalStatus" runat="server" AutoPostBack="true"
onselectedindexchanged="ddlMaritalStatus_SelectedIndexChanged">
<asp:ListItem Text="" />
<asp:ListItem Text="Widow" />
<asp:ListItem Text="Divorced" />
<asp:ListItem Text="Awaiting Divorce" />
</asp:DropDownList>
<asp:DropDownList ID="ddlNoOfChildren" runat="server" Enabled="false">
<asp:ListItem Text="1" />
<asp:ListItem Text="2" />
<asp:ListItem Text="3" />
<!-- and so on -->
</asp:DropDownList>
aspx.cs
protected void ddlMaritalStatus_SelectedIndexChanged(object sender, EventArgs e)
{
if (ddlMaritalStatus.SelectedItem.Text == "Widow") // if widow is selected
ddlNoOfChildren.Enabled = true;
else
ddlNoOfChildren.Enabled = false;
}