Develop Reference

How do I know if a user has selected an option in a form in html + javascript

I am trying to build a quiz with questions and options but I don't know how to add the options to the quiz. Also, I want to know if I selected the correct option and if the number of correct answers is shown at the end. Can someone help me build this?
I have tried adding options but I can't get the output needed.
<form align="center" id = "test">
Question 1: <input type="radio" name="radiogroup1" value="radio" id="radiogroup1"> Option 1
<input type="radio" name="radiogroup1" value="radio" id="radiogroup2"> Option 2 <br><be>
</form>

See if this helps you: (just an example to get the idea)
function submitAnswers() {
var total = 5;
var score = 0;
//Get user input
var q1 = document.forms["quizForm"]["q1"].value;
var q2 = document.forms["quizForm"]["q2"].value;
var q3 = document.forms["quizForm"]["q3"].value;
var q4 = document.forms["quizForm"]["q4"].value;
var q5 = document.forms["quizForm"]["q5"].value;
// Validation
for (var i = 1; i <= total; i++) {
if (eval('q' + i) == null || eval('q' + i) == '') {
alert("you missed question " + i);
return false;
}
}
//set correct answers
var answers = ["b", "d", "c", "a", "b"]
//check answers
for (var i = 1; i <= total; i++) {
if (eval('q' + i) == answers[i - 1]) {
score++;
}
}
alert('You scored ' + score + " out of " + total);
return false;
}
<div class="container">
<section>
<form name="quizForm" onsubmit="submitAnswers(); return false">
<h3>1. Question number one?</h3>
<input type="radio" name="q1" value="a" id="q1a"> a. answer11<br>
<input type="radio" name="q1" value="b" id="q1b"> b. answer12<br>
<input type="radio" name="q1" value="c" id="q1c"> c. answer13<br>
<input type="radio" name="q1" value="d" id="q1d"> d. answer14<br>
<h3>2. Question number two?</h3>
<input type="radio" name="q2" value="a" id="q2a"> a. answer21<br>
<input type="radio" name="q2" value="b" id="q2b"> b. answer22<br>
<input type="radio" name="q2" value="c" id="q2c"> c. answer23<br>
<input type="radio" name="q2" value="d" id="q2d"> d. answer24<br>
<h3>3. Question number three?</h3>
<input type="radio" name="q3" value="a" id="q3a"> a. answer31<br>
<input type="radio" name="q3" value="b" id="q3b"> b. answer32<br>
<input type="radio" name="q3" value="c" id="q3c"> c. answer33<br>
<input type="radio" name="q3" value="d" id="q3d"> d. answer34<br>
<h3>4. Question number four ?</h3>
<input type="radio" name="q4" value="a" id="q4a"> a. answer41<br>
<input type="radio" name="q4" value="b" id="q4b"> b. answer42<br>
<input type="radio" name="q4" value="c" id="q4c"> c. answer43<br>
<input type="radio" name="q4" value="d" id="q4d"> d. answer44<br>
<h3>5. Question number five ?</h3>
<input type="radio" name="q5" value="a" id="q5a">a. answer51<br>
<input type="radio" name="q5" value="b" id="q5b">b. answer52<br>
<br><br>
<input type="submit" value="Submit Answers">
</form>
</section>
</div>

Sum of Radio button values printed to the user

I'm very new to html.
I have a survey with two questions where the question choices are presented with radio buttons as this html code shows:
<form>
<p id="description">1. Question 1?</p>
<p>
<label><input type="radio" name="q1" value="5" /> Yes</label>
<label><input type="radio" name="q1" value="0" /> No</label>
</p>
<p id="description">2. Question 2?</p>
<p>
<label><input type="radio" name="q2" value="5" /> Yes</label>
<label><input type="radio" name="q2" value="0" /> No</label>
</p>
</form>
I want to print to the user the sum of his two selections.
So the output could be "You score is 10." if he answered yes to both questions etc.
How can I do this in the simplest way with the code being on the same page as the html code above? Is that possible?

