Javascript Alert Box with Radio Button
Question
I am a beginner in Javascript, and I have a question to ask- how do you make the submit button show an alert box when no radio button is selected? I've tried a lot of times but nothing seems to work- any help would be greatly appreciated. Thank you.
<html>
<head>
<title> Reviewer </title>
<style type="text/css">
body
{
background-image: url("reviewerbackground.jpg");
background-attachment: fixed;
font-family: verdana;
color:white;
text-shadow: black 0.1em 0.1em 0.2em;
line-height: 1.5;
font-size: 100%;
}
h1
{
color: white;
font-family: verdana;
text-shadow: black 0.1em 0.1em 0.2em;
text-align: center;
line-height: 1.5;
}
p
{
border: none;
width: 90%;
line-height: 1.5;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5);
box-shadow: 0 0 5px rgba(0,0,0,0.5);
background: tan;
padding: 3px;
text-align: left;
}
</style>
<script type="text/javascript">
function question1() {
var option = document.querySelector('input[name = "question1"]:checked').value;
if (option == 'd') {
alert("That's the correct answer!");
}
else {
alert ("Oops! try again!");
}
}
</script>
</head>
<body link="white" vlink="white">
<br>
<h1> Reviewer </h1> </br>
<center>
<p> 1. (Question- Answer will be D, the 4th radio button)
<br>
<br>
<input type="radio" name="question1" value="a"> choice a
<br>
<input type="radio" name="question1" value="b"> choice b
<br>
<input type="radio" name="question1" value="c"> choice c
<br>
<input type="radio" name="question1" value="d"> choice d
<br>
<br>
<input class="button" type="button" onclick="question1()" name="question1" value="Submit">
</p> </center>
<br>
</body>
</html>
2 answers
solution1
2 ACCPTED 2014-05-10 16:12:04
try this:
function question1 () {
var option = getRVBN('question1');
//Check if no radio is selected
if(option==''){
alert("No radio button is selected");
return false;
}
if (option == 'd') {
alert("That's the correct answer!");
}
else {
alert ("Oops! try again!");
}
}
function getRVBN(rName) {
var radioButtons = document.getElementsByName(rName);
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) return radioButtons[i].value;
}
return '';
}
The function getRVBN() comes from this post Getting the selected radio without using "Id" but "name"
Here is fiddle: http://jsfiddle.net/T9Lpr/18/
solution2
0 2014-05-10 15:59:50
There is just a simple problem here, on the first line of your function, you have your querySelector mapped out correctly, but the :checked needs a space before it to work.
Like so:
var option = document.querySelector('input[name = "question1"] :checked').value;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.