Getting .ascx RadioButtonLists Selected Item Via JS - javascript

I'm trying to get the currently selected item within an asp:RadioButtonList through the java script on the page. I've looked up how to do this, but none of the ways suggested has worked. I'm coding for a dnn module. Here's what I have:
<script type="text/javascript">
function BeginDownload() {
var radioObj = document.getElementsByName('<%= SliderStyles.ClientID %>');
for (var i = 0; i < radioObj.length; ++i ) {
if (radioObj[i].checked) {
if (radioObj[i].value == "0") { __doPostBack("ImgDownload", $("#waterwheel-carousel-horizon").CurrentSelectedImg().toString()); }
else if (radioObj[i].value == "1") { __doPostBack("ImgDownload", $("#slides").CurrentSelectedImg().toString()); }
}
}
}
<asp:Label runat="server" Text="Slider Style" Font-Bold="True" />
<asp:RadioButtonList ID="SliderStyles" runat="server" RepeatDirection="Horizontal" OnSelectedIndexChanged="SliderStyle_OnSelectedIndexChanged" AutoPostBack="True">
<asp:ListItem Text="Default" Value="0" Selected="True"></asp:ListItem>
<asp:ListItem Text="Slide Show" Value="1"></asp:ListItem>
</asp:RadioButtonList>
So far the value I get in my Javascript returns null each time.

Your for loop is incorrect change the "++i" to "i++" like this
for (var i = 0; i < radioObj.length; i++ )

Hello try with getElementsById
<script type="text/javascript">
function BeginDownload() {
var radioObj = document.getElementsById('<%= SliderStyles.ClientID %>');
for (var i = 0; i < radioObj.length; ++i ) {
if (radioObj[i].checked) {
if (radioObj[i].value == "0") { __doPostBack("ImgDownload", $("#waterwheel-carousel-horizon").CurrentSelectedImg().toString()); }
else if (radioObj[i].value == "1") { __doPostBack("ImgDownload", $("#slides").CurrentSelectedImg().toString()); }
}
}
}

Related

JavaScript CheckBox Change Color Not Working

Hi I am trying to use this checkAll function.
If I click on the checkAll checkbox, then all of the row will be selected and the background color will change accordingly.
Here is my javascript:
function checkAll(objRef) {
var GridView = objRef.parentNode.parentNode.parentNode;
var inputList = GridView.getElementsByTagName("input");
for (var i = 0; i < inputList.length; i++) {
var row = inputList[i].parentNode.parentNode;
if (inputList[i].type == "checkbox" && objRef != inputList[i]) {
if (objRef.checked) {
row.style.backgroundColor = "aqua";
inputList[i].checked = true;
}
else {
if (row.rowIndex % 2 == 0) {
row.style.backgroundColor = "#e4edfb";
} else {
row.style.backgroundColor = "white";
}
inputList[i].checked = false;
}
}
}
}
This is my code:
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" onclick="checkAll(this);" />
</HeaderTemplate>
<ItemStyle HorizontalAlign="Center" />
<ItemTemplate>
<asp:HiddenField ID="hidID" runat="server" Value='<%# Eval("Id") %>' />
<asp:CheckBox runat="server" ID="chkBoxMultipleSelect" CssClass="chkBoxMultipleSelect" OnClick="checkIfUnselected(this);" />
</ItemTemplate>
</asp:TemplateField>
After click on the checkAll checkBox, I am only able to change the color of that checkbox column only, but not my other column.
Any help is apparated. Thanks.
function checkAll(spanChk) {
var IsChecked = spanChk.checked;
var Chk = spanChk;
Parent = document.getElementById('gvMessageReportShow');
var items = Parent.getElementsByTagName('input');
for (i = 0; i < items.length; i++) {
if (items[i].id != Chk && items[i].type == "checkbox") {
if (items[i].checked != IsChecked) {
spanChk.parentElement.parentElement.style.backgroundColor = 'aqua';
items[i].click();
}
}
}
}
I ended up finding my answer here
http://www.codedigest.com/Articles/ASPNET/132_GridView_with_CheckBox_%E2%80%93_Select_All_and_Highlight_Selected_Row.aspx

Change txtbox length on radio btn change ASP.NET and JavaScript