var question1Answers = document.getElementsByName('q1');
var question2Answers = document.getElementsByName('q2');
var answer = 0;
question1Answers.forEach((e) => {
if (e.checked) {
answer += e.value;
break;
}
});
question2Answers.forEach((e) => {
if (e.checked) {
answer += e.value;
break;
}
});
console.log(answer);

please try this:
$("input[type='button']").click(function () {
var score = getChecklistItems();
alert("You score is : " + score);
});
function getChecklistItems() {
var total_score = 0
var result = $("input:radio:checked").get();
var checked_value = $.map(result, function (element) {
return $(element).attr("value");
});
for (i = 0; i < checked_value.length; i++) {
total_score += parseInt(checked_value[i])
}
return total_score
}
<form>
<p id="description">1. Question 1?</p>
<p>
<label><input type="radio" name="q1" value="5" /> Yes</label>
<label><input type="radio" name="q1" value="0" /> No</label>
</p>
<p id="description">2. Question 2?</p>
<p>
<label><input type="radio" name="q2" value="5" /> Yes</label>
<label><input type="radio" name="q2" value="0" /> No</label>
</p>
<p><input type="button" value="Submit"></p>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

issue with if/else conditions with radio elements

I'm not good with Javascript and I'm trying to build a two-question quiz based on yes-no answers. When I look at the console I see the yes-no values if I do console.log(answer1 + answer3); But the alert doesn't work. If I remove .checked and do equal to true/false the first alert works.
Any help would be appreciated
var answer1 = document.getElementById('q1').value;
var answer2 = document.getElementById('q2').value;
var answer3 = document.getElementById('q3').value;
var answer4 = document.getElementById('q4').value;
if (answer1.checked && answer3.checked) {
alert('walking park');
}
else if (answer1.checked && answer4.checked) {
alert('no walk in park');
}
else if (answer2.checked && answer4.checked ) {
alert('oh noooo!');
}
else if (answer2.checked && answer3.checked) {
alert('cor blimey gov!');
}
<form>
<p>Question 1</p>
<fieldset>
<label for="Question1">Can your dog eat food?</label>
<input type="radio" id="q1" name="question1" value="yes"> Yes<br>
<input type="radio" id="q2" name="question1" value="no"> No
</fieldset>
<p>Question 2</p>
<fieldset>
<label for="Question2">Can your dog run in the park</label>
<input type="radio" id="q3" name="question2" value="yes"> Yes<br>
<input type="radio" id="q4" name="question2" value="no"> No
</fieldset>
<button type="button" id="myBtn" class="btn btn-med btn-brand-one">submit</button>
</form>

Use checked == true or simply checked and remove .value
answer1 = document.getElementById('q1');
answer2 = document.getElementById('q2');
answer3 = document.getElementById('q3');
answer4 = document.getElementById('q4');
function checkanswear(event){
event.preventDefault()
if (answer1.checked && answer3.checked) {
alert('walking park');
}
else if (answer1.checked&& answer4.checked) {
alert('no walk in park');
}
else if (answer2.checked && answer4.checked ) {
alert('oh noooo!');
}
else if (answer2.checked && answer3.checked) {
alert('cor blimey gov!');
}
}
<form>
<p>Question 1</p>
<fieldset>
<label for="Question1">Can your dog eat food?</label>
<input type="radio" id="q1" name="question1" value="yes"> Yes<br>
<input type="radio" id="q2" name="question1" value="no"> No
</fieldset>
<p>Question 2</p>
<fieldset>
<label for="Question2">Can your dog run in the park</label>
<input type="radio" id="q3" name="question2" value="yes"> Yes<br>
<input type="radio" id="q4" name="question2" value="no"> No
</fieldset>
<button onclick="checkanswear(event)" id="myBtn" class="btn btn-med btn-brand-one">submit</button>
</form>

