Making javascript check what radio form has been selected - javascript

I am trying to make a dog race.
Basically what I want is to check what radio the user checked,
compare it to a random number between 1 - 5 and see if he won.
My question is... How do I compare them?
This is my code so far.
function chooser(){
var theDogs = ["dog1","dog2","dog3","dog4","dog5"],
rand = theDogs[Math.floor(Math.random() * theDogs.length)];
document.getElementById("winner").innerHTML = rand;
if(pick == rand)
{document.getElementById("winner").innerHTML =("win!");}
else {
document.getElementById("winner").innerHTML =("loose");
}
}
HTML:
<form id="pick" action="rand">
<input type="radio" name="dog" id="dog1">Dog1<br>
<input type="radio" name="dog" id="dog2">Dog2<br>
<input type="radio" name="dog" id="dog3">Dog3<br>
<input type="radio" name="dog" id="dog4">Dog4<br>
<input type="radio" name="dog" id="dog5">Dog5<br>
</form>
<br>
<br>
<input type="submit" value="Gamble" onclick="chooser();">
<br>
<p id="winner"> </p>

A jQuery and Native JavaScript Approach. Take your pick.
$("#submitjq").click(function() {
var theDogs = ["dog1","dog2","dog3","dog4","dog5"],
rand = theDogs[Math.floor(Math.random() * theDogs.length)];
var pick = $("input[type=radio][name='dog']:checked").val();
if(pick == rand)
{
$("#winner").html("jQuery: Won!");
}
else {
$("#winner").html("jQuery: Lost!");
}
});
document.getElementById('submitjs').onclick = function () {
var theDogs = ["dog1","dog2","dog3","dog4","dog5"],
rand = theDogs[Math.floor(Math.random() * theDogs.length)];
var pick = document.pick.dog.value;
console.log(pick);
if(pick == rand)
{
document.getElementById("winner").innerHTML = "JavaScript: Won!" ;
}
else {
document.getElementById("winner").innerHTML = "JavaScript: Lost!" ;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="pick" name="pick" action="rand">
<input type="radio" name="dog" value="dog1">Dog1<br>
<input type="radio" name="dog" value="dog2">Dog2<br>
<input type="radio" name="dog" value="dog3">Dog3<br>
<input type="radio" name="dog" value="dog4">Dog4<br>
<input type="radio" name="dog" value="dog5">Dog5<br>
</form>
<br>
<br>
<input type="submit" id="submitjs" value="Gamble Native JavaScript" />
<input type="submit" id="submitjq" value="Gamble jQuery" />
<br>
<p id="winner"> </p>

You need to give each radio button a value, and then getElementsByName, iterating through to find the one that's checked. See similar thread...

Related

Disable remaining checkboxes after checking some of them in JavaScript [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I want to disable the checkboxes when a limit of checked checkboxes have reached. I have made a function in JavaScript in which on check of two boxes the other two become disable and the value of the checked boxes comes in id="order2". But this function is not at all working.
<!DOCTYPE html>
<html>
<body>
<p>How would you like your coffee?</p>
<form name="myform" action="/action_page.php">
<input type="checkbox" name="coffee" onclick="myFunction2()" value="100">With cream<br>
<input type="checkbox" name="coffee" onclick="myFunction2()" value="150">With sugar<br>
<input type="checkbox" name="coffee" onclick="myFunction2()" value="200">With milk<br>
<input type="checkbox" name="coffee" onclick="myFunction2()" value="250">With tea<br>
<br>
<input type="text" id="order2" size="50">
<input type="text" id="order3" size="50">
<input type="submit" value="Submit">
</form>
<script>
function myFunction2() {
var coffee = document.querySelectorAll("[name = coffee]"); // To get arrays by Attribute in query selector use [] to get arrays of the same attribute. We can also use ("input[type = checkbox]") to get arrays.
var txt = "";
var i;
for (i = 0; i < coffee.length; i++) {
if (coffee[i].checked) {
txt = txt + coffee[i].value + ", ";
document.getElementById("order2").value = "You ordered a coffee with: " + txt.slice(0, -2);
}
else if (coffee.length === 2) {
coffee[i].setAttribute("style", "pointer-events: none; opacity: 0.5");
document.getElementById("order3").value = "Boxes left uncheck " + i;
}
}
}
</script>
</body>
</html>
Make two loops. First figure out the total number of checkboxes that are checked - this will tell you whether you need to disable unchecked checkboxes. On the second loop, if a checkbox is checked, add its value to an array. Otherwise, the checkbox is unchecked; if at least 2 checkboxes are checked (identified by the previous loop), disable it.
If the user de-selects an option after hitting the limit of 2, also loop through the checkboxes and enable them all.
function myFunction2() {
const checkboxes = [...document.querySelectorAll("[name = coffee]")];
const boxesChecked = checkboxes.reduce((a, b) => a + b.checked, 0);
document.getElementById("order3").value = "Options left to choose:" + (2 - boxesChecked);
let addedCost = 0;
for (const checkbox of checkboxes) checkbox.disabled = false;
for (const checkbox of checkboxes) {
if (checkbox.checked) addedCost += Number(checkbox.value);
else if (boxesChecked === 2) checkbox.disabled = true;
}
document.getElementById("order2").value = "Costs: " + addedCost;
}
<p>How would you like your coffee?</p>
<form name="myform" action="/action_page.php">
<input type="checkbox" name="coffee" onclick="myFunction2()" value="100">With cream<br>
<input type="checkbox" name="coffee" onclick="myFunction2()" value="150">With sugar<br>
<input type="checkbox" name="coffee" onclick="myFunction2()" value="200">With milk<br>
<input type="checkbox" name="coffee" onclick="myFunction2()" value="250">With tea<br>
<br>
<input type="text" id="order2" size="50">
<input type="text" id="order3" size="50">
<input type="submit" value="Submit">
</form>
Try to available mixing HTML with JavaScript using onclick. The proper way is with event listeners, for example:
const myCheckboxes = document.querySelectorAll('input[type=checkbox]');
const myReset = document.querySelector('input[type=reset]');
myCheckboxes.forEach(checkbox => checkbox.addEventListener('click', checkCheckboxes));
myReset.addEventListener('click', resetCheckboxes);
function checkCheckboxes() {
let checked = document.querySelectorAll('input:checked');
if (checked.length >= 2) {
myCheckboxes.forEach(checkbox => checkbox.disabled = true);
}
}
function resetCheckboxes() {
myCheckboxes.forEach(checkbox => checkbox.disabled = false);
}
<p>How would you like your coffee?</p>
<form name="myform" action="/action_page.php">
<input type="checkbox" name="coffee" value="100">With cream<br>
<input type="checkbox" name="coffee" value="150">With sugar<br>
<input type="checkbox" name="coffee" value="200">With milk<br>
<input type="checkbox" name="coffee" value="250">With tea<br>
<br>
<input type="text" id="order2" size="50">
<input type="text" id="order3" size="50">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
You can evaluate how many are checked when they are clicked and disable the others. Note: the better way to handle this is to use classes and toggle the class.
'use strict';
document.addEventListener('click', function(e) {
if (e.target.type == 'checkbox')
myFunction2(e);
})
function myFunction2(e) {
const coffee = document.querySelectorAll('[name=coffee]');
const checked = document.querySelectorAll(':checked');
const order2 = document.querySelector('#order2');
const order3 = document.querySelector('#order3');
order2.value = checked.length
? "You ordered a coffee with: " + [...checked].map(cb => cb.value).join(', ')
: ''
if (checked.length === 2 && e.target.checked) {
coffee.forEach(cb => {
if (!cb.checked)
cb.disabled = true
});
order3.value = "Boxes left unchecked: " + (coffee.length - checked.length);
return false;
}
else
coffee.forEach(cb=>cb.disabled=false)
order3.value = "Boxes left unchecked: " + (coffee.length - checked.length);
}
input {
display: block;
}
label {
display: block;
}
label>input {
display: inline-block;
}
<p>How would you like your coffee?</p>
<form name="myform" action="/action_page.php">
<label><input type="checkbox" name="coffee" value="100">With cream</label>
<label><input type="checkbox" name="coffee" value="150">With sugar</label>
<label><input type="checkbox" name="coffee" value="200">With milk</label>
<label><input type="checkbox" name="coffee" value="250">With tea</label>
<input type="text" id="order2" size="50">
<input type="text" id="order3" size="50">
<input type="submit" value="Submit">
</form>

Getting a score with submit

I am making a website page that is a survey of sorts. I have one section mostly working but I can't get the second half. I used the same code as the first section and expanded. I can't get it to work though. I don't understand why it won't write the score when I hit submit. When I press submit it should write over "this is the answer" and should calculate the number of points from the value of the questions so for example, if they press the first radio button for each question it should print 2.
This is the base JavaScript I used in case it helps.
function answer(total) {
var score = 0;
if (document.getElementById('exp_no').checked) {
score++;
}
if (document.getElementById('chg_no').checked) {
score++;
}
if (document.getElementById('sus_no').checked) {
score++;
}
document.getElementById('totalScore').innerHTML = score;
}
This is the JavaScript I am using.
function answer2(total) {
var score2 = 0;
if (document.getElementById('arr_1').checked) {
score2++;
}
else if (document.getElementById('arr_2').checked) {
score2 + 2;
}
else if (document.getElementById('arr_3').checked) {
score2 + 3;
}
else if (document.getElementById('arr_4').checked) {
score2 + 4;
}
else (document.getElementById('arr_5').checked) {
score2 + 5;
}
if (document.getElementById('been1').checked) {
score2++;
}
else if (document.getElementById('been2').checked) {
score2 + 2;
}
else if (document.getElementById('been3').checked) {
score2 + 3;
}
else if (document.getElementById('been4').checked) {
score2 + 4;
}
else if (document.getElementById('been5').checked) {
score2 + 5;
}
if (score2 == 2) {
document.getElementById('finalScore').innerHTML = score2;
} else if (score2 == 4){
document.getElementById('finalScore').innerHTML = score2;
} else if (score2 == 4){
document.getElementById('finalScore').innerHTML = score2;
} else if (score2 == 6){
document.getElementById('finalScore').innerHTML = score2;
} else if (score2 == 8){
document.getElementById('finalScore').innerHTML = score2;
} else if (score2 == 10){
document.getElementById('finalScore').innerHTML = score2;
}
}
This is my HTML
<button onclick = "toggletab()" id="tabButton"><h3>first results</h3>
</button>
<form>
<div id="first" >
<fieldset>
<label>
<legend>Is your arrest record a:</legend>
<input id="arr_1" type="radio" name="field4" value="1"
onclick="getscores4(this)"/>
IC 35-38-9-1
</label>
<label>
<input id="arr_2" type="radio" name="field4" value="2"
onclick="getscores4(this)"/>
IC 35-38-9-2
</label>
<label>
<input id="arr_3" type="radio" name="field4" value="3"
onclick="getscores4(this)"/>
IC 35-38-9-3
</label>
<label>
<input id="arr_4" type="radio" name="field4" value="4"
onclick="getscores4(this)"/>
IC 35-38-9-4
</label>
<label>
<input id="arr_5" type="radio" name="field4" value="5"
onclick="getscores4(this)"/>
IC 35-38-9-5
</label>
</fieldset>
<fieldset>
<label>
<legend>Has it been:</legend>
<input id="been1" type="radio" name="field5" value="1"
onclick="getscores5(this)"/>
1 Year From Date of Arrestor earlier if the Prosecutor
agrees
</label>
<label>
<input id="been2" type="radio" name="field5" value="2"
onclick="getscores5(this)"/>
5 Years From Date of Arrestor earlier if the Prosecutor
agrees
</label>
<label>
<input id="been3" type="radio" name="field5" value="3"
onclick="getscores5(this)"/>
8 YearsFrom Date of Arrestor earlier if the Prosecutor
agrees
</label>
<label>
<input id="been4" type="radio" name="field5" value="4"
onclick="getscores5(this)"/>
8/3 Years The Later of 8 Years from Date of Conviction
or 3 years from completion of the sentence or earlier if the Prosecutor
agrees
</label>
<label>
<input id="been5" type="radio" name="field5" value="5"
onclick="getscores5(this)"/>
10/5 Years The Later of 10 Years from Date of
Conviction or 5 years from completion of the sentence or earlier if the
Prosecutor agrees
</label>
</fieldset>
</div>
<fieldset id="submitbutton" class="article">
<input type="button" id="submit" value="submit" onclick='answer2()' />
<p id="finalScore">this is answer </p>
</fieldset>
</form>
</div>
</div>
<script src="backtest.js"></script>
<script src="backtest2.js"></script>
<script src="toggle.js"></script>
In function answer2(total) you have declared variable with name 'score2' but in all your logic you are using variable with name 'score'. Change score to score2 then it will work. And I also think that there is no need for argument 'total' in answer2() function because you are not using it anywhere.

EPUB Score catching

I created an EPUB through Adobe InDesign CC. After exporting the project to EPUB i extracted the file so that I can insert a (html, javascript) page for the exercises. Could somebody please help how can I manage to throw a value from the epub (probably the score) to a website if online and store the value(score) inside the epub when offline.
<form action="#" method="post">
<section id="1" epub:type="item">
<p>1. smile - smiled <label id="checker" style="color:red"></label></p>
<input type="radio" id="myRadio" name="c1" value="1" />
<label>YES</label>
<input type="radio" id="myRadio" name="c1" value="0" />
<label>NO</label><br/>
</section>
<section id="2" epub:type="item">
<p>2. dance - danced <label id="checker2" style="color:red"></label></p>
<input type="radio" id="myRadio2" name="c2" value="1" />
<label>YES</label>
<input type="radio" id="myRadio2" name="c2" value="0" />
<label>NO</label><br/>
</section>
<section id="3" epub:type="item">
<p>3. rise - rised <label id="checker3" style="color:red"></label></p>
<input type="radio" id="myRadio3" name="c3" value="1" />
<label>YES</label>
<input type="radio" id="myRadio3" name="c3" value="0" />
<label>NO</label><br/>
</section>
</div>
</form>
Heres the javascript:
temp = 0;
if (getRadioVal( document.getElementById('demoForm'), 'c1' ) === "1") {
temp = temp + 1;
} else{
document.getElementById('checker').innerHTML = "| wrong";
}
if (getRadioVal( document.getElementById('demoForm'), 'c2' ) === "1") {
temp = temp + 1;
} else{
document.getElementById('checker2').innerHTML = "| wrong";
}
if (getRadioVal( document.getElementById('demoForm'), 'c3' ) === "0") {
temp = temp + 1;
} else{
document.getElementById('checker3').innerHTML = "| wrong";
}
document.getElementById("score").innerHTML = temp;
This question has been discussed in some Adobe Forum and the answer seems like you can't: https://forums.adobe.com/thread/1939249

Validation for dynamic radio button,checkbox and text area

I have developed one page,which is contains several questions and answer...there are three types of answer radio button,checkbox and text area... i have to validate these dynamically created questions using javascript...
based on the question type i am getting answer options from database whether it may be a radio button or checkbox or text area...
<input type="radio" id="radio" name="21" value="59"/>
<input type="radio" id="radio" name="22" value="60"/>
<input type="radio" id="radio" name="23" value="61"/>
like same as checkbox and text area....
//try 1
var form = document.getElementById('form1');
var inputs = form.getElementsByTagName('INPUT');
for (var i = 0; i < inputs.length; ++i) {
if (inputs[i].type.toLowerCase == 'radio' && !inputs[i].checked)
return false;
}
return true;
//try 2
var rv = document.getElementsByName("reservation_in");
var ci = -1;
for(var ikj=0; ikj < rv.length; ikj++){
if(rv[ikj].checked) {
ci = ikj;
}
}
if (ci == -1) {
document.getElementById('err_reservation_for').innerHTML="";
document.getElementById('err_reservation_for').innerHTML=
'Please let us know
//Reservation for Inside or Patio.';
return false;
}
//try 3
var radios = document.getElementById('radio');
var formValid = false;
var i = 0;
while (!formValid && i < radios.length) {
if (radios[i].checked)
formValid = true;
i++;
}
if (!formValid)
//document.getElementById('radio_error').innerHTML="";
//document.getElementById('radio_error').innerHTML=
'Please select one answer.';
alert("Please select the answer");
return formValid;
I have some sample code which may help you to understand more.
HTML Code:
<div id="que1" class="que">
xyz is not abc? <br />
<div class="ans">
<input type="radio" name="radioGroup1" id="radio1" />One
<input type="radio" name="radioGroup1" id="radio2" />Two
<input type="checkbox" name="check" id="check1" />Three <br/>
<textarea id="textarea-1"></textarea>
</div>
</div><br />
<div id="que2" class="que">
xyz is not abc? <br />
<div class="ans">
<input type="radio" name="radioGroup2" id="radio3" />One
<input type="radio" name="radioGroup2" id="radio3" />Two
<input type="checkbox" name="check" id="check2" />Three <br />
<textarea id="textarea-2"></textarea>
</div>
</div>
JS Code:
var questions=document.getElementsByClassName("que");
for(var i=0;i<questions.length;i++){
var inputs=questions[i].getElementsByTagName("input");
for(var j=0;j<inputs.length;j++){
if(inputs[j].type=="radio"){
alert("question ID:- "+ questions[i].id+ " radio");
}
if(inputs[j].type=="checkbox"){
alert("question ID:- "+ questions[i].id+ " checkbox");
}
}
var textarea=questions[i].getElementsByTagName("textarea");
for(var k=0;k<textarea.length;k++){
alert("question ID:- "+ questions[i].id+ " Textarea");
}
}
Click here check this fiddle
Radio button validation:
Html:
<form>
<input type="radio" id="21" name="radio" value="59"/>
<input type="radio" id="22" name="radio" value="60"/>
<input type="radio" id="23" name="radio" value="61"/>
</form>
Javascript:
if ( ( form.radio[0].checked == false ) && ( form.radio[1].checked == false ) && ( form.radio[2].checked == false ) ) { alert ( "Please choose one radio button" ); return false; }
If there are many input box then use each..that will iterate just like for loop..
var iz_checked = false;
var is_blank = false;
var is_choose = false;
$('button').on('click', function() {
iz_checked = false;
is_blank = false;
is_choose = false;
$('input[type="radio"]').each(function() {
if ($('input[type="radio"]').is(':checked') == true) {
iz_checked = false;
} else {
iz_checked = true;
}
if ($('textarea')[0].value == "") {
is_blank = true;
}
});
$('input[type="checkbox"]').each(function() {
if ($('input[type="checkbox"]').is(':checked') == true) {
is_choose = false;
} else {
is_choose = true;
}
});
if (is_choose || iz_checked || is_blank) {
alert("Validation err");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" id="21" value="59" />a
<input type="radio" id="22" value="60" />q
<input type="radio" id="23" value="61" />w
<input type="radio" id="1" value="59" />e
<input type="radio" id="2" value="60" />r
<input type="radio" id="3" value="61" />t
<input type="radio" id="29" value="59" />y
<input type="radio" id="80" value="60" />u
<input type="radio" id="7" value="61" />i
<input type="radio" id="8" value="59" />o
<input type="radio" id="0" value="60" />p
<input type="radio" id="1" value="61" />l
</form>
<textarea cols="10" rows="10"></textarea>
<br/>
<input type="checkbox" value="Apples">f
<input type="checkbox" value="Apples">d
<input type="checkbox" value="Apples">s
<input type="checkbox" value="Apples">a
<br/>
<button>
Validate
</button>

Creating a multiple choice option in javascript

I have created an HTML multiple choice question. I am facing a problem how to validate it. Below is the HTML code:
<h1>JavaScript is ______ Language.</h1><br>
<form>
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
</form>
<button>Submit Answer</button>
When the user clicks the submit button, there should be an alert that will show a message based on what was selected.
If no option was selected, the alert box should say "please select choice answer".
If the "Scripting" option was selected, the alert box should say "Answer is correct !"
If an option different from "Scripting" is selected, the alert box should say "Answer is wrong".
I want to create this validation in JavaScript.
You have to use onclick attribute and more js
attach event hander to your button
get radio elements value
compare
var submitAnswer = function() {
var radios = document.getElementsByName('choice');
var val= "";
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
val = radios[i].value;
break;
}
}
if (val == "" ) {
alert('please select choice answer');
} else if ( val == "Scripting" ) {
alert('Answer is correct !');
} else {
alert('Answer is wrong');
}
};
<h1>JavaScript is ______ Language.</h1><br>
<form >
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
</form>
<button onclick="submitAnswer()">Submit Answer</button>
var submitAnswer = function() {
var radios = document.getElementsByName('choice');
var val= "";
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
val = radios[i].value;
break;
}
}
if (val == "" ) {
alert('please select choice answer');
} else if ( val == "Scripting" ) {
alert('Answer is correct !');
} else {
alert('Answer is wrong');
}
};
<h1>JavaScript is ______ Language.</h1><br>
<form >
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
</form>
<button onclick="submitAnswer()">Submit Answer</button>
Some changes
I made some changes to the code above to make it more 'abstract'
<h1>JavaScript is ______ Language.</h1><br>
<form id="d1">
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
</form>
<button onclick="submitAnswer(d1.choice.value, 'Scripting')">Submit Answer</button>
<script>
var submitAnswer = function(valore, rightanswer) {
if (valore == rightanswer) {
alert("OK");
}
};
</script>
Another, more complex example
<div style="background-color:lightblue">
<h1>JavaScript is a <span id='a1'>______</span> Language.</h1><br>
<form id="d1">
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
<br>
<input type="submit" value="submit" onclick="validate(choice.value, 'Scripting', 'd1','a1')">
</form>
</div>
<div style="background-color:lightblue">
<h1>Python is a <span id='a2'>______</span> Language.</h1><br>
<form id="d2">
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Wonderful"> Wonderful
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
<br>
<input type="submit" value="submit" onclick="validate(choice.value, 'Wonderful', 'd2', 'a2')">
</form>
</div>
<script>
var validate = function(valore, rightanswer, form, span) {
var formname = document.getElementById(form)
var spanname = document.getElementById(span)
spanname.innerHTML = rightanswer;
if (valore == rightanswer) {
formname.innerHTML ="<div style='background-color:lightgreen'><h1>GREAT! YOU'RE RIGHT: The answer, in fact, was: " + rightanswer + "</h1></div>";
}
else {
formname.innerHTML ="<div style='background-color:pink'><h1>Sorry, you where wrong: The answer was: " + rightanswer + "</h1></div>";
}
};
</script>
Use the required keyword. This prompts the user to choose a value, when the submit button is pressed without choosing any option. And always prefer to use
<input type="submit" value="submit"> over <button>Submit Answer</button>
while handling forms. Use the onclick() event handler to call your Javascript code.
<h1>JavaScript is ______ Language.</h1><br>
<form >
<input type="radio" name="choice" value="Scripting" required> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
<input type="submit" value="submit" onclick="validate()">
</form>
And the javascript part is as follows.
<script type="text/javascript">
function validate() {
var a= document.getElementByName("choice");
for (var i = 0, i < a.length; i++) {
if (a[i].checked) {
if( a[i].value == "scripting" )
alert("your answer is correct");
else
alert("your answer is not correct");
break;
} } }
</script>
Here condition is showing in alert pop up box. but I want to show it in a html tag.
But after clicking submit button, innerHTML content showing a millisecond and then automatic remove the content. How selection will stay in innerHTML
document.getElementById("answer").innerHTML;
var submitAnswer = function() {
var radios = document.getElementsByName('choice');
var val= "";
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
val = radios[i].value;
break;
}
}
if (val == "" ) {
document.getElementById("answer").innerHTML = "please select choice answer";
} else if ( val == "Scripting" ) {
document.getElementById("answer").innerHTML = "Answer is correct !"
} else {
document.getElementById("answer").innerHTML = "Answer is wrong"
}
};
You can add a function and event onClick so that whenever someone clicks on option submit button will appear.

Categories

Resources