I have this code:
<asp:RadioButtonList ID="rdoCardType" runat="server" onchange="ValidateCCN();" AutoPostBack="false" Width="190px">
<asp:ListItem Value="Visa">
<img src="images/visa.gif" /> Visa</asp:ListItem>
<asp:ListItem Value="MC">
<img src="images/mm.gif" /> Master Card</asp:ListItem>
<asp:ListItem Value="AE">
<img src="images/ae.gif" /> American Express</asp:ListItem>
<asp:ListItem Value="DC">
<img src="images/dc.gif" /> Discover</asp:ListItem>
</asp:RadioButtonList>
And the JavaScript is:
function ValidateCCN() {
var y = document.getElementById('ctl00_site_body_txtCscNr');
var x = document.getElementsByName('ctl00$site_body$rdoCardType');
for (var i = 0; i < x.length; i++) {
if (x[i].checked) {
if (x.value == "AE")
y.maxLength = '3';
break;
}
}
}
What am I missing? Because the length of textbox is not changing. Thanks!
It should be x[i].value -
function ValidateCCN() {
var y = document.getElementById('ctl00_site_body_txtCscNr');
var x = document.getElementsByName('ctl00$site_body$rdoCardType');
for (var i = 0; i < x.length; i++) {
if (x[i].checked) {
if (x[i].value == "AE")
y.maxLength = '3';
break;
}
}
}

using javascript to loop through asp.net radio button list to get selected value and text