The problem is that the .value of your checkboxes is the string "yes" or "no". Strings don't have a checked attribute.
Solution: Just remove the .value part. Let answer1, answer2, etc be the input elements themselves. Then you can use .checked on them.
Example:
document.getElementById('myBtn').onclick = function() {
var answer1 = document.getElementById('q1');
var answer2 = document.getElementById('q2');
var answer3 = document.getElementById('q3');
var answer4 = document.getElementById('q4');
if (answer1.checked && answer3.checked) {
alert('walking park');
} else if (answer1.checked && answer4.checked) {
alert('no walk in park');
} else if (answer2.checked && answer4.checked) {
alert('oh noooo!');
} else if (answer2.checked && answer3.checked) {
alert('cor blimey gov!');
}
};
<form>
<p>Question 1</p>
<fieldset>
<label for="Question1">Can your dog eat food?</label>
<input type="radio" id="q1" name="question1" value="yes"> Yes<br>
<input type="radio" id="q2" name="question1" value="no"> No
</fieldset>
<p>Question 2</p>
<fieldset>
<label for="Question2">Can your dog run in the park</label>
<input type="radio" id="q3" name="question2" value="yes"> Yes<br>
<input type="radio" id="q4" name="question2" value="no"> No
</fieldset>
<button type="button" id="myBtn" class="btn btn-med btn-brand-one">submit</button>
</form>

Validation of Multiple radiobox with different name using javascript

I have the following code. This is a quiz and i want to validate the quiz form in such a way that user have to attempt all the questions. Without answering all the questions user can not proceed to submission. A alertbox should be displayed if any question is not answered.
My code is as follows
<form method="post" action="" name="quizform" id="quizform">
<h4> 1)This is first question</h4>
a) <input type="radio" name="a1" value="1" id="1" /><label for="1">Option 1</label><br />
b) <input type="radio" name="a1" value="2" id="2" /><label for="2">Option 1</label><br />
c) <input type="radio" name="a1" value="3" id="3" /><label for="3">Option 1</label><br />
d) <input type="radio" name="a1" value="4" id="4" /><label for="4">Option 1</label><br />
<h4> 2)This is first question</h4>
a) <input type="radio" name="a2" value="1" id="5" /><label for="5">Option 1</label><br />
b) <input type="radio" name="a2" value="2" id="6" /><label for="6">Option 1</label><br />
c) <input type="radio" name="a2" value="3" id="7" /><label for="7">Option 1</label><br />
d) <input type="radio" name="a2" value="4" id="8" /><label for="8">Option 1</label><br />
<h4> 3)This is first question</h4>
a) <input type="radio" name="a3" value="1" id="9" /><label for="9">Option 1</label><br />
b) <input type="radio" name="a3" value="2" id="10" /><label for="10">Option 1</label><br />
c) <input type="radio" name="a3" value="3" id="11" /><label for="11">Option 1</label><br />
d) <input type="radio" name="a3" value="4" id="12" /><label for="12">Option 1</label><br />
<h4> 4)This is first question</h4>
a) <input type="radio" name="a4" value="1" id="13" /><label for="13">Option 1</label><br />
b) <input type="radio" name="a4" value="2" id="14" /><label for="14">Option 1</label><br />
c) <input type="radio" name="a4" value="3" id="15" /><label for="15">Option 1</label><br />
d) <input type="radio" name="a4" value="4" id="16" /><label for="16">Option 1</label><br />
<input type="submit" onclick="formButtonFever('quizform','submit')" />

