jimmy118
Reputation: 323
Not sure how to dynamically check radio buttons, all located in one page, when user hits next
I am in the middle of a project where I am working on a survery for the user on a website. The user can either click a "back" button, which takes him to the previous question, or a "next" button, which takes him to the next question.
All of these questions are within the same parent div, seperated into their own divs. So they are all in the same page. I am giving each question div within the parent div a property of hide and show so that the relavant question shows up based on the user clicking next and back. So if the user clicks next, I will hide the current question div and show the next question div. Vice versa for when the user clicks the back button.
HTML
<div class="question-box">
<div class="progress-bar">
<h3 id="percent">7%</h3>
</div>
<div id="one" class="question">
<p>On a scale of 0-5, where 0 is not at all likely and 5 is extremely likely:</p>
<p>How likely are you to recommend Classic Screenings Cinema to someone else?</p>
<div class="answer">
<ul>
<li>0</li>
<li><input type="radio" autocomplete="off"" name="q0" value="0"></li>
</ul>
<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q0" value="1"></li>
</ul>
<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q0" value="2"></li>
</ul>
<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q0" value="3"></li>
</ul>
<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q0" value="4"></li>
</ul>
<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q0" value="5"></li>
</ul>
</div>
</div>
<div id="two" class="question">
<p>On a scale of 0-5, where 0 is not enjoyed it at all and 5 is enjoyed it a lot:</p>
<p>How much did you enjoy the film/event you watched?</p>
<div class="answer">
<ul>
<li>0</li>
<li><input type="radio" autocomplete="off" name="q1" value="0"></li>
</ul>
<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q1" value="1"></li>
</ul>
<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q1" value="2"></li>
</ul>
<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q1" value="3"></li>
</ul>
<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q1" value="4"></li>
</ul>
<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q1" value="5"></li>
</ul>
</div>
</div>
<div id="three" class="question">
<p>On a scale of 0-5, where 0 is very unhelpful and 5 is very helpful:</p>
<p>Overall, how helpful were the Classic Screenings staff?</p>
<div class="answer">
<ul>
<li>0</li>
<li><input type="radio" autocomplete="off" name="q2" value="0"></li>
</ul>
<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q2" value="1"></li>
</ul>
<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q2" value="2"></li>
</ul>
<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q2" value="3"></li>
</ul>
<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q2" value="4"></li>
</ul>
<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q2" value="5"></li>
</ul>
</div>
</div>
<div id="four" class="question">
<p>Did you purchase any food / snacks from the cinema?</p>
<div class="yesOrNo">
Yes<input class="yorn snacks" autocomplete="off" type="radio" name="food" value="yes">
No<input class="yorn snacks" autocomplete="off" type="radio" name="food" value="no">
</div>
<div id="food-followUp">
<p>On a scale of 0-5, where 0 is very poor and 5 is excellent:</p>
<p>What do you rate the quality of the food / snacks?</p>
<div class="answer">
<ul>
<li>0</li>
<li><input type="radio" autocomplete="off" name="q3" value="0"></li>
</ul>
<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q3" value="1"></li>
</ul>
<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q3" value="2"></li>
</ul>
<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q3" value="3"></li>
</ul>
<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q3" value="4"></li>
</ul>
<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q3" value="5"></li>
</ul>
</div>
</div>
</div>
<div id="five" class="question">
<p>Did you visit the toilet facilities during your visit to Clasic Screenins Cinema?</p>
<div class="yesOrNo">
Yes<input class="yorn facilities" autocomplete="off" type="radio" name="yorn" value="yes">
No<input class="yorn facilities" autocomplete="off" type="radio" name="yorn" value="no">
</div>
<div id="facilities-followUp">
<p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
<p>Cleanliness of the toilet facilities</p>
<div class="answer">
<ul>
<li>0</li>
<li><input type="radio" autocomplete="off" name="q4" value="0"></li>
</ul>
<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q4" value="1"></li>
</ul>
<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q4" value="2"></li>
</ul>
<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q4" value="3"></li>
</ul>
<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q4" value="4"></li>
</ul>
<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q4" value="5"></li>
</ul>
</div>
</div>
</div>
<div id="six" class="question">
<p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
<p>The amount of time it took to purchase your ticket, factoring in any time with queuing?</p>
<div class="answer">
<ul>
<li>0</li>
<li><input type="radio" autocomplete="off" name="q5" value="0"></li>
</ul>
<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q5" value="1"></li>
</ul>
<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q5" value="2"></li>
</ul>
<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q5" value="3"></li>
</ul>
<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q5" value="4"></li>
</ul>
<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q5" value="5"></li>
</ul>
</div>
</div>
<div id="seven" class="question">
<p>With regards to entering the cinema screen and taking your allocated seat, please let us know how strong you agree with the following statements, with 0 representing strongly disagree and 5 representing strongly agree.</p>
<p>My allocated seat was in great condition</p>
<div class="answer">
<ul>
<li>0</li>
<li><input type="radio" autocomplete="off" name="q6" value="0"></li>
</ul>
<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q6" value="1"></li>
</ul>
<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q6" value="2"></li>
</ul>
<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q6" value="3"></li>
</ul>
<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q6" value="4"></li>
</ul>
<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q6" value="5"></li>
</ul>
</div>
<p>The area around my seat was clean and tidy</p>
<div class="answer">
<ul>
<li>0</li>
<li><input type="radio" autocomplete="off" name="q7" value="0"></li>
</ul>
<ul>
<li>1</li>
<li><input type="radio" autocomplete="off" name="q7" value="1"></li>
</ul>
<ul>
<li>2</li>
<li><input type="radio" autocomplete="off" name="q7" value="2"></li>
</ul>
<ul>
<li>3</li>
<li><input type="radio" autocomplete="off" name="q7" value="3"></li>
</ul>
<ul>
<li>4</li>
<li><input type="radio" autocomplete="off" name="q7" value="4"></li>
</ul>
<ul>
<li>5</li>
<li><input type="radio" autocomplete="off" name="q7" value="5"></li>
</ul>
</div>
</div>
<div id="eight" class="question">
<p>Were there any disruptions that occured during the viewing of you movie / event?</p>
<div class="yesOrNo">
Yes<input class="yorn" autocomplete="off" type="radio" name="yorn" value="yes">
No<input class="yorn" autocomplete="off" type="radio" name="yorn" value="no">
</div>
<p class="disrupted">Please tell us more about the disruption and what staff did to handle this</p>
<textarea></textarea>
</div>
<div id="nine" class="question">
<h2>THANK YOU FOR COMPLETING OUR SURVEY!</h2>
<p>We are very grateful towards you taking the time out to complete this survery.</p>
<p>Every couple of months our team reflect on these surverys and we develop straregies on the best ways to deal with areas in which can do with improving, as well as ideas on how to further strengthen the positives.</p>
<p>Once again, we thank you for filling in the survey and we hope to see you soon!</p>
</div>
</div>
<div class="navigate">
<div id="backBtn" class="back questionchoice">
<h2>BACK</h2>
</div>
<div id="nextBtn" class="next questionchoice">
<h2>NEXT</h2>
</div>
</div>
</div>
js:
$(document).ready(function(){
var facilityQ = document.querySelectorAll(".facilities");
var foodChoice = document.querySelectorAll(".snacks");
var backBtn = document.getElementById("backBtn");
var nextBtn = document.getElementById("nextBtn");
var questions = ["one","two","three","four","five","six","seven","eight","nine"];
currentQuestion = 0;
//scrolling to next question
$(nextBtn).click(function(){
currentQuestion++;
if (currentQuestion == questions.length-1){
nextBtn.style.display = "none";
backBtn.style.display = "none";
}
if (currentQuestion >= 1){
backBtn.style.visibility = "visible";
}
if (currentQuestion < questions.length){
document.getElementById(questions[currentQuestion]).style.display = "block";
document.getElementById(questions[currentQuestion-1]).style.display = "none";
}
});
$(foodChoice[0]).click(function(){
$("#food-followUp").slideDown();
})
$(facilityQ[0]).click(function(){
$("#facilities-followUp").slideDown();
})
// scrolling to previous question
$(backBtn).click(function() {
if (currentQuestion > 0) {
document.getElementById(questions[currentQuestion]).style.display = "none";
document.getElementById(questions[currentQuestion - 1]).style.display = "block";
}
currentQuestion--;
if (currentQuestion === 0) {
backBtn.style.visibility = "hidden";
}
});
THE PROBLEM:
I have stumbled across a problem which I didnt even think of before laying out the survery this way. I really wanted to have that single page survey functionality but I am struggling to come up with a solution on how to check each radio button question, to ensure the user has selected one, before clicking on the next button.
Is anyone with a bit more experiance able to help me out here? I have been trying to think of a way but whenever I think I have found one, it raises another problem.
Your time, help and suggesstions are very much apprecited!
Upvotes: 0
Views: 68
Answers (3)
Emilio Clemente
Reputation: 66
Maybe you could concat the current question number to the element name so you can check if that specific group of radio buttons is selected.
function getCheckedValue( groupName ) {
var radios = document.getElementsByName( groupName );
for( i = 0; i < radios.length; i++ ) {
if( radios[i].checked ) {
return radios[i].value;
}
}
return false;
}
if ( getCheckedValue( "q" + currentQuestion ) ) {
// there is a radio button selected, proceed
} else {
// ask the user to select a radio button
}
(How to check if radio button is checked got from here In JavaScript, how can I get all radio buttons in the page with a given name?)
Hope it helps
Upvotes: 1
MMallette
Reputation: 134
You're almost there all you have to do is add this right above "currentQuestion++;" and close the else after your current code. This will validate that something in the current input has been checked before allowing the code to go through. I would suggest adding something that prompts them to select an option.
var checkinput
document.getElementById(questions[currentQuestion]).getElementsByTagName("input");
if (checkinput.value == ""){
}
else{
Upvotes: 0
James Harrington
Reputation: 3226
You could check for visible inputs and see if there is at least 1 checked
$('.class:visible').find('input[type=radio]:checked').val()
I have not tested this.. but it will at least get you on the right path.
I noticed you had some errors in your html as well. I cleaned it up a bit here ya go!
<div class="question-box">
<div class="progress-bar">
<h3 id="percent">7%</h3>
</div>
<div id="one" class="question">
<p>On a scale of 0-5, where 0 is not at all likely and 5 is extremely likely:</p>
<p>How likely are you to recommend Classic Screenings Cinema to someone else?</p>
<div class="answer">
<ul>
<li>0</li>
<li>
<input type="radio" autocomplete="off" name="q0" value="0">
</li>
</ul>
<ul>
<li>1</li>
<li>
<input type="radio" autocomplete="off" name="q0" value="1">
</li>
</ul>
<ul>
<li>2</li>
<li>
<input type="radio" autocomplete="off" name="q0" value="2">
</li>
</ul>
<ul>
<li>3</li>
<li>
<input type="radio" autocomplete="off" name="q0" value="3">
</li>
</ul>
<ul>
<li>4</li>
<li>
<input type="radio" autocomplete="off" name="q0" value="4">
</li>
</ul>
<ul>
<li>5</li>
<li>
<input type="radio" autocomplete="off" name="q0" value="5">
</li>
</ul>
</div>
</div>
<div id="two" class="question">
<p>On a scale of 0-5, where 0 is not enjoyed it at all and 5 is enjoyed it a lot:</p>
<p>How much did you enjoy the film/event you watched?</p>
<div class="answer">
<ul>
<li>0</li>
<li>
<input type="radio" autocomplete="off" name="q1" value="0">
</li>
</ul>
<ul>
<li>1</li>
<li>
<input type="radio" autocomplete="off" name="q1" value="1">
</li>
</ul>
<ul>
<li>2</li>
<li>
<input type="radio" autocomplete="off" name="q1" value="2">
</li>
</ul>
<ul>
<li>3</li>
<li>
<input type="radio" autocomplete="off" name="q1" value="3">
</li>
</ul>
<ul>
<li>4</li>
<li>
<input type="radio" autocomplete="off" name="q1" value="4">
</li>
</ul>
<ul>
<li>5</li>
<li>
<input type="radio" autocomplete="off" name="q1" value="5">
</li>
</ul>
</div>
</div>
<div id="three" class="question">
<p>On a scale of 0-5, where 0 is very unhelpful and 5 is very helpful:</p>
<p>Overall, how helpful were the Classic Screenings staff?</p>
<div class="answer">
<ul>
<li>0</li>
<li>
<input type="radio" autocomplete="off" name="q2" value="0">
</li>
</ul>
<ul>
<li>1</li>
<li>
<input type="radio" autocomplete="off" name="q2" value="1">
</li>
</ul>
<ul>
<li>2</li>
<li>
<input type="radio" autocomplete="off" name="q2" value="2">
</li>
</ul>
<ul>
<li>3</li>
<li>
<input type="radio" autocomplete="off" name="q2" value="3">
</li>
</ul>
<ul>
<li>4</li>
<li>
<input type="radio" autocomplete="off" name="q2" value="4">
</li>
</ul>
<ul>
<li>5</li>
<li>
<input type="radio" autocomplete="off" name="q2" value="5">
</li>
</ul>
</div>
</div>
<div id="four" class="question">
<p>Did you purchase any food / snacks from the cinema?</p>
<div class="yesOrNo">
Yes
<input class="yorn snacks" autocomplete="off" type="radio" name="food" value="yes"> No
<input class="yorn snacks" autocomplete="off" type="radio" name="food" value="no">
</div>
<div id="food-followUp">
<p>On a scale of 0-5, where 0 is very poor and 5 is excellent:</p>
<p>What do you rate the quality of the food / snacks?</p>
<div class="answer">
<ul>
<li>0</li>
<li>
<input type="radio" autocomplete="off" name="q3" value="0">
</li>
</ul>
<ul>
<li>1</li>
<li>
<input type="radio" autocomplete="off" name="q3" value="1">
</li>
</ul>
<ul>
<li>2</li>
<li>
<input type="radio" autocomplete="off" name="q3" value="2">
</li>
</ul>
<ul>
<li>3</li>
<li>
<input type="radio" autocomplete="off" name="q3" value="3">
</li>
</ul>
<ul>
<li>4</li>
<li>
<input type="radio" autocomplete="off" name="q3" value="4">
</li>
</ul>
<ul>
<li>5</li>
<li>
<input type="radio" autocomplete="off" name="q3" value="5">
</li>
</ul>
</div>
</div>
</div>
<div id="five" class="question">
<p>Did you visit the toilet facilities during your visit to Clasic Screenins Cinema?</p>
<div class="yesOrNo">
Yes
<input class="yorn facilities" autocomplete="off" type="radio" name="yorn" value="yes"> No
<input class="yorn facilities" autocomplete="off" type="radio" name="yorn" value="no">
</div>
<div id="facilities-followUp">
<p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
<p>Cleanliness of the toilet facilities</p>
<div class="answer">
<ul>
<li>0</li>
<li>
<input type="radio" autocomplete="off" name="q4" value="0">
</li>
</ul>
<ul>
<li>1</li>
<li>
<input type="radio" autocomplete="off" name="q4" value="1">
</li>
</ul>
<ul>
<li>2</li>
<li>
<input type="radio" autocomplete="off" name="q4" value="2">
</li>
</ul>
<ul>
<li>3</li>
<li>
<input type="radio" autocomplete="off" name="q4" value="3">
</li>
</ul>
<ul>
<li>4</li>
<li>
<input type="radio" autocomplete="off" name="q4" value="4">
</li>
</ul>
<ul>
<li>5</li>
<li>
<input type="radio" autocomplete="off" name="q4" value="5">
</li>
</ul>
</div>
</div>
</div>
<div id="six" class="question">
<p>On a scale of 0-5, where 0 is extremely dissatisfied and 5 is extremely satisfied, how would you rate the following:?</p>
<p>The amount of time it took to purchase your ticket, factoring in any time with queuing?</p>
<div class="answer">
<ul>
<li>0</li>
<li>
<input type="radio" autocomplete="off" name="q5" value="0">
</li>
</ul>
<ul>
<li>1</li>
<li>
<input type="radio" autocomplete="off" name="q5" value="1">
</li>
</ul>
<ul>
<li>2</li>
<li>
<input type="radio" autocomplete="off" name="q5" value="2">
</li>
</ul>
<ul>
<li>3</li>
<li>
<input type="radio" autocomplete="off" name="q5" value="3">
</li>
</ul>
<ul>
<li>4</li>
<li>
<input type="radio" autocomplete="off" name="q5" value="4">
</li>
</ul>
<ul>
<li>5</li>
<li>
<input type="radio" autocomplete="off" name="q5" value="5">
</li>
</ul>
</div>
</div>
<div id="seven" class="question">
<p>With regards to entering the cinema screen and taking your allocated seat, please let us know how strong you agree with
the following statements, with 0 representing strongly disagree and 5 representing strongly agree.</p>
<p>My allocated seat was in great condition</p>
<div class="answer">
<ul>
<li>0</li>
<li>
<input type="radio" autocomplete="off" name="q6" value="0">
</li>
</ul>
<ul>
<li>1</li>
<li>
<input type="radio" autocomplete="off" name="q6" value="1">
</li>
</ul>
<ul>
<li>2</li>
<li>
<input type="radio" autocomplete="off" name="q6" value="2">
</li>
</ul>
<ul>
<li>3</li>
<li>
<input type="radio" autocomplete="off" name="q6" value="3">
</li>
</ul>
<ul>
<li>4</li>
<li>
<input type="radio" autocomplete="off" name="q6" value="4">
</li>
</ul>
<ul>
<li>5</li>
<li>
<input type="radio" autocomplete="off" name="q6" value="5">
</li>
</ul>
</div>
<p>The area around my seat was clean and tidy</p>
<div class="answer">
<ul>
<li>0</li>
<li>
<input type="radio" autocomplete="off" name="q7" value="0">
</li>
</ul>
<ul>
<li>1</li>
<li>
<input type="radio" autocomplete="off" name="q7" value="1">
</li>
</ul>
<ul>
<li>2</li>
<li>
<input type="radio" autocomplete="off" name="q7" value="2">
</li>
</ul>
<ul>
<li>3</li>
<li>
<input type="radio" autocomplete="off" name="q7" value="3">
</li>
</ul>
<ul>
<li>4</li>
<li>
<input type="radio" autocomplete="off" name="q7" value="4">
</li>
</ul>
<ul>
<li>5</li>
<li>
<input type="radio" autocomplete="off" name="q7" value="5">
</li>
</ul>
</div>
</div>
<div id="eight" class="question">
<p>Were there any disruptions that occured during the viewing of you movie / event?</p>
<div class="yesOrNo">
Yes
<input class="yorn" autocomplete="off" type="radio" name="yorn" value="yes"> No
<input class="yorn" autocomplete="off" type="radio" name="yorn" value="no">
</div>
<p class="disrupted">Please tell us more about the disruption and what staff did to handle this</p>
<textarea></textarea>
</div>
<div id="nine" class="question">
<h2>THANK YOU FOR COMPLETING OUR SURVEY!</h2>
<p>We are very grateful towards you taking the time out to complete this survery.</p>
<p>Every couple of months our team reflect on these surverys and we develop straregies on the best ways to deal with areas
in which can do with improving, as well as ideas on how to further strengthen the positives.</p>
<p>Once again, we thank you for filling in the survey and we hope to see you soon!</p>
</div>
</div>
<div class="navigate">
<div id="backBtn" class="back questionchoice">
<h2>BACK</h2>
</div>
<div id="nextBtn" class="next questionchoice">
<h2>NEXT</h2>
</div>
</div>
Upvotes: 1
Related Questions
- Check if a set of radio buttons are checked
- How to check the values of multiple dynamic radio buttons in a form using jquery
- Check radio button depending on variable value
- Can not check the radio button dynamically using Javascript/Jquery
- Dynamically, check radio button with for loop
- Check if any radio button is checked, than execute code (multiple sets of buttons)
- Check different radio buttons at the same time with jquery
- how to check each input attr if type radio and checked
- How to check if a radio button is selected, then check for the next radio button and show different content?
- Check multiple sets of radio buttons with jQuery