I have 10 questions with "YES" and "No" answers. I need user to answer all of them. If all answers marked as "Yes", "Next" button should be enabled. If at least one answer "No" disabled.
Could you please show me how it can be done with javascript or jquery library?
Here is an example of my HTML, lets assume I have 2 questions
<p>
Question?<br />
<input type="radio" name="Question1" value="Yes" />Yes
<input type="radio" name="Question1" value="No" />No
</p>
<p>
Question 2?<br />
<input type="radio" name="Question2" value="Yes" />Yes
<input type="radio" name="Question2" value="No" />No
<p>
<button id="next" type="button">Next</button>
$('input[type="radio"]').change(function(e){
var $yes = $('input[type="radio"][value="Yes"]');
if ($yes.filter(':checked').length === $yes.length) {
$('#next').attr('disabled', false);
} else {
$('#next').attr('disabled', true);
}
});
See example →
Related
I am trying to create a really simple radio button quiz with javascript and an html form. When I try to take the form question values and put them into variables, they're not being taken. When I console.log q1 I just get undefined.
I've tried giving the radio buttons id's with getElementById, doesn't work. I've also tried document.forms['infoForm']['question1'].value;
function results() {
event.preventDefault();
var q1 = document.getElementsByName('question1').value;
var q2 = document.getElementsByName('question2').value;
var q3 = document.getElementsByName('question3').value;
var q4 = document.getElementsByName('question4').value;
console.log(q1);
}
<form name="infoForm" id="infoForm" onsubmit="return results();" method="post">
<fieldset>
<legend>Here's a Quiz!</legend>
<div class="question">
quiz question 1<br>
<input type="radio" name="question1" value="W">W<br>
<input type="radio" name="question1" value="R1">R<br>
<input type="radio" name="question1" value="W">W<br>
</div>
<div class="question">
quiz question 2<br>
<input type="radio" name="question2" value="R2">R<br>
<input type="radio" name="question2" value="W">W<br>
<input type="radio" name="question2" value="W">W<br>
</div>
<div class="question">
quiz question 3<br>
<input type="radio" name="question3" value="W">W<br>
<input type="radio" name="question3" value="R3">R<br>
<input type="radio" name="question3" value="W">W<br>
</div>
<div class="question">
quiz question 4<br>
<input type="radio" name="question4" value="W">W<br>
<input type="radio" name="question4" value="W">W<br>
<input type="radio" name="question4" value="R4">R<br>
</div>
<input type="submit" value="Submit">
</fieldset>
</form>
When using console.log() for the question variables I would like to see the value the user has actually chosen, instead of undefined.
.getElementsByName() returns an array of elements. However, using it, and grabbing the first item, will only give you the first item in the in the radio button set, and not the selected radio button.
Since you have name attributes, you can just use the path to get the element like this:
document.infoForm.question1.value
You can then do that for all 4 questions so it looks something like this:
function results() {
event.preventDefault();
var q1 = document.infoForm.question1.value;
var q2 = document.infoForm.question2.value;
var q3 = document.infoForm.question3.value;
var q4 = document.infoForm.question4.value;
console.log(q1, q2, q3, q4);
}
<form name="infoForm" id="infoForm" onsubmit="return results();" method="post">
<fieldset>
<legend>Here's a Quiz!</legend>
<div class="question">
quiz question 1<br>
<input type="radio" name="question1" value="W">W<br>
<input type="radio" name="question1" value="R1">R<br>
<input type="radio" name="question1" value="W">W<br>
</div>
<div class="question">
quiz question 2<br>
<input type="radio" name="question2" value="R2">R<br>
<input type="radio" name="question2" value="W">W<br>
<input type="radio" name="question2" value="W">W<br>
</div>
<div class="question">
quiz question 3<br>
<input type="radio" name="question3" value="W">W<br>
<input type="radio" name="question3" value="R3">R<br>
<input type="radio" name="question3" value="W">W<br>
</div>
<div class="question">
quiz question 4<br>
<input type="radio" name="question4" value="W">W<br>
<input type="radio" name="question4" value="W">W<br>
<input type="radio" name="question4" value="R4">R<br>
</div>
<input type="submit" value="Submit">
</fieldset>
</form>
There are some errors in your code.
The function getElementsByName() returns a NodeList, so you can't access the property value on it. Try to get the first index of it: getElementsByName()[0].value
The variable event is not defined. I guess that you're using the function results as an event listener. If so, the event is sent as a parameter and you need to define it:
function results(event) {
event.preventDefault();
var q1 = document.getElementsByName('question1')[0].value;
var q2 = document.getElementsByName('question2')[0].value;
var q3 = document.getElementsByName('question3')[0].value;
var q4 = document.getElementsByName('question4')[0].value;
console.log(q1);
}
I seem to be having some trouble validating a 4 question multiple choice quiz in JavaScript. Right now if none of the answers are selected the alert pops up, but if even only one answer is selected the alert doesn't pop. I'm running my function as an onclick for a submit button. I'm fairly new to JavaScript and JQuery but have other programming experience, so The problem is probably something simple but I cant see it.
The function is:
function quiz1(){
if (!$("input[#name=q1]:checked").val() ||
!$("input[#name=q2]:checked").val() ||
!$("input[#name=q3]:checked").val() ||
!$("input[#name=q4]:checked").val() ||
!$("input[#name=q5]:checked").val()
) {
alert("You're not done yet!");
}
}
The html is:
<p class="question">1. What is the answer to this question?</p>
<ul class="answers">
<input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>
<input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>
<input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>
<input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>
</ul>
<p class="question">2. What is the answer to this question?</p>
<ul class="answers">
<input type="radio" name="q2" value="a" id="q2a"><label for="q2a">Answer 1</label><br/>
<input type="radio" name="q2" value="b" id="q2b"><label for="q2b">Answer 2</label><br/>
<input type="radio" name="q2" value="c" id="q2c"><label for="q2c">Answer 3</label><br/>
<input type="radio" name="q2" value="d" id="q2d"><label for="q2d">Answer 4</label><br/>
</ul>
<p class="question">3. What is the answer to this question?</p>
<ul class="answers">
<input type="radio" name="q3" value="a" id="q3a"><label for="q3a">Answer 1</label><br/>
<input type="radio" name="q3" value="b" id="q3b"><label for="q3b">Answer 2</label><br/>
<input type="radio" name="q3" value="c" id="q3c"><label for="q3c">Answer 3</label><br/>
<input type="radio" name="q3" value="d" id="q3d"><label for="q3d">Answer 4</label><br/>
</ul>
<p class="question">4. What is the answer to this question?</p>
<ul class="answers">
<input type="radio" name="q4" value="a" id="q4a"><label for="q4a">Answer 1</label><br/>
<input type="radio" name="q4" value="b" id="q4b"><label for="q4b">Answer 2</label><br/>
<input type="radio" name="q4" value="c" id="q4c"><label for="q4c">Answer 3</label><br/>
<input type="radio" name="q4" value="d" id="q4d"><label for="q4d">Answer 4</label><br/>
</ul>
<div class="submit">
<input type="submit" onclick="quiz1()" value="Check Answers">
</div>
You have some syntax errors in there.
before:
function quiz1(){
if (!$("input[#name=q1]:checked").val() ||
!$("input[#name=q2]:checked").val() ||
!$("input[#name=q3]:checked").val() ||
!$("input[#name=q4]:checked").val() ||
!$("input[#name=q5]:checked").val()
) {
alert("You're not done yet!");
}
}
After:
function quiz1(){
if (!$("input[name='q1']:checked").val() ||
!$("input[name='q2']:checked").val() ||
!$("input[name='q3']:checked").val() ||
!$("input[name='q4']:checked").val()
) {
alert("You're not done yet!");
}
}
so with jquery when you want to reference a name you have to type it just like the name attribute in the html that is true with any attribute selector E.G.(data='', ng-someting=''...) and also you had one to many inputs in there XD
here is a jsfiddle
I have a few radio buttons, and when I select one of them, I also have to check another one.
For example, if I select yes on a radio button, another radio button must be automatically checked with no.
I tried a few scripts but don't seem to work.
Does anyone know a solution? I'm new in JS.
Thanks in advance!
> Live Demo <
<!--HTML-->
<input type="radio" name="group_1" value="yes" id="r1">Yes<br>
<input type="radio" name="group_1" value="no" id="r2">No<br>
<br>
<input type="radio" name="group_2" value="yes" id="r3">Yes<br>
<input type="radio" name="group_2" value="no" id="r4">No<br>
//Script
$("input[name='group_1']").click(function(){
if(this.value=="yes"){
$("input#r4").attr("checked",true);
}else{
$("input#r3").attr("checked",true);
}
});
$("input[name='group_2']").click(function(){
if(this.value=="yes"){
$("input#r2").attr("checked",true);
}else{
$("input#r1").attr("checked",true);
}
});
I'm not very certain on what you are trying to achieve but by using the "name" attribute this automatically happens...when you check one radio...the others with the same name get set to unchecked.
<input type="radio" name="someoption" value="0" />0
<input type="radio" name="someoption" value="1" />1
<input type="radio" name="someoption" value="2" />2
checking any one of the above will cause the other 2 to be unchecked
unless do you may be mean checkboxes or multiple option sets ?
javascript:
$('#myradio1').bind('change', function () {
$('#myradio3').attr('checked', 'checked');
});
html
<input type="radio" name="cols1" value="1" id="myradio1" />
<input type="radio" name="cols1" value="2" id="myradio2" />
<input type="radio" name="cols2" value="1" id="myradio3" />
<input type="radio" name="cols2" value="2" id="myradio4" />
see working example at http://jsfiddle.net/9jXbv/
For HTML markup like below:
<div>
<input type="radio" name="one" value="yes"> yes
<input type="radio" name="one" value="no"> no
</div>
<div>
<input type="radio" name="two" value="yes"> yes
<input type="radio" name="two" value="no"> no
</div>
you can use this JavaScript code:
$(":radio").on("change", function() {
var that = this;
$(":radio").filter(function() {
return this.value == "no" && this.name != that.name;
}).prop("checked", true);
});
DEMO: http://jsfiddle.net/nKLMX/
With jquery:
$("#radio1").change(function() {
$("#radio2").removeAttr("checked");
});
http://jsfiddle.net/
I've mocked up a pure JS solution to this ( No libraries )
<input type="radio" name="g1" value="1" />Yes
<br />
<input type="radio" name="g1" value="0" />No
<br /><br />
<input type="radio" name="g2" value="1" />Yes
<br />
<input type="radio" name="g2" value="0" />No
<script type="text/javascript">
var g1 = document.getElementsByName('g1'); // store g1 elements
var g2 = document.getElementsByName('g2'); // store g2 elements
// handle click functionality
function radio_checked_event(obj, f) {
if(obj.addEventListener) {
obj.addEventListener('click', f, false);
} else if(obj.attachEvent) {
obj.attachEvent('onclick', f);
}
}
// when you click on g1 yes
radio_checked_event(g1[0], function() {
//set g1 no to checked
g2[1].setAttribute('checked', 'checked');
});
</script>
I've an HTML form that I've put together...
There is a question "Can you attend?" with a "Yes" and "No" checkbox.
Obviously who submits the form will either attend or not, so I would like for the form to only allow one checkbox to be selected of the two.
Here's the HTML:
<p>Can you attend?</p>
<label>
<input type="checkbox" name="attendance" value="checkbox" id="Yes" />
Yes</label>
<label>
<input type="checkbox" name="attendance" value="checkbox" id="No" />
No</label>
What does my code need to be? I'm guessing some JavaScript?
Thank you
And thus the radio was born :-)
<p>Can you attend?</p>
<label>
<input type="radio" name="attendance" value="checkbox" id="Yes" />
Yes</label>
<label>
<input type="radio" name="attendance" value="checkbox" id="No" />
No</label>
Demo: http://jsbin.com/oreped/
I have a basic quiz/survey type application I'm working on, and I'd like to give the user a prompt before they submit if they haven't answered all the questions. All the questions are multiple choice using radio buttons:
<div class="question">
Q1: What is the second letter of the alphabet?
<div class="choices">
<input type="radio" name="question_1" value="1" /> A
<input type="radio" name="question_1" value="2" /> B
<input type="radio" name="question_1" value="3" /> C
</div>
</div>
<div class="question">
Q2: Which out of these is a berry?
<div class="choices">
<input type="radio" name="question_2" value="1" /> Apples
<input type="radio" name="question_2" value="2" /> Bananas
<input type="radio" name="question_2" value="3" /> Carrots
</div>
</div>
<div class="question"> ...etc
How do you find which groups haven't got an option ticked? Or at least, if there are any which haven't been answered?
jQuery is ok, and even preferred.
Ah, I figured it out:
$('div.question:not(:has(:radio:checked))')