hope this will help you
<script LANGUAGE="JavaScript">
function formButtonFever(form){
ErrorText= "";
if ( ( form.a1[0].checked == false ) && ( form.a1[1].checked == false ) && (
form.a1[2].checked == false )&& ( form.a1[3].checked == false ))
{
alert ( "Please answer for 1st question" );
return false;
}
if ( ( form.a2[0].checked == false ) && ( form.a2[1].checked == false ) && (
form.a2[2].checked == false )&& ( form.a2[3].checked == false ))
{
alert ( "Please answer for 2nd question" );
return false;
}
if ( ( form.a3[0].checked == false ) && ( form.a3[1].checked == false ) && (
form.a3[2].checked == false )&& ( form.a3[3].checked == false ))
{
alert ( "Please answer for 3rd question" );
return false;
}
if ( ( form.a4[0].checked == false ) && ( form.a4[1].checked == false ) && (
form.a4[2].checked == false )&& ( form.a4[3].checked == false ))
{
alert ( "Please answer for 4th question" );
return false;
}
if (ErrorText= "") { form.submit() }
}
</script>
<form method="post" action="" name="quizform" id="quizform">
//your code
<input type="submit" onclick="return formButtonFever(this.form)" />
</body>
</html>

I found this example that I think answers your question
<script type="text/javascript">
function validateRadio( obj,correct ){
var result = 0;
for(var i=0; i<obj.length; i++){
if(obj[i].checked==true && obj[i].value==correct){
result = 1;
}
}
if(!result && obj.value == correct){
result = 1;
}
return result
}
function validateSubmit( obj ){
var err = '';
if( !validateRadio( obj.a,3 ) ){ err+='\nFirst radio is wrong'; }
if( !validateRadio( obj.b,2 ) ){ err+='\nSecond radio is wrong'; }
if( err.length ){
alert('Problem:'+err);
return false;
}
else{
alert('Good Job -- Submitting');
return true;
}
}
</script>
<form onsubmit="return validateSubmit(this);" action="#">
Choose "3"
<input type="radio" name="a" value="1" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 1
<input type="radio" name="a" value="2" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 2
<input type="radio" name="a" value="3" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 3
<input type="radio" name="a" value="4" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 4
<p>Choose "2"
<input type="radio" name="b" value="1"> 1
<input type="radio" name="b" value="2"> 2
<input type="radio" name="b" value="3"> 3
<input type="radio" name="b" value="4"> 4
</p><p><input type="submit" value="Submit">
</p></form>
Reference : http://www.esqsoft.com/javascript/javascript-example-how-to-validate-radio-buttons.htm

One approach is to iterate over the form's elements collection and check that each radio button group has at least one checked:
function checkRadios(form) {
// All elements in the form
var elements = form.elements,
visited = {},
name,
node,
result = true;
// Loop over elements looking for raido button groups
for (var i=0, iLen=elements.length; i<iLen; i++) {
node = elements[i];
name = node.name;
// Store whether one radio in the group is checked
if (node.type == 'radio') {
visited[name] = node.checked || !!visited[name];
}
}
// Deal with unchecked radios
for (name in visited) {
if (visited.hasOwnProperty(name) && !visited[name]) {
console.log(name + ' has not been checked');
result = false;
}
}
// Return false if one group not checked
return result;
}
You should include a reset button in the form too:
<form onsubmit="return checkRadios(this);">
Choose "3"
<input type="radio" name="a" value="1"> 1
<input type="radio" name="a" value="2"> 2
<input type="radio" name="a" value="3"> 3
<input type="radio" name="a" value="4"> 4
<br>
Choose "2"
<input type="radio" name="b" value="1"> 1
<input type="radio" name="b" value="2"> 2
<input type="radio" name="b" value="3"> 3
<input type="radio" name="b" value="4"> 4
<br>
<input type="submit" value="Submit"><input type="reset">
</form>

Another answer. At first you should provide class for each radio button, name a1 have class a1, name a2 have class a2 and so on...Then
try like this..
$("input[type='submit']").click(function()
{ var flag=0;
var a1 = $('.a1').is(':checked');
var a2 = $('.a2').is(':checked');
var a3 = $('.a3').is(':checked');
var a4 = $('.a4').is(':checked');
if(a1 ==false||a2==false||a3==false||a4==false)
{
flag =1;
}
if(flag==1)
{
alert("plaese answer all questions!");
return false;
}
else
{
alert("success");
}
});

Dynamic alerts with radio buttons

