Develop Reference

How do I use a checkbox to check all and output the checkbox functionality

I used a simple JavaScript function to select all of the checkboxes, but they don't output what they're supposed to output, which is outputting emails. Here's the JavaScript to output the emails and the one to check all of the checkboxes:
JavaScript to output the emails:
function emailNextWithAddress(chk,address)
{
var nextEmail, inside_where;
if(chk.checked === true)
{
nextEmail = document.createElement('input');
nextEmail.id = address;
nextEmail.value = address;
nextEmail.type = 'text';
nextEmail.name = 'email[]';
nextEmail.className = 'insemail';
nextEmail.style.display = 'inline-block';
inside_where = document.getElementById('addEmail');
inside_where.appendChild(nextEmail);
}
else
{
inside_where = document.getElementById(address);
inside_where.parentNode.removeChild(inside_where);
}
}
JavaScript to check all the checkboxes:
function toggle(chk) {
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i] != chk)
checkboxes[i].checked = chk.checked;
}
}
Here's the HTML as requested, the checkbox to select all(using '\"' because I'm using php):
echo "Selecionar todos: <input type=\"checkbox\" onclick=\"toggle(this);\"/>"
And the while function:
while($infoItems = $result->fetch_array()){
echo "
<div class = \"scroll\">
<form method=\"GET\" id=\"\"></form>
<table class =\"table\" id=\"table\">
<tbody>
<tr>
<td><input type=\"checkbox\" ".($infoItems['Enviado']?' checked':' ')." onclick=\"emailNextWithAddress(this, '".$infoItems['EmailGeral']."');\"/></td>
</tr>
</tbody>
</table>
</div>";
}

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

Replacing HTML content with dojo and javascript

Have made a table and stored it in a variale getcontent by using basic HTML.
getcontent="<table style="height: 1000px; ; width: 500px;" border="1">
<tbody>
<tr>
<td>[Assignment name]</td>
<td>[<span>Approximate Value of Contract</span>]</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>"
Contentinsquare is an array containg string which can be filled in th table. (SQUARE BRACKETS] in getcontent
contentinsquare=["name","100$"]
i want the value of contentinsqaure to be placed in between the sqaure brackets.For that i have used the code :-
var contentinsquare=["name","100$"]
var strInputCode = contentinsquare[1].replace(/&(lt|gt);/g, function (strMatch, p1){
return (p1 == "lt")? "<" : ">";
});
var strTagStrippedText = strInputCode.replace(/<\/?[^>]+(>|$)/g, "");
contentinsquare[1]=strTagStrippedText
var strforlabelname = []
var strfortextarea = []
var strfortext = []
var str = []
label = dojo.query('label');
console.log(label, "all label names")
for( i = 0; i < label.length; i++)
{
if(label[i].id != "")
{
inner = dojo.byId(label[i].id).innerHTML
var name = inner.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
strforlabelname.push(name)
}
}
console.log(strforlabelname, "string")
text = dojo.query('input')
for( i = 0; i < text.length; i++)
{
if(text[i].id == "")
{
}
else
{
innertext = dijit.byId(text[i].id).getValue();
str.push(innertext)
//console.log(str,"strng1")
}
}
textarea = dojo.query('textarea')
for( i = 0; i < textarea.length; i++)
{
if(textarea[i].id == ""||textarea[i].id =="textareaidfirst")
{
}
else
{
innertextarea = dojo.byId(textarea[i].id).value
str.push(innertextarea)
}
}
for( i = 0; i < strforlabelname.length; i++)
{
for( j = 0; j < contentinsquare.length; j++)
{
if(contentinsquare[j] == strforlabelname[i])
{
var patt = new RegExp("\\[" + strforlabelname[i] + "\\]", "g")
getcontent = getcontent.replace(patt, str[i]);
}
}
}
This results to :-
Result :-
"<table style="height: 1000px; ; width: 500px;" border="1">
<tbody>
<tr>
<td>name</td>
<td>[<span>Approximate Value of Contract</span>]</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>"
that is the sqaure brackets contaning <span> tag is not working. i want the 100 $ to be replaced over thr.

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