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>

score 2 · Accepted Answer · edited May 23 '17 at 12:05

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/

score 0 · Answer 2 · answered May 10 '14 at 15:59

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;

Javascript Alert Box with Radio Button

2 Answers2