I have this HTML form below (radio buttons) which is having 3 questions with answers A, B and C.
<fieldset>
<legend>Question 1:</legend>
<label><input type="radio" value="1" name="first" />A</label> <br />
<label><input name="first" type="radio" value="2" />B</label> <br />
<label><input name="first" type="radio" value="3" />C</label> <br />
</fieldset>
<fieldset>
<legend>Question 2:</legend>
<label><input type="radio" value="1" name="second" />A</label> <br />
<label><input name="second" type="radio" value="2" />B</label> <br />
<label><input type="radio" value="3" name="second" />C</label> <br />
</fieldset>
<fieldset>
<legend>Question 3:</legend>
<label><input type="radio" value="1" name="third" />A</label> <br />
<label><input name="third" type="radio" value="2" />B</label> <br />
<label><input type="radio" value="3" name="third" />C</label> <br />
</fieldset>
<div id="display">Please answer all the questions</div>​
What I need here is a jQuery script to display 3 answers dynamically. The 3 answers should be like below:
Answer 1 (if 2 or more answers are A)
Answer 2 (if 2 or more answers are B)
Answer 3 (if 2 or more answers are C)
Nothing is displayed if the answers are A, B and C.
I'm not a jQuery pro but I just have the script (below) to check if the answers are completed or not. Can anyone help me with this?
$('input:radio').click(
function() {
var q = $('fieldset').length;
console.log('q: ' + q + '; checked: ' + $('input:radio:checked').length);
if ($('input:radio:checked').length == q){
$('#display').text('You\'ve completed all questions!');
}
else {
$('#display').text('You\'ve not yet finished...');
}
});​
Thanks in advance.
JSFiddle Demo - http://jsfiddle.net/BhanuChawla/KSd3M/

Here is one possible solution:
var answers = {
"1": "Answer 1",
"2": "Answer 2",
"3": "Answer 3"
};
$("input[type='radio']").on("click", function() {
var vals = $("fieldset input:checked").map(function() {
return this.value;
}).get().sort();
for (var i = 0; i < vals.length; i++) {
if (vals[i] == (vals[i + 1] || null)) {
$("#display").text(answers[vals[i]]);
break;
}
}
});​
DEMO: http://jsfiddle.net/mLnWP/

Here i have done complete bins for above issue. you can check demo link too.
Demo: http://codebins.com/bin/4ldqp74
HTML
<fieldset>
<legend>
Question 1:
</legend>
<label>
<input type="radio" value="1" name="first" />
A
</label>
<label>
<input name="first" type="radio" value="2" />
B
</label>
<label>
<input name="first" type="radio" value="3" />
C
</label>
</fieldset>
<fieldset>
<legend>
Question 2:
</legend>
<label>
<input type="radio" value="1" name="second" />
A
</label>
<label>
<input name="second" type="radio" value="2" />
B
</label>
<label>
<input type="radio" value="3" name="second" />
C
</label>
</fieldset>
<fieldset>
<legend>
Question 3:
</legend>
<label>
<input type="radio" value="1" name="third" />
A
</label>
<label>
<input name="third" type="radio" value="2" />
B
</label>
<label>
<input type="radio" value="3" name="third" />
C
</label>
</fieldset>
<div id="display">
Please answer all the questions
</div>
JQuery
$(function() {
var answers = Array();
$("input:radio").click(function() {
var index = 0;
if ($(this).is(":checked")) {
index = $(this).closest("fieldset").index();
answers[index] = $(this).val().trim();
}
for (var i = 0; i < answers.length; i++) {
if ($("input:radio[value=" + answers[i] + "]:checked").length > 1) {
$("#display").text("Max Answers Selected:" + answers[i]);
break;
} else if ($("input:radio:checked").length >= 3) {
$("#display").text("All have different Answers..!");
}
}
});
});
CSS
label{
float:left;
margin-left:10px;
font-size:14px;
}
#display{
margin-top:10px;
border:1px solid #335599;
padding:5px;
font-size:14px;
background:#a4a1df;
}
Demo: http://codebins.com/bin/4ldqp74