It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 9 years ago.
Can anyone tell me how to make this work in IE? It works perfectly in every other browser!
I'm assuming the :visible is the problem?
TIA
$('.yes').click(function () {
$('.question:visible')
.fadeOut()
.closest('.question')
.nextAll('.question')
.eq(0)
.delay(400)
.fadeIn();
});
All questions are in this format:
<div class="question">
<p>Question 1</p>
<h1>is this a question?</h1>
<label class="btn"><input type="radio" name="question1" value="yes"><span class="yes">YES</span></label>
<label class="btn"><input type="radio" name="question1" value="no"><span class="no">NO</span></label>
<label class="btn"><input type="radio" name="question1" value="maybe"><span class="maybe">MAYBE</span></label>
</div>
Question >1 looks like this:
<div class="hiddenquestion">
<p>Question 2</p>
<h1>is this a question?</h1>
<label class="btn"><input type="radio" name="question2" value="yes"><span class="yes">YES</span></lable>
<label class="btn"><input type="radio" name="question2" value="no"><span class="no">NO</span></lable>
<label class="btn"><input type="radio" name="question2" value="maybe"><span class="maybe">MAYBE</span></lable>
</div>
where .hiddenquestion is of-course display: none;
Ok so there's a couple of problems here
First, your label tags are not closing correctly as someone has already commented </lable> should be </label>.
Second, from your example your hidden questions have the class attribute set like this <div class="hiddenquestion"> but i suspect there should be a space in there meaning this is what you wanted <div class="hidden question">. You should have a css .hidden { display: none; } and not .hiddenquestion
Third, you need to add a click handler to the radio button as well as the tag (or at this this is the only way it seems to work in IE) in which case your js should look something like this.
var fn = function () {
$('.question:visible')
.fadeOut()
.closest('.question')
.nextAll('.question')
.eq(0)
.delay(400)
.fadeIn();
};
// click handler on the yes label
$('.yes').click(fn);
// click handler on the actual yes radio
$(':radio[value="yes"]').change(fn);
I think your problem is this
<label class="btn"><input type="radio" name="question2" value="yes"><span class="yes">YES</span></lable>
Notice the invalid closing tag for <label>, </lable>. This renders the markup invalid in IE.
Update:
Tested in IE9/8 with following, works fine
Markup
<button class="yes">YESS!</button>
<div class="question" style="display: block">
<p>Question 1</p>
<h1>is this a question?</h1>
<label class="btn">
<input type="radio" name="question1" value="yes" />
<span class="yes">YES</span>
</label> <label class="btn">
<input type="radio" name="question1" value="no">
<span class="no">NO</span></label> <label class="btn">
<input type="radio" name="question1" value="maybe">
<span class="maybe">MAYBE</span></label>
</div>
<div class="question">
<p>Question 2</p>
<h1>is this a question?</h1>
<label class="btn">
<input type="radio" name="question1" value="yes" />
<span class="yes">YES</span>
</label> <label class="btn">
<input type="radio" name="question1" value="no">
<span class="no">NO</span></label> <label class="btn">
<input type="radio" name="question1" value="maybe">
<span class="maybe">MAYBE</span></label>
</div>
<div class="question">
<p>Question 3</p>
<h1>is this a question?</h1>
<label class="btn">
<input type="radio" name="question1" value="yes" />
<span class="yes">YES</span>
</label> <label class="btn">
<input type="radio" name="question1" value="no">
<span class="no">NO</span></label> <label class="btn">
<input type="radio" name="question1" value="maybe">
<span class="maybe">MAYBE</span></label>
</div>
CSS
.question{display: none;}
Update
In order to make it work on click of the radio button or the label text in all browsers, you'll have to change your javascript to
//change the selector of .yes to
$('label.yes').click(function () {...
And change the markup of "yes" section of the question to
<label class="btn yes">
<input type="radio" name="question1" value="yes" />
<span>YES</span>
</label>
Related
i have a simple html form where i have like 50 questions, all the questions hasve ther own radio button options, something like below:
<h3 class="text-danger">1. Question 1</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 2 </label>
<h3 class="text-danger">2. Question 2</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault1">
<label class="form-check-label" for="flexRadioDefault1">
Option 2 </label>
i want the user to complete all the questions,and only submit after completion, i did something like below:
$(function(){
$("input[type='radio']").change(function(){
$("input[type='submit']").prop("disabled", false);
});
});
<input type="submit" disabled="disabled"/>
however this is not accurate as the submit button enables if a user complete 1 question, can anyone please tell me how to accomplish this, thanks in advance
Make it simple by making one of the radio buttons selected
your code will look like
<h3 class="text-danger">1. Question 1</h3>
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault11" checked>
<label class="form-check-label" for="flexRadioDefault11">Option 1</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefaultq12">
<label class="form-check-label" for="flexRadioDefaultq12">Option 2 </label>
<h3 class="text-danger">2. Question 2</h3>
<input class="form-check-input" value="1" type="radio" name="q2" id="flexRadioDefaultq21" checked>
<label class="form-check-label" for="flexRadioDefaultq21"> Option 1 </label>
<input class="form-check-input" type="radio" value="2" name="q2" id="flexRadioDefaultq22">
<label class="form-check-label" for="flexRadioDefaultq22"> Option 2 </label>
$("#btn").on("click", function (e) {
e.preventDefault;
$(".radio").each(function (index) {
if (!$(this).is(":checked")) {
alert(index + "is uncheck");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<input type="radio" class="radio" />
<button id="btn">submit</button>
You need tu ose .each() method.
Each radio question should have a unique name so I changed them to q1,q2,q3. Even I added a wrapper for each question block. Whenever a question is answered, I loop each question block and check whether any block still remains unanswered. If any block(question) is unanswered, doEnable variable changes to false and loop break out.
$(function(){
$("input[type='radio']").change(function(){
let doEnable = true;
$(".form-check-input-wrap").each(function(){
if($(this).find("input[type='radio']:checked").length == 0){
doEnable = false;
return false;
}
});
if(doEnable) {
$("input[type='submit']").prop("disabled", false);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3 class="text-danger">1. Question 1</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q1" id="flexRadioDefault11">
<label class="form-check-label" for="flexRadioDefault11">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q1" id="flexRadioDefault12">
<label class="form-check-label" for="flexRadioDefault12">
Option 2 </label>
</div>
<h3 class="text-danger">2. Question 2</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q2" id="flexRadioDefault21">
<label class="form-check-label" for="flexRadioDefault21">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q2" id="flexRadioDefault22">
<label class="form-check-label" for="flexRadioDefault22">
Option 2 </label>
</div>
<h3 class="text-danger">3. Question 3</h3>
<div class="form-check-input-wrap">
<input class="form-check-input" value="1" type="radio" name="q3" id="flexRadioDefault31">
<label class="form-check-label" for="flexRadioDefault31">
Option 1
</label>
<input class="form-check-input" type="radio" value="2" name="q3" id="flexRadioDefault32">
<label class="form-check-label" for="flexRadioDefault32">
Option 2 </label>
</div>
<input type="submit" disabled="disabled"/>
I have a HTML form which includes questions with multiple choice answers formatted as radio buttons.
When the user answers 'Yes' to one of the questions, a supplementary question is shown. The function detects the "yes" value of the radio button input.
I can re-use the same function on other 'Yes'/'No' questions if I need to show an extra question when a user answers 'Yes' - I just apply the "toggle" class to the radio inputs, and set up the data-target attribute to match the ID of the hidden question block I want to show.
However, I can't re-use the same function on other questions in the form, because most of the questions don't have 'Yes'/'No' answers. Most of the input value attributes are unique.
How can the function be made re-usable, so that I can apply the same "toggle" class on any question in order to reveal a target block, rather than create a separate function for each answer that requires a supplementary question?
Below is a simplified example of the form - just four sample questions. The first and last questions have yes/no answer values, the other two questions have different answer values:
$(document).ready(function() {
$("input.toggle:radio").change(function() {
if ($(this).val() == "yes") {
$("#" + $(this).data("target")).slideDown();
} else {
$("#" + $(this).data("target")).slideUp();
}
});
});
.extra {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<div class="question">
<p><b>Question 1: Do you have a driving licence?</b></p>
<label><input type="radio" class="toggle" name="question1" value="no" data-target="extra-box1"> No</label>
<label><input type="radio" class="toggle" name="question1" value="yes" data-target="extra-box1"> Yes</label>
<div id="extra-box1" class="extra"><i>If user clicks 'Yes', show this block</i></div>
</div>
<div class="question">
<p><b>Question 2: What's your favourite primary colour?</b></p>
<label><input type="radio" class="toggle" name="question2" value="red" data-target="extra-box2"> Red</label>
<label><input type="radio" class="toggle" name="question2" value="yellow" data-target="extra-box2"> Yellow</label>
<label><input type="radio" class="toggle" name="question2" value="blue" data-target="extra-box2"> Blue</label>
<div id="extra-box2" class="extra"><i>If user clicks 'Yellow', show this block</i></div>
</div>
<div class="question">
<p><b>Question 3: What is your employment status?</b></p>
<label><input type="radio" class="toggle" name="question3" value="employed" data-target="extra-box3"> Employed</label>
<label><input type="radio" class="toggle" name="question3" value="unemployed" data-target="extra-box3"> Unemployed</label>
<div id="extra-box3" class="extra"><i>If user clicks 'Unemployed', show this block</i></div>
</div>
<div class="question">
<p><b>Question 4: Do you own your own home?</b></p>
<label><input type="radio" class="toggle" name="question4" value="no" data-target="extra-box4"> No</label>
<label><input type="radio" class="toggle" name="question4" value="yes" data-target="extra-box4"> Yes</label>
<div id="extra-box4" class="extra"><i>If user clicks 'Yes', show this block</i></div>
</div>
</form>
Thanks for any suggestions you can offer!
There could be multiple approaches to do this, one I am putting is that you can add some class say show to the radio button and on click of which you should show the div.extra
See the code below...
$(document).ready(function() {
$("input.toggle:radio").change(function() {
if ($(this).hasClass("show")){
$("#" + $(this).data("target")).slideDown();
} else {
$("#" + $(this).data("target")).slideUp();
}
});
});
.extra {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
<div class="question">
<p><b>Question 1: Do you have a driving licence?</b></p>
<label><input type="radio" class="toggle" name="question1" value="no" data-target="extra-box1"> No</label>
<label><input type="radio" class="toggle show" name="question1" value="yes" data-target="extra-box1"> Yes</label>
<div id="extra-box1" class="extra"><i>If user clicks 'Yes', show this block</i></div>
</div>
<div class="question">
<p><b>Question 2: What's your favourite primary colour?</b></p>
<label><input type="radio" class="toggle" name="question2" value="red" data-target="extra-box2"> Red</label>
<label><input type="radio" class="toggle show" name="question2" value="yellow" data-target="extra-box2"> Yellow</label>
<label><input type="radio" class="toggle" name="question2" value="blue" data-target="extra-box2"> Blue</label>
<div id="extra-box2" class="extra"><i>If user clicks 'Yellow', show this block</i></div>
</div>
<div class="question">
<p><b>Question 3: What is your employment status?</b></p>
<label><input type="radio" class="toggle" name="question3" value="employed" data-target="extra-box3"> Employed</label>
<label><input type="radio" class="toggle show" name="question3" value="unemployed" data-target="extra-box3"> Unemployed</label>
<div id="extra-box3" class="extra"><i>If user clicks 'Unemployed', show this block</i></div>
</div>
<div class="question">
<p><b>Question 4: Do you own your own home?</b></p>
<label><input type="radio" class="toggle" name="question4" value="no" data-target="extra-box4"> No</label>
<label><input type="radio" class="toggle show" name="question4" value="yes" data-target="extra-box4"> Yes</label>
<div id="extra-box4" class="extra"><i>If user clicks 'Yes', show this block</i></div>
</div>
</form>
I'm trying to create a form with 10+ questions on it.
Each question with have three answer options, "Yes" "No" "Not applicable" which are chosen via radio buttons.
When "No" is selected a div is shown with additional information, this would be applicable for each question.
Not being great at Javascript I consulted Stack Overflow, found something and have failed miserably to amend it:
<script type="text/javascript">
function yesnoCheck() {
if (document.getElementById('noCheck').checked) {
document.getElementById('ifNo').style.display = 'block';
}
else document.getElementById('ifNo').style.display = 'none';
}
</script>
<p>Question 1</p>
<input type="radio" onclick="javascript:yesnoCheck();" name="q1" id="yesCheck"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q1" id="noCheck"> No <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q1" id="naCheck"> Not applicable <br>
<div id="ifNo" style="display:none">
<p>Recommendation goes here</p>
</div>
<h2>Section header</h2>
<p>Question 2</p>
<input type="radio" onclick="javascript:yesnoCheck();" name="q2" id="yesCheck"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q2" id="noCheck"> No <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q2" id="naCheck"> Not applicable <br>
<div id="ifNo" style="display:none">
<p>Recommendation goes here</p>
</div>
<p>Question 3</p>
<input type="radio" onclick="javascript:yesnoCheck();" name="q3" id="yesCheck"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q3" id="noCheck"> No <br>
<input type="radio" onclick="javascript:yesnoCheck();" name="q3" id="naCheck"> Not applicable <br>
<div id="ifNo" style="display:none">
<p>Recommendation goes here</p>
</div>
This only works on the first question but not the others.
The intention is for this to go in a rails app and the number of questions could be large (more than 10) so was trying to create a short piece of code that would work on all questions.
Any help, from someone who knows what they're talking about (i.e. not me) would be extremely appreciated.
Do not use same id more than once. Here https://jsfiddle.net/o2kdb8ej/ you can find simple solution using jQuery, without any ids specified applicable for any number of questions. The main idea is to specify value for each radio button, handling change event for each radio button on the page, and in that handler check its value, and according to its value hide or show specified p element.
Is not valid html to have more than one element with the same id. You have multiple elements with id id=noCheck. When javascript code is executed the function getElementById() is looking for a single element, and returns the first one, that's why only the first div is showing.
You could assign the same name to every "No" radiobutton and use getElementsByName() instead. This returns a collection of elements, and then you could iterate over them to show all divs that must be shown.
Using same id for different elements in a html code is a bad way. You need to create different id's for different questions like:
<p>Question 1</p>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q1" id="yesCheck1"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q1" id="noCheck1"> No <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q1" id="naCheck1"> Not applicable <br>
<div id="ifNo1" style="display:none">
<p>Recommendation goes here</p>
<h2>Section header</h2>
<p>Question 2</p>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q2" id="yesCheck2"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q2" id="noCheck2"> No <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q2" id="naCheck2"> Not applicable <br>
<div id="ifNo2" style="display:none">
<p>Recommendation goes here</p>
<p>Question 3</p>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q3" id="yesCheck3"> Yes <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q3" id="noCheck3"> No <br>
<input type="radio" onclick="javascript:yesnoCheck(this.id);" name="q3" id="naCheck3"> Not applicable <br>
<div id="ifNo3" style="display:none">
<p>Recommendation goes here</p>
</div>
now in your javascript code:
function yesnoCheck() {
newId = id.split('k')[1]; //this will give 2 in "q2" (splitting)
var noCheck = "noCheck"
newNoCheck = noCheck.concat(newId); //if the newId is 2 then it will be "noCheck2"
var ifNo = "ifNo"
newifNo = ifNo.concat(newId); //if the newId is 2 then it will be "ifNo2"
if (document.getElementById(newNoCheck).checked) {
document.getElementById(newifNo).style.display = 'block';
}
else document.getElementById(newifNo).style.display = 'none';
}
You can find the working jsfiddle here
I made a multiple choice test with parsing XML of questions and answers using PHP. The generated HTML looks something like this:
<form>
<div id="category0">
<div id="set0">
<div class="question">What is 6 x 6?</div>
<input type="radio" name="0" value="3">3<br>
<input type="radio" name="0" value="30">30<br>
<input type="radio" name="0" value="36">36<br>
<input type="hidden" class="answer" value="36">
</div>
<div id="set1">
<div class="question">What is 2 x 6?</div>
<input type="radio" name="1" value="4">4<br>
<input type="radio" name="1" value="12">12<br>
<input type="radio" name="1" value="36">43<br>
<input type="hidden" class="answer" value="12">
</div>
<!-- A LOT MORE QUESTIONS -->
</div>
<div id="category1">
<div id="set2">
<div class="question">Which of these tools would you use to hammer a nail?</div>
<input type="radio" name="2" value="A hammer">A hammer<br>
<input type="radio" name="2" value="Another nail">Another nail<br>
<input type="radio" name="2" value="A saw">A saw<br>
<input type="hidden" class="answer" value="A hammer">
</div>
<div id="set3">
<div class="question">What color is a red truck?</div>
<input type="radio" name="3" value="red">red<br>
<input type="radio" name="3" value="blue">blue<br>
<input type="radio" name="3" value="green">green<br>
<input type="hidden" class="answer" value="red">
</div>
<!-- A LOT MORE QUESTIONS -->
</div>
<!-- MORE CATEGORIES WITH A LOT OF QUESTIONS-->
</form>
Categories are named "Category" + a number starting from 0 (category0, category1...)
The answer is stored in a hidden field and is exactly the same as the correct options value.
I created a JS function that checks if the selected answer is correct or not, and colors the background of set div according. The function is triggered onclick in each radio input.
I need help with creating a statistic/score of answers for all questions and for each category separately.
At the beginning the score would be 0 of all possible answers.
If I would click on the correct choice of first question the score would be 1 of all possible questions, and 1 of all questions of first category.
I would like to achive this live (when any button is clicked), without posting the form(no POST/GET).
Hope I described my problem so you can understand it, if any clarification is needed, please let me know.
So far I only worked with JS, but any solutions in jQuery as also welcome.
When a radio button is clicked, execute the same logic you already have to determine if answers are correct, but call it for EACH of your "categories", NOT just the one that was clicked.
Start a variable at 0 and increment it by 1 each time you find a correct answer. Then, after your loop, you can update your "Correct Answers" message with the variable's value. This won't require any postbacks.
You could do something like this
$('input[type="radio"]').change( function(){
var answer = $(this).siblings('.answer').val();
if ($(this).val() == answer) {
var score = $(this).parents().siblings('.score').val();
score++;
$(this).parents().siblings('.score').val(score)
console.log(score);
} else {
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<div id="category0">
<div id="set0">
<div class="question">What is 6 x 6?</div>
<input type="radio" name="0" value="3">3<br>
<input type="radio" name="0" value="30">30<br>
<input type="radio" name="0" value="36">36<br>
<input type="hidden" class="answer" value="36">
</div>
<div id="set1">
<div class="question">What is 2 x 6?</div>
<input type="radio" name="1" value="4">4<br>
<input type="radio" name="1" value="12">12<br>
<input type="radio" name="1" value="36">43<br>
<input type="hidden" class="answer" value="12">
</div>
<input type="hidden" class="score" value="0">
<p></p>
<!-- A LOT MORE QUESTIONS -->
</div>
<div id="category1">
<div id="set2">
<div class="question">Which of these tools would you use to hammer a nail?</div>
<input type="radio" name="2" value="A hammer">A hammer<br>
<input type="radio" name="2" value="Another nail">Another nail<br>
<input type="radio" name="2" value="A saw">A saw<br>
<input type="hidden" class="answer" value="A hammer">
</div>
<div id="set3">
<div class="question">What color is a red truck?</div>
<input type="radio" name="3" value="red">red<br>
<input type="radio" name="3" value="blue">blue<br>
<input type="radio" name="3" value="green">green<br>
<input type="hidden" class="answer" value="red">
</div>
<input type="hidden" class="score" value="0">
<p><p>
<!-- A LOT MORE QUESTIONS -->
</div>
<!-- MORE CATEGORIES WITH A LOT OF QUESTIONS-->
</form>
I'm facing one issue here,
I am trying to validate at least one radio button to be answered to each question,
but the error here is when I miss some question to answer, I am getting alert, it is fine, but my previous correct answers also disappearing, I mean the page is loading from the start it seems.
Workingfiddle here.
You can see my sample question form here:
<form name="myform" >
<div id="Q1" class="question">
<h3>1. How convenient is our company to use?</h3>
</div>
<div id="A1"class="answers">
<input type="radio" name="Q1ans" value="1">Extremely convenient<br>
<input type="radio" name="Q1ans" value="2">Very convenient<br>
<input type="radio" name="Q1ans" value="3">Moderately convenient<br>
<input type="radio" name="Q1ans" value="4">Not at all convenient<br>
</div>
<div id="Q2" class="question">
<h3>2. How professional is our company?</h3>
</div>
<div id="A2"class="answers">
<input type="radio" name="Q2ans" value="1">Extremely professional<br>
<input type="radio" name="Q2ans" value="2">Very professional<br>
<input type="radio" name="Q2ans" value="3">Moderately professional<br>
<input type="radio" name="Q2ans" value="4">Not at all professional<br>
</div>
<div id="Q3" class="question">
<h3>3. Compared to our competitors, is our product quality better, worse, or about the same?</h3>
</div>
<div id="A3"class="answers">
<input type="radio" name="Q3ans" value="1">Much better<br>
<input type="radio" name="Q3ans" value="2">some what better<br>
<input type="radio" name="Q3ans" value="3">slightly better<br>
<input type="radio" name="Q3ans" value="4">worse<br>
</div>
<div id="Q4" class="question">
<h3>4. How responsive is our company?</h3>
</div>
<div id="A4"class="answers">
<input type="radio" name="Q4ans" value="1">Much better<br>
<input type="radio" name="Q4ans" value="2">some what better<br>
<input type="radio" name="Q4ans" value="3">slightly better<br>
<input type="radio" name="Q4ans" value="4">worse<br>
</div>
<div id="Q5" class="question">
<h3>5. Do you like our company, neither like nor dislike it, or dislike it?</h3>
</div>
<div id="A5"class="answers">
<input type="radio" name="Q5ans" value="1">Like a great deal<br>
<input type="radio" name="Q5ans" value="2">Like a little<br>
<input type="radio" name="Q5ans" value="3">Dislike a little<br>
<input type="radio" name="Q5ans" value="4">Dislike a great deal<br>
</div><br><br>
<button type="submit" onclick="validate()">submit</button>
</form>
You could simply change:
onclick="validate()"
to:
onclick="return validate()"
and it will have the desired behavior. I think this is what you were trying to do, but the onclick() call never returned the value from validate().