I have a self-assessment quiz with 10 questions. After the user answers "Yes" 3 times, a modal is supposed to display with a referral link. I can't seem to get the code right, I've stored the radio buttons in an array and looped though the array, adding a counter variable every time the "Yes" button is clicked, but after 3 radios are checked "yes" the modal does not display:
const referralModal = document.getElementById('referralModal');
const radios = [q1, q2, q3, q4, q5, q6, q7, q8, q9, q10];
let count = 0;
for (var i = 0; i < radios.length; i++) {
radios[i].addEventListener('change', (e)=>{
count++;
});
if (count === 3) {
referralModal.style.display = 'block';
}
}
You should check this inside the event listener function
const referralModal = document.getElementById('referralModal');
const radios = [q1, q2, q3, q4, q5, q6, q7, q8, q9, q10];
let count = 0;
for (var i = 0; i < radios.length; i++) {
radios[i].addEventListener('change', (e) => {
if (count === 3) {
referralModal.style.display = 'block';
}
count++;
});
}
Related
I wanted to make a specific form show and the other forms disappear when I click on one of four dropdown buttons. When I tested the code, no from is showing when I clicked on a button.
Here is my javascript code:
function showClass(className)
{
var allItems = document.getElementsByClassName('change-form');
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
It shows the form if I remove the top for loop.
Edit: Sorry guys I made a typo
Your code is going in and hiding all the items and then showing them right away. What you want to do is split the hide and show into different functions to trigger them at different times.
function showClass(className)
{
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
function hideClass(className){
var allItems = document.getElementsByClassName(className);
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
}
If you want to be able to swap them with one function you could use this:
function swapHide(className){
var firstItem = document.getElementsByClassName(className)[0];
var isDisplayed = firstItem.style.display == "block"
if(isDisplayed){
hideClass(className);
}else{
showClass(className)
}
}
I have a function that selects all checkboxes (selecionarTodos()) on all pages of a table (#tbTarefas). However, I want to use the same method to select all checkboxes in other tables, which have the same structure, only with different id.
I would like to check if a certain table is rendered at that moment on screen. Something like that.
Before
function selecionarTodos(source) {
const tabela = $("#tbTarefas").DataTable();
let celulasCheckbox = tabela.column(0).nodes();
for (let i = 0; i < celulasCheckbox.length; i++) {
let checkbox = celulasCheckbox[i].querySelector('input[type="checkbox"]');
checkbox.checked = source.checked;
}
}
After (Initial thinking)
function selecionarTodos(source) {
const tabelaTarefas = $("#tbTarefas").DataTable();
const tabelaAtendimento = $("#tbPendentes").DataTable();
if (tabelaTarefas) {
let CheckboxTarefasTd = tabelaTarefas.column(0).nodes();
for (let i = 0; i < CheckboxTarefasTd.length; i++) {
let checkbox = CheckboxTarefasTd[i].querySelector('input[type="checkbox"]');
checkbox.checked = source.checked;
}
}
else if (tabelaAtendimento) {
let CheckboxAtendimentoTd = tabelaAtendimento.column(0).nodes();
for (let i = 0; i < CheckboxAtendimentoTd.length; i++) {
let checkbox = CheckboxAtendimentoTd[i].querySelector('input[type="checkbox"]');
checkbox.checked = source.checked;
}
}
}
Datatables has a callback for once initialization has been completed.
$('#tbTarefas').on( 'init.dt', function () {
}
Or on each redraw use "draw.dt"
I am adding a radio button in a gridrow dynamically on rowdatabound event.
I want value of selected radio button of specific row of grid.
Currently I am getting value bt it will no return the value for specific row index.
See my below code:
function GetBlastid()
{
var gv = document.getElementById("<%=grdOofMailProcess.ClientID%>");
var rbs = gv.getElementsByTagName("input");
var flag = 0;
for (var i = 0; i < rbs.length; i++)
{
if (rbs[i].type == "radio")
{
if (rbs[i].checked)
{
alert(rbs[i]);
flag = 1;
document.getElementById('hdnBlastId').value=rbs[i].value
break;
}
}
}
}
well once you get which radiobox is checked navigate to its parent and get the row index row.rowIndex , i couldnt give you the exact code coz i dont know how you placed the radio button, whether its directly under a column or have a different parent.
function GetBlastid()
{
var gv = document.getElementById("<%=grdOofMailProcess.ClientID%>");
var rbs = gv.getElementsByTagName("input");
var flag = 0;
for (var i = 0; i < rbs.length; i++)
{
if (rbs[i].type == "radio")
{
if (rbs[i].checked)
{
alert(rbs[i]);
//here get the parent of rbs[i] and navigate to the row to get the row index.
flag = 1;
document.getElementById('hdnBlastId').value=rbs[i].value
break;
}
}
}
}
I have a Checkbox list. On the load of a page i want my first checkbox true and others are disable.I need to check only one checkbox from checkbox list and others should be disable.If use unchecked the checked checkbox then others should be enable means allowed only one check box checked.
My javascript code is here but on the load of page its not checked the first checkbox, also i want the id of each checkbox while using checkboxlist.
function CheckOptions(CheckBoxList) {
var checkboxlist = document.getElementById('CheckBoxList1');
var checkedCount = 0;
var options = CheckBoxList.getElementsByTagName('input');
for (var i = 0; i < options.length; i++) {
if (options[i].checked) {
checkedCount += 1;
}
}
if (checkedCount > 0) {
for (var j = 0; j < options.length; j++) {
if (!options[j].checked)
options[j].disabled = true;
} }
else {
for (var k = 0; k < options.length; k++) {
options[k].disabled = false;
}
}
}
If you're only wanting one checked at a time, it sounds like a group of radio buttons would better serve your purposes.
$(function() {
var checkboxes = $("input[type=checkbox]");
// select the first one on load
checkboxes.eq(0).attr("checked", "checked");
checkboxes.each(function(i, e) {
if (i > 0) {
$(e).attr("disabled", "disabled");
}
})
// handle further selections:
checkboxes.click(function() {
if ($(this).attr("checked")) {
var t = this;
checkboxes.each(function(i, e) {
if (e != t) {
$(e).attr("disabled", "disabled");
}
});
} else {
checkboxes.attr("disabled", null)
}
});
});
Here's the deal. The task is to write a function which should be able determine the number of checkboxes checked for each question and prompt a user if more than 3 answers were selected.
I have a total of 8 questions and each question has 4 to 8 answers, in the checkbox format.
This is what I came up with:
function countChecks(){
var m = 0;
var n = 0;
chk = document.getElementsByName("DSelectionID");
for(var i=0; i<myitems.length i=""></myitems.length>
var value = myItems[i];
for(n = 0; n < value.length; n++) {
if(value[n].checked) {
m++;
}
}
return m;
}
the above function works fine for one question and returns 'm' to the main function, which handles it this way:
var check = countchecks();
if (check > 3)
alert ("more than 3 checkboxes were selected");
else {
//do the thing
}
to traverse all the 8 questions this is what I came up with:
function countChecks(){
var m = 0;
var n = 0;
//this captures id's for the right questions
chk = document.getElementsByName("DSelectionID");
chk2 = document.getElementsByName("DSelectionID2");
chk3 = document.getElementsByName("DSelectionID3");
chk4 = document.getElementsByName("DSelectionID4");
chk5 = document.getElementsByName("DSelectionID5");
chk6 = document.getElementsByName("DSelectionID6");
chk8 = document.getElementsByName("DSelectionID8");
chk9 = document.getElementsByName("DSelectionID9");
var myItems = new Array();
myItems[0]= chk;
myItems[1]= chk2;
myItems[2]= chk3;
myItems[3]= chk4;
myItems[4]= chk5;
myItems[5]= chk6;
myItems[6]= chk8;
myItems[7]= chk9;
//loops through all the questions
for(var i=0; i
var value = myItems[i];
//loops through the checkboxes for each question
for(n = 0; n < value.length; n++)
{
if( value[n].checked)
{
m++;
if (m > 3) {
return false;
}
}
}
}
}
and the main body handles it like this:
var check = countChecks()
if (check == false)
alert ("more than 3 checkboxes were selected");
else {
//do the thing
}
It is something very simple I'm missing in the countChecks() function
Any ideas?
Using jquery would make this pretty trivial
if ($('#yourform input[type=checkbox]:checked').length() > 3) {
alert('More than 3 checked');
}
chk = document.getElementsByName("DSelectionID"); does not grab the ID, it grabs a reference to the element in the DOM.
To get the ID you need to use:
chk = document.getElementsByName("DSelectionID").getAttribute("id")