How to check if radio button is selected using javascript

Question

Hello i am new to web development. I created a simple test question in html5 where a user selects only one answer(using radio). This done in html and javascript. No backend. I want to make sure a radio button has been selected before moving to next question. If radio button wasn't selected, it displays an alert telling user must select an answer before moving forward.

Below is my code:

 <section>
  <p class="questions">Given points (X1, Y1) and (X2, Y2) select the formula to find the equation of the given line.</p>
  <div >
   <form class="answers">
     <input type="radio" name="radio" value="correct"> 
     <math xmlns = "http://www.w3.org/1998/Math/MathML">
      <mrow>
       <mi> y</mi>
       <mo>=</mo>
       <mi>m</mi>
       <mo>&InvisibleTimes;</mo>
       <mi>x</mi>
       <mo>+</mo>
       <mi>b</mi>
      </mrow>
    </math>

    <!-- 2nc choice -->
     <input type="radio" name="radio" value="incorrect" > 
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
          <mrow>
            <mrow>
              <mo>(</mo>
              <mi>x</mi>
              <mo>-</mo>
              <mi>h</mi>
              <msup>
              <mo>)</mo>
              <mn>2</mn>
            </msup>
          </mrow>
            <mo>+</mo>
            <mrow>
              <mo>(</mo>
              <mi>y</mi>
              <mo>-</mo>
              <mi>k</mi>
              <msup>
                <mo>)</mo>
                <mn>2</mn>
              </msup>
            </mrow>
            <mo> = </mo>
            <mrow>
              <msup>
                <mi> r</mi>
                <mn>2</mn>
              </msup>
            </mrow>
         </mrow>
      </math> <br>

      <!-- 3rd choice -->
     <input type="radio" name="radio" value="incorrect"> 
      <math xmlns = "http://www.w3.org/1998/Math/MathML">
       <mrow>
        <mrow>
          <mi>y</mi>
          <mo>-</mo>
          <msub>
            <mi>y</mi>
            <mn>1</mn>
          </msub>
        </mrow>
        <mo> = </mo>
        <mrow>
          <mi>m</mi>
          <mo>&InvisibleTimes;</mo>
          <mo>(</mo>
          <mi>x</mi>
          <mo>-</mo>
          <msub>
            <mi>x</mi>
            <mn>1</mn>
          </msub>
          <mo>)</mo>
        </mrow>

       </mrow>
      </math>

       <!--4th Choice -->
    <input type="radio" name="radio" value="incorrect"> 
      <math xmlns = "http://www.w3.org/1998/Math/MathML"> 
        <mrow>
          <mrow>
          <mi>y</mi>
          <mo>-</mo>
          <msub><mi>y</mi><mn>2</mn></msub>
        </mrow>
        <mo> = </mo>
        <mrow>
          <mfrac>
            <mrow>
            <msub><mi>y</mi><mn> 2</mn></msub>
            <mo> - </mo><msub><mi> y</mi><mn> 1</mn></msub>
          </mrow>
            <mrow>
            <msub><mi>x</mi><mn> 2</mn></msub>
            <mo> - </mo><msub><mi> x</mi><mn> 1</mn></msub>
          </mrow>
          </mfrac>
        </mrow>
        <mrow>
          <!-- <mo>&InvisibleTimes;</mo> -->
          <mo>(</mo>
          <mi> x </mi>
          <mo> - </mo>
          <msub><mi> x</mi><mn>2</mn></msub>
          <mo>).</mo>
        </mrow>

        </mrow>
      </math>

     <br>
      <!-- submit button -->
     <input type="submit" value="Submit & Next Question" onclick="getAnswer1(this.form)">
     <!-- clears the radio -->
     <input type="submit" value="Cancel & Clear Selection" onclick="">
   </form>
 </div>
</section>

<script type="text/javascript" src="script.js"></script>

I know my javascript code is wrong.. Javascript:

 /**Trouble making sure user selects an input doesn't matter if its wrong or right. An alert should displayed if user attempts to go to next question. Must select an option. **/
//global array stores answers
var results = [];
function getAnswer1(form) {
  var radios = form.elements['radio'];
   for(var i = 0; i < radios.length; i++) {
    if(radios[i].checked) {
      //
    }
  }
}

Your HTML has name="radio", but your Javascript has form.elements['radios']. The extra s in the JS makes it not work. — Barmar
– Barmar, Commented Mar 3, 2016 at 0:14
@Bamar oh yes i rectified that thanks will make an update in the post — EI-01
– EI-01, Commented Mar 3, 2016 at 0:14

Barmar · Accepted Answer · 2016-03-03 00:16:26Z

1

You can use document.querySelector to find the checked box and get its value.

function getAnswer1(form) {
    var checked = form.querySelector("input[type=radio]:checked");
    var value;
    if (!checked) {
        alert("You need to select one of the options");
        return;
    } else {
        value = checked.value;
    }
    results.push(value);
}

Also, to prevent the form from submitting when you click the submit button, change

onclick="getAnswer1(this.form)"

to:

onclick="getAnswer1(this.form; return false;"

edited Mar 3, 2016 at 0:16

answered Mar 2, 2016 at 23:58

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

EI-01 Over a year ago

i attempted to use Dennis Nerush sample below i as need to store the result from the radio button in an array but when i tried to display the array on console it return empty. Please what did i do wrong

EI-01 Over a year ago

also what's the difference btwn querySelector and form.element['radio']

Barmar Over a year ago

querySelector allows you to use CSS selector syntax to do more complex matching.

Barmar Over a year ago

@user3497437 What array are you trying to display? Neither of our answers creates an array.

EI-01 Over a year ago

@Bamar thanks. But when i attempt to store the value in array for future reference the array returns empty when i try to view in the console

|

Dennis Nerush · Accepted Answer · 2016-03-03 00:00:40Z

0

var radios = document.getElementsByTagName('input');
var value;
for (var i = 0; i < radios.length; i++) {
    if (radios[i].type === 'radio' && radios[i].checked) {
        // get value, set checked flag or do whatever you need to
        value = radios[i].value;       
    }
}

edited Mar 3, 2016 at 0:00

answered Mar 2, 2016 at 23:46

Dennis Nerush

5,6935 gold badges29 silver badges33 bronze badges

5 Comments

EI-01 Over a year ago

if the radio button isn't checked and user attempts to submit without checking a button, how do i create an alert

Dennis Nerush Over a year ago

After the for loop is done and the value variable is empty then it means that no radio button was selected. Then you can simply call alert("You have to choose an option");

Barmar Over a year ago

You can break out of the loop when you find the value that's checked.

EI-01 Over a year ago

@DennisNerush i didn't use document.getElementsByTagName, i passed the form into the function and used the same approach similar to what u did but attempted to print the value on the console and it's returns empty

Barmar Over a year ago

@DennisNerush Ignore my previous comment about [type=radio]. I thought you were using querySelectorAll, not getElementsByTagName.

Collectives™ on Stack Overflow

How to check if radio button is selected using javascript

2 Answers 2

9 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related