I am creating a questions and answers page and the answers are a collection of asp.net radiobuttonlist as per the following: `
<div class="col-md-4">
<asp:RadioButtonList ID="Q1AnswersRadioButtonList" runat="server" RepeatLayout="Flow">
<asp:ListItem Value="Q1OptionARadioButton"></asp:ListItem>
<asp:ListItem Value="Q1OptionBRadioButton"></asp:ListItem>
<asp:ListItem Value="Q1OptionCRadioButton"></asp:ListItem>
<asp:ListItem Value="Q1OptionDRadioButton"></asp:ListItem>
</asp:RadioButtonList>
<br />
<textarea class="text-danger" id="Q1CorrectAnswerText" name="Q1CorrectAnswerText" readonly="readonly" wrap="soft"></textarea>
</div>
Now, I am using the following JavaScript function to loop through to find out which one the user selected. The following is the JavaScript code.
function GetUserAnswerOneSelection()
{
var elementRef = document.getElementById('Q1AnswersRadioButtonList');
var radioButtonListArray = elementRef.getElementsByTagName('input');
var checkedValues = '';
for (var i = 0; i < radioButtonListArray.length; i++) {
var radioButtonRef = radioButtonListArray[i];
if (radioButtonRef.checked == true) {
// To get the Text property, use this code:
var labelArray = radioButtonRef.parentNode.getElementsByTagName('label');
if (labelArray.length > 0) {
if (checkedValues.length > 0)
checkedValues += ', ';
checkedValues += labelArray[i].innerHTML;
}
}
}
userAnswer1 = checkedValues;
return userAnswer1;
}
The problem now is, it always breaks on this line var radioButtonListArray = elementRef.getElementsByTagName('input');
and reports that is undefined.
I need help please.
Try to put ClientIDMode="Static" in asp:RadioButtonList so you are able to get it in Javascript.
or do:
var elementRef = document.getElementById('<%= Q1AnswersRadioButtonList.ClientID %>');**
This works for me
function GetUserAnswerOneSelection() {
var elementRef = document.getElementById("Q1AnswersRadioButtonList");
var radioButtonListArray = elementRef.getElementsByTagName('input');
var checkedValues = '';
for (var i = 0; i < radioButtonListArray.length; i++) {
var radioButtonRef = radioButtonListArray[i];
if (radioButtonRef.checked == true) {
// To get the Text property, use this code:
var labelArray = radioButtonRef.parentNode.getElementsByTagName('label');
if (labelArray.length > 0) {
if (checkedValues.length > 0)
checkedValues += ', ';
checkedValues += labelArray[i].innerHTML;
}
}
}
userAnswer1 = checkedValues;
}
<asp:RadioButtonList ID="Q1AnswersRadioButtonList" runat="server" RepeatLayout="Flow" ClientIDMode="Static">
<asp:ListItem Value="Q1OptionARadioButton"></asp:ListItem>
<asp:ListItem Value="Q1OptionBRadioButton"></asp:ListItem>
<asp:ListItem Value="Q1OptionCRadioButton"></asp:ListItem>
<asp:ListItem Value="Q1OptionDRadioButton"></asp:ListItem>
</asp:RadioButtonList>
Or You can get it in one line using JQuery like
$(document).ready(function () {
$("#Q1AnswersRadioButtonList input").click(function () {
GetUserAnswerOneSelection();
alert( $("#Q1AnswersRadioButtonList input:checked").next("label").html());
});
});

How do I ensure inserted date stays inserted until checked box is unchecked?

Per this code below, when users check a box, date is automatically inserted into a textbox control called cDate. This works great:
function ClickBox(cb) {
var tr = cb;
while (tr.tagName != "TR") {
tr = tr.parentNode;
if (tr == null) return; // something went wrong
}
var inps = tr.getElementsByTagName("input");
for (var i = 0; i < inps.length; ++i) {
var inp = inps[i];
if (inp.name.indexOf("cDate") >= 0) {
inp.value = rightDate();
break;
}
}
}
These are the affected controls:
<ItemTemplate>
<asp:CheckBox ID="myrecord" runat="server" onclick="ClickBox(this)" />
</ItemTemplate>
<ItemTemplate>
<asp:TextBox runat="server" style="border: none;" ID="cDate"></asp:TextBox>
</ItemTemplate>
The issue users are currently having is that once a checkbox is checked and date is inserted, only way to remove the inserted dates is the click the Reset button.
They would prefer to have the inserted dates disappear once a checked box is unchecked.
This modified code below isn't working. I am not getting any errors, however, whenever I am checking a box or unchecking it, nothing is happening - no date is getting inserted anymore.
function ClickBox(cb) {
var tr = cb;
var inps = tr.getElementsByTagName("input");
if(cb.checked == 1){ // CheckBox checked condition
while (tr.tagName != "TR") {
tr = tr.parentNode;
if (tr == null) return; // something went wrong
}
for (var i = 0; i < inps.length; ++i) {
var inp = inps[i];
if (inp.name.indexOf("cDate") >= 0) {
inp.value = rightDate();
break;
}
}
}
else{
for (var i = 0; i < inps.length; ++i) {
var inp = inps[i];
inp.value = '';
}
}
}
I am not sure what I am doing wrong.
Thanks for your assistance.
Here's a very simple solution that works for me:
ASP.NET Markup:
<div>
<asp:CheckBox ID="cbDate" runat="server" onclick="ClickBox(this)" />
<br />
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
</div>
JavaScript:
function ClickBox(checkbox) {
var dateCheckbox = checkbox;
var dateTextBox = document.getElementById("txtDate");
if (dateCheckbox.checked === true) {
dateTextBox.value = "TODAY";
} else {
dateTextBox.value = "";
}
}
Hope this helps.

Setting value of text box in javascript function

I have a text box whose value I need to set in javascript function.
I calculate no of checkboxes checked in a grid and then assign the value to a hidden field whose value in turn is assigned to a text box.
Following is JS function.
function CountChkBx_tpm() {
var gvTrNomList = document.getElementById("gvTrNomList");
var numChecked = document.getElementById("hdn2");
var frm = document.forms['gvTrNomList'];
var flag = false;
for (var i = 0; i < document.forms[0].length; i++) {
if (document.forms[0].elements[i].id.indexOf('IsTPMSelected') != -1) {
if (document.forms[0].elements[i].checked) {
numChecked = numChecked + 1;
}
}
}
if (numChecked > 0)
document.getElementById('<%=txtTPMRecom.ClientID %>').Value = numChecked;
else
document.getElementById('<%=txtTPMRecom.ClientID %>').Value = '0';
}
It is being called at OnClick of checkboxes within grid:
<ItemTemplate>
<asp:CheckBox type="checkbox" runat="server" ID="IsTPMSelected" onclick="CountChkBx_tpm()" />
</ItemTemplate>
The same functionality is used for another checkbox with another JS function to set value for another textbox..and that is working absolutely fine!!
What could be the trouble!!
function CountChkBx() {
var gvTrNomList = document.getElementById("gvTrNomList");
var numChecked = document.getElementById("hdn");
var frm = document.forms['gvTrNomList'];
var flag = false;
for (var i = 0; i < document.forms[0].length; i++) {
if (document.forms[0].elements[i].id.indexOf('IsPocSelected') != -1) {
if (document.forms[0].elements[i].checked) {
numChecked = numChecked + 1;
}
}
}
if (numChecked > 0) {
document.getElementById('<%=txtCounterConfirmation.ClientID %>').value = numChecked;
}
else {
document.getElementById('<%=txtCounterConfirmation.ClientID %>').Value = '0';
}
}
this is for following check box
<ItemTemplate>
<asp:CheckBox type="checkbox" runat="server" ID="IsPocSelected" onclick="CountChkBx()" />
</ItemTemplate>
</asp:TemplateField>
The text boxes are:
<td style="width: 100px">
<asp:TextBox ID="txtCounterConfirmation" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
</td>
<td style="width: 100px">
<asp:TextBox ID="txtTPMRecom" runat="server"></asp:TextBox>
</td>
As far as I think you need to use
document.getElementById('<%=txtTPMRecom.ClientID %>').value
Instead of
document.getElementById('<%=txtTPMRecom.ClientID %>').Value
Concluding javscript code
function CountChkBx_tpm() {
var gvTrNomList = document.getElementById("gvTrNomList");
var numChecked = document.getElementById("hdn2");
var frm = document.forms['gvTrNomList'];
var flag = false;
for (var i = 0; i < document.forms[0].length; i++) {
if (document.forms[0].elements[i].id.indexOf('IsTPMSelected') != -1) {
if (document.forms[0].elements[i].checked) {
numChecked = numChecked + 1;
}
}
}
if (numChecked > 0)
document.getElementById('<%=txtTPMRecom.ClientID %>').value = numChecked;
else
document.getElementById('<%=txtTPMRecom.ClientID %>').value = '0';
}

Categories

Resources