Display alert when radio button is not selected

Question

I have the following code:

<div id="page-wrap">

  <h1> Simple Quiz Built On PHP </h1>
  <form action="result.php" method="post" id="quiz">

    <ol>

      <li>

        <h3>WordPress is a...</h3>

        <div>
          <input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" />
          <label for="question-1-answers-A">A) Software 
                        </label>
        </div>

        <div>
          <input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" />
          <label for="question-1-answers-B">B) Web App</label>
        </div>

        <div>
          <input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" />
          <label for="question-1-answers-C">C) CMS</label>
        </div>

        <div>
          <input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" />
          <label for="question-1-answers-D">D) Other</label>
        </div>

      </li>

      <li>

        <h3>SEO is Part Of...</h3>

        <div>
          <input type="radio" name="question-2-answers" id="question-2-answers-A" value="A" />
          <label for="question-2-answers-A">A) Video Editing</label>
        </div>

        <div>
          <input type="radio" name="question-2-answers" id="question-2-answers-B" value="B" />
          <label for="question-2-answers-B">B) Graphic Designing</label>
        </div>

        <div>
          <input type="radio" name="question-2-answers" id="question-2-answers-C" value="C" />
          <label for="question-2-answers-C">C) Web Designing</label>
        </div>

        <div>
          <input type="radio" name="question-2-answers" id="question-2-answers-D" value="D" />
          <label for="question-2-answers-D">D) Digital Marketing</label>
        </div>

      </li>

      <li>

        <h3>PHP is a....</h3>

        <div>
          <input type="radio" name="question-3-answers" id="question-3-answers-A" value="A" />
          <label for="question-3-answers-A">A) Server Side Script</label>
        </div>

        <div>
          <input type="radio" name="question-3-answers" id="question-3-answers-B" value="B" />
          <label for="question-3-answers-B">B) Programming Language</label>
        </div>

        <div>
          <input type="radio" name="question-3-answers" id="question-3-answers-C" value="C" />
          <label for="question-3-answers-C">C) Markup Language</label>
        </div>

        <div>
          <input type="radio" name="question-3-answers" id="question-3-answers-D" value="D" />
          <label for="question-3-answers-D">D) None Of Above These</label>
        </div>

      </li>

      <li>

        <h3>Localhost IP is..</h3>

        <div>
          <input type="radio" name="question-4-answers" id="question-4-answers-A" value="A" />
          <label for="question-4-answers-A">A) 192.168.0.1</label>
        </div>

        <div>
          <input type="radio" name="question-4-answers" id="question-4-answers-B" value="B" />
          <label for="question-4-answers-B">B) 127.0.0.0</label>
        </div>

        <div>
          <input type="radio" name="question-4-answers" id="question-4-answers-C" value="C" />
          <label for="question-4-answers-C">C) 1080:80</label>
        </div>

        <div>
          <input type="radio" name="question-4-answers" id="question-4-answers-D" value="D" />
          <label for="question-4-answers-D">D) Any Other</label>
        </div>

      </li>

      <li>

        <h3>Webdevtrick Is For</h3>

        <div>
          <input type="radio" name="question-5-answers" id="question-5-answers-A" value="A" />
          <label for="question-5-answers-A">A) Web Designer</label>
        </div>

        <div>
          <input type="radio" name="question-5-answers" id="question-5-answers-B" value="B" />
          <label for="question-5-answers-B">B) Web Developer</label>
        </div>

        <div>
          <input type="radio" name="question-5-answers" id="question-5-answers-C" value="C" />
          <label for="question-5-answers-C">C) Graphic Designer</label>
        </div>

        <div>
          <input type="radio" name="question-5-answers" id="question-5-answers-D" value="D" />
          <label for="question-5-answers-D">D) All Above These</label>
        </div>

      </li>

    </ol>

    <input type="submit" value="Submit" class="submitbtn" />

  </form>

</div>

My requirement is that the user must answer all questions because I have the error

"Undefined array key".

If the user does not select the radio button, an alert is displayed. I'm having trouble with this code because I'm a beginner. This is the code for result.php

<div id="page-wrap">

  <h1>Result</h1>

  <?php
            
            $answer1 = $_POST['question-1-answers'];
            $answer2 = $_POST['question-2-answers'];
            $answer3 = $_POST['question-3-answers'];
            $answer4 = $_POST['question-4-answers'];
            $answer5 = $_POST['question-5-answers'];
        
            $totalCorrect = 0;
            
            if ($answer1 == "C") { $totalCorrect++; }
            if ($answer2 == "D") { $totalCorrect++; }
            if ($answer3 == "A") { $totalCorrect++; }
            if ($answer4 == "B") { $totalCorrect++; }
            if ($answer5 == "D") { $totalCorrect++; }
            
            echo "<div id='results'>$totalCorrect / 5 correct</div>";
            
        ?>

</div>

The application is a quiz form. When all radio buttons are selected, it works, but when I miss an answer, I get this error:on the picture. In my opinion, the only way is an alert message to show if all radio buttons are selected and then the form to be sent to the result.php database.

No matter what you do on the client-side (html or javascript), you will certainly need to protect your application from people who will skip the form entirely and post directly to your submission receiving script. You need to write php code that will throw away the submission is your requirements are not fulfilled. — mickmackusa, Feb 03 '21 at 12:40

score 0 · Accepted Answer · answered Feb 03 '21 at 12:36

Try adding required attribute to one of checkboxes in the group. For example, the first question will look like

<li>
            
                <h3>WordPress is a...</h3>
                
                <div>
                    <input type="radio" name="question-1-answers" id="question-1-answers-A" value="A" required />
                    <label for="question-1-answers-A">A) Software 
                    </label>
                </div>
                
                <div>
                    <input type="radio" name="question-1-answers" id="question-1-answers-B" value="B" />
                    <label for="question-1-answers-B">B) Web App</label>
                </div>
                
                <div>
                    <input type="radio" name="question-1-answers" id="question-1-answers-C" value="C" />
                    <label for="question-1-answers-C">C) CMS</label>
                </div>
                
                <div>
                    <input type="radio" name="question-1-answers" id="question-1-answers-D" value="D" />
                    <label for="question-1-answers-D">D) Other</label>
                </div>
            
            </li>

It will make browser to verify that user checked at least one answer in each question.

Whenever you can answer a question in the first 5 minutes, that usually indicates that the question is a duplicate which should be closed instead of answered. — mickmackusa, Feb 03 '21 at 12:41

Display alert when radio button is not selected

1 Answers1