I have a drop down list, say ddlTest, which has Opt1, Opt2 as items. On the same page I have a radio button list, with list items as rblItem1, rblItem2 and rblItem3. Now if a user selects Opt2 in the dropdown list, then I should hide rblItem3 or for any other option selected, I should show rblItem3 in the radio button list.
Can you please let me know if it is possible and how to do that using javascript.
<table>
<tr>
<td>
<asp:RadioButtonList ID="radiobuttonlist1" runat="Server" RepeatLayout="flow" RepeatDirection="horizontal">
<asp:ListItem Text="Radio 1" Value="1" Selected="True"></asp:ListItem>
<asp:ListItem Text="Radio 2" Value="2"></asp:ListItem>
<asp:ListItem Text="Radio 3" Value="3"></asp:ListItem>
</asp:RadioButtonList>
</td>
<td>
<input type="button" value="Submit" onclick="GetRadioButtonValue('<%= radiobuttonlist1.ClientID %>')" />
</td>
</tr>
</table>
Javascript Code:-
<script language="javascript" type="text/javascript">
// Get radio button list value
function GetRadioButtonValue(id)
{
var radio = document.getElementsByName(id);
for (var j = 0; j < radio.length; j++)
{
if (radio[j].checked)
//make hide the Item
}
}
</script>
Related
I have a cblSchedule checkboxlist in my .ascx page that allows selection of Daily/Weekly:
<div class="form-group" id="schedule">
<label class="control-label col-md-2" id="lblSchedule">Schedule</label>
<div class="col-md-3">
<div class="input-group">
<asp:CheckboxList ID="cblSchedule" ClientIDMode="Static" CssClass="chkLabel" runat="server" AutoPostBack="false" CellPadding="5" CellSpacing="5" RepeatDirection="Horizontal" RepeatLayout="Table" onchange="ToggleSchedule(this)" >
<asp:ListItem Text="Daily" Value="Daily"></asp:ListItem>
<asp:ListItem Text="Weekly" Value="Weekly"></asp:ListItem>
</asp:CheckboxList>
</div>
</div>
</div>
There is a chkSelectDay checkboxlist displayed when Weekly is checked:
<div class="form-group" id="divSelectDay" >
<label class="control-label col-md-2" id="lblSelectDay">Select Day of Week</label>
<div class="col-md-3">
<div class="input-group">
<asp:CheckBoxList ID="chkSelectDay" CssClass="chkLabel" ClientIDMode="Static" runat="server" AutoPostBack="false" CellPadding="5" CellSpacing="5" RepeatDirection="Horizontal" RepeatLayout="Table">
<asp:ListItem Value="Monday">Mon</asp:ListItem>
<asp:ListItem Value="Tuesday">Tue</asp:ListItem>
<asp:ListItem Value="Wednesday">Wed</asp:ListItem>
<asp:ListItem Value="Thursday">Thu</asp:ListItem>
<asp:ListItem Value="Friday">Fri</asp:ListItem>
<asp:ListItem Value="Saturday">Sat</asp:ListItem>
<asp:ListItem Value="Sunday">Sun</asp:ListItem>
</asp:CheckBoxList>
</div>
</div>
</div>
I have a toggle function that display/hide chkSelectDay when Weekly is checked/unchecked in cblSchedule :
function ToggleSchedule(controlId) {
var frmControl = document.getElementById(controlId.id);
var divDay = document.getElementById("divSelectDay");
var checkbox = frmControl.getElementsByTagName("input");
var counter = 0;
for (var i = 0; i < checkbox.length; i++) {
if (checkbox[i].checked)
{
if (checkbox[i].value == "Weekly")
divDay.style.display = 'block';
}
else
{
if (checkbox[i].value == "Weekly") {
divDay.style.display = 'none';
//UNCHECK ALL chkSelectDay checkboxes <--
}
}
}
}
I would like to add in the functionality of unchecking all checkboxes in chkSelectDay when Weekly is unchecked in cblSchedule.
I tried to retrieve checkbox count via $('#chkSelectDay').
But I was unable to use .Count nor .Length, so I can't use a for-loop to set .Checked = false.
Thank you
First thing you should know is by default CheckBoxList stores its value inside ViewState and not show it in client-side. You need to add ClientValue attribute inside ListItem to let checkboxlist values available in client-side:
<asp:CheckboxList ID="cblSchedule" ClientIDMode="Static" CssClass="chkLabel" runat="server" AutoPostBack="false" CellPadding="5" CellSpacing="5" RepeatDirection="Horizontal" RepeatLayout="Table" onchange="ToggleSchedule(this)" >
<asp:ListItem Text="Daily" Value="Daily" ClientValue="Daily"></asp:ListItem>
<asp:ListItem Text="Weekly" Value="Weekly" ClientValue="Weekly"></asp:ListItem>
</asp:CheckboxList>
Then, handle change event to make sure that the Weekly value is passed, otherwise uncheck all of chkSelectDay checkboxes:
$("#cblSchedule input[type=checkbox]").change(function () {
var value = $(this).parent().attr('clientvalue');
// check if the value is 'weekly'
if (this.checked && value != "Weekly") {
// set all day selection checkboxes to 'unchecked'
$("[id*=chkSelectDay] input").removeAttr("checked");
// hide day selection checkboxes
$('#divSelectDay').css('display', 'none');
}
else {
// do something else
}
});
Related issues:
Get the Checkboxlist value when unchecked Client-Side
Check uncheck all CheckBoxes on the basis of another CheckBox
ASP.Net CheckBoxList: Check or uncheck all checkboxes client side using jQuery
I'm having issues with dynamically updating a drop down list control when it is inside a repeater.
Basically I have a repeater and inside that repeater are 2 drop down lists. The one list is defined in my aspx page, the other drop down list is inside an update panel where I want to be able to have it dynamically update based on the selection of the first drop down list. I think part of my problem is the updatepanel is getting confused because I have more than one repeater item?
Here is the code for my repeater:
<asp:Repeater ID="billingTemplate" runat="server" OnItemDataBound="template_ItemDataBound">
<ItemTemplate>
<tr style="font-size: 100%" runat="server">
<td colspan="4" style="width: 100%; vertical-align: top">
<div class="panel panel-default panel-billing">
<asp:Panel CssClass="row panel-heading panel-heading-billing text-left" ID="headingBilling" ClientIDMode="Static" runat="server">
<div class="col-xs-1">
<input type="hidden" id="templateUK" runat="server" value='<%#Eval("templateUK")%>' />
</div>
<div class="col-sm-3">
<label for="ddlInvFilterType" class="col-sm-4 control-label text-right labelCls testclass">Filter Type:</label>
<div class="col-sm-8">
<asp:DropDownList runat="server" ID="ddlInvFilterType" ClientIDMode="Static" placeholder="Choose Filter Type" CssClass="form-control smallSize FilterType" AutoPostBack="true" OnSelectedIndexChanged="ddlFilterType_SelectedIndexChanged">
<asp:ListItem Value="">- None -</asp:ListItem>
<asp:ListItem Value="RevType1">Revenue Type 1</asp:ListItem>
<asp:ListItem Value="RevType2">Revenue Type 2</asp:ListItem>
<asp:ListItem Value="RevType3">Revenue Type 3</asp:ListItem>
<asp:ListItem Value="ServiceTeams">Service Team</asp:ListItem>
</asp:DropDownList>
</div>
</div>
<asp:UpdatePanel ID="InvFilterValuePanel" ClientIDMode="Static" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
<ContentTemplate>
<div class="col-sm-3">
<label for="ddlInvFilterValue" class="col-sm-4 control-label text-right labelCls">Filter Value:</label>
<div class="col-sm-8">
<asp:DropDownList runat="server" ID="ddlInvFilterValue" ClientIDMode="Static" placeholder="Choose Filter Value" CssClass="col-sm-6 form-control smallSize">
<asp:ListItem Value="">- None -</asp:ListItem>
</asp:DropDownList>
</div>
</div>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ddlInvFilterType" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
<asp:Panel CssClass="panel-collapse collapse" ID="collapseBilling" ClientIDMode="Static" runat="server">
<div class="panel-body">
<table class="table table-condensed table-bordered" style="margin: 0; padding: 0; border-top: none; border-bottom: none; border-left: thin; border-right: thin">
<tbody>
<%-- other controls --%>
</tbody>
</table>
</div>
</asp:Panel>
</div>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
Heres the code for my selected index change:
protected void ddlFilterType_SelectedIndexChanged(object sender, EventArgs e)
{
try
{
DropDownList ddl = (DropDownList)sender;
string ddlClass = ddl.CssClass;
string[] classes = ddlClass.Split(' ');
string repeaterClass = classes[classes.Length - 1];
string repeaterID = "0";
string appendStr = "";
if (repeaterClass.Contains("templateID"))
{
repeaterID = repeaterClass.Substring(repeaterClass.Length - 1);
appendStr = "_" + repeaterID;
}
foreach (RepeaterItem item in billingTemplate.Items)
{
HtmlInputHidden hidden = item.FindControl("headingBilling").FindControl("templateUK") as HtmlInputHidden;
if (hidden.Value == repeaterID)
{
DropDownList d1 = item.FindControl("headingBilling").FindControl("ddlInvFilterType") as DropDownList;
DropDownList d2 = item.FindControl("headingBilling").FindControl("ddlInvFilterValue") as DropDownList;
if (d1.SelectedValue.Length > 0)
{
d2.Items.Clear();
d2.Items.Add(new ListItem(" - None - ", ""));
switch (d1.SelectedValue)
{
case "ServiceTeams":
foreach (var pair in serviceTeamsController.GetAllServiceTeamsLOVs())
{
if (!String.IsNullOrWhiteSpace(pair.Value))
d2.Items.Add(new ListItem(pair.Value, pair.Key));
}
break;
default:
foreach (var pair in masterController.GetMasterLOVs(filterTypeDict[d1.SelectedValue]))
{
if (!String.IsNullOrWhiteSpace(pair.Value))
{
d2.Items.Add(new ListItem(pair.Value, pair.Key));
}
}
break;
}
}
else
{
d2.Items.Clear();
d2.Items.Add(new ListItem(" - None - ", ""));
}
}
}
}
catch (Exception ex)
{
}
}
Heres a screenshot of what I'm looking at when theres more than one repeater item:
Basically whats happening now is if I update the filter type in item2 it will update the filter value in item 1. If I update the filter type in item1 it will update the filter value in item 1 as expected.
What I want is to be able to update item2 filter type and then the filter value in item 2 is updated accordingly.
Anyone have any ideas on what I could be missing?
So ended up getting this to work, I think the main issue was the clientidmode was confusing the update panel somehow, so I removed that and made the update panel go around both drop downs. I also didnt end up needing the trigger so I removed that as well.
The RadioButtonList is as the follows with no auto postback. My problem is when I select option 1 (value 1) and click either link button, the variable NotifyMe in the code behind is always true because the selected item is always on the default. I tried to set the EnableViewState just for this RadioButtonList and leave the reset of the form without ViewState. It didn't work either. Thank you for your help.
<div id="preferencePopup" style="display: none" title="Set Preference">
Select an option than click either of the button below.
<div>
<ul id="preferenceOptions">
<li>
<asp:RadioButtonList ID="PreferenceNotification" runat="server" CssClass="radioButtonNoBorder">
<asp:ListItem Text="No notification" Value="1" />
<asp:ListItem Text="Notification" Value="2" selected="true" />
</asp:RadioButtonList>
</li>
</ul>
</div>
<div class="col-md-offset-1 col-md-11 col-sm-12 text-center">
<asp:LinkButton ID="btnSavePreference" runat="server" OnClick="btnSavePreference_Click" CssClass="btn btn-default">Clear & Save</asp:LinkButton>
<asp:LinkButton ID="btnAddAndSave" runat="server" OnClick="btnSavePreference_Click" CssClass="btn btn-default">Add & Save</asp:LinkButton>
</div>
</div>
protected void btnSavePreference_Click(object sender, EventArgs e) {
bool NotifyMe = PreferenceNotification.SelectedItem.Value == "2" ? true : false;
}
I added a DropDownList from the Toolbox to the Login page on a website I'm working on.
Once I choose a ListItem in the DropDownList (in my case lets say
Gym for example...), when clicked, I want that three bars we'll be opened below my DropDownList(for example, the bars that we'll be opened are Username, Password and ID), I mean three TextBoxes beneath each other.
I think you can either try the SelectedIndexChanged event or Javascript to display the textboxes without a postback.
<select>
<option value="1">Gym 1</option>
<option value="2">Gym 2</option>
<option value="3">Gym 3</option>
<select>
At firest you put your textboxes in a panle then hide this panel and
you should set Autopostback property of you drobdownlist to True and after selecting a item in DropDownList, postback will accur. So you can show that panel include text boxes.
What you might really be needing is dynamic text boxes.
In the html part:
<asp:DropDownList runat="server" ID="DDL1" autopostback = "true" onselectedindexchanged="DDL_SelectChanged" />
<asp:PlaceHolder runat="server" ID="PH1">
</asp:PlaceHolder>
In codebehind:
void DDL_SelectChanged(object sender, EventArgs e)
{
if (DDL1.SelectedIndex == 1)
{
for (int i = 0; i < 3; i++)
{
TextBox newTB = new TextBox();
newTB.ID = "TB" + i;
PH1.Controls.Add(newTB);
}
}
}
You could use MultiveView control. And set active view index in Dropdown's selectedIndexChanged event.
I wrote some example code for you:
ASPx side:
<asp:MultiView ID="multiView" ActiveViewIndex="-1" runat="server">
<asp:View ID="viewGym" runat="server">
<asp:TextBox ID="txtBxUserName" runat="server" />
<asp:TextBox ID="txtBxPassword" runat="server" />
<asp:TextBox ID="txtBxId" runat="server" />
</asp:View>
</asp:MultiView>
<asp:DropDownList ID="Dropdownlist1" runat="server" AutoPostBack="true"
onselectedindexchanged="Dropdownlist1_SelectedIndexChanged">
<asp:ListItem Text="Choose one club" Value="0" />
<asp:ListItem Text="Gym" Value="1" />
<asp:ListItem Text="Shoppers" Value="2" />
</asp:DropDownList>
Code Behind:
protected void Page_Load(object sender, EventArgs e)
{
if ( IsPostBack ) //don't forget :)
return;
}
protected void Dropdownlist1_SelectedIndexChanged( object sender, EventArgs e )
{
if ( Dropdownlist1.SelectedValue == "1" ) //Gym item selected
{
multiView.ActiveViewIndex = 0; //Gym view active
}
}
If you want to any view not active when first page load then you set the ActiveViewIndex with -1 in aspx code.
I have the following checkBox function in a gridView-
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkRow" runat="server" OnCheckedChanged="CheckBoxPN_CheckedChanged" AutoPostBack="true" />
</ItemTemplate>
Which creates a checkBox for every row created in the gridView.
My problem being that in the event-
protected void CheckBoxPN_CheckedChanged(Object sender, EventArgs e)
{
CheckBox chk = (CheckBox)sender;
GridViewRow row = (GridViewRow)chk.NamingContainer;
int gID = System.Convert.ToInt16(row.Cells[1].Text);
gridViewDataSource.SelectCommand = sqlCommand + gID;
}
I am using this to retrieve values. How ever once a user checks a checkBox, then goes to check another one, the previous checkBox state is still checked.
How can I modify the code to uncheck the last checkBox when the new one is checked?
EDIT
#Neil Knight 's answer implements the correct functionality, however as I am using the checked_changed event, when the new checkBox is getting checked, this fires the event, and gets the correct answer. However when the previous checkBox gets unchecked, this again fires the event and gets the wrong answer. How can I stop the gID value getting replaced with the old answer?
ASP.Net example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>checkboxes</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
<script language="javascript">
function SingleSelect(regex,current)
{
re = new RegExp(regex);
for(i = 0; i < document.forms[0].elements.length; i++) {
elm = document.forms[0].elements[i];
if (elm.type == 'checkbox') {
if (re.test(elm.name)) {
elm.checked = false;
}
}
}
current.checked = true;
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table width="100%" align="center">
<tr>
<td>
<br/>aaaa<input type="checkbox" id="chkOne" name="chkOne"
value="aaaa" checked onclick="SingleSelect('chk',this);" />
<br/>bbbb<input type="checkbox" id="chkTwo" name="chkTwo"
value="bbbb" onclick="SingleSelect('chk',this);" />
<br/>cccc<input type="checkbox" id="chkThree" name="chkThree"
value="cccc" onclick="SingleSelect('chk',this);" />
<br/>dddd<input type="checkbox" id="chkFour" name="chkFour"
value="dddd" onclick="SingleSelect('chk',this);" />
<br/>eeee<input type="checkbox" id="chkFive" name="chkFive"
value="eeee" onclick="SingleSelect('chk',this);" />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
</form>
</body>
</HTML>
Taken from Stephen Cheng's answer.
You can use a radio button as suggested by X.L.Ant (do remember to make them into the same group(you do this with GroupName="FOO" property of radio buttons))
alternatively(if Checkbox is what you really want to use)
you can unset all the CheckBoxes, except the one selected(which is terribly slow).
<ItemTemplate>
<asp:RadioButton ID="chkRow" runat="server" OnCheckedChanged="CheckBoxPN_CheckedChanged" AutoPostBack="true" GroupName="foo"/>
</ItemTemplate>