PHP Radio Button and Submit Button Validation

PHP
1

I’m making a PHP quiz, but I’m not sure how to write the validation for when the user clicks on the Submit button without checking any of the radio buttons, and for when the user doesn’t click a particular radio button. I only have little knowledge of PHP, so I’m still getting familiar with the language. I’ve provided my code below. I appreciate any help for future use.

HTML

<ol>
    <li>
			<h3>What does HTML stand for?</h3>
			<div>
				<input type="radio" name="q1" id="q1a" value="A" />
				<label for="q1a">A) Home Tool Markup Learner </label>
			</div>			
			<div>
				<input type="radio" name="q1" id="q1b" value="B" />
				<label for="q1b">B) HyperText Markup Language</label>
			</div>			
			<div>
				<input type="radio" name="q1" id="q1c" value="C" />
				<label for="q1c">C) Hypermedia Text Menu Links</label>
			</div>			
			<div>
				<input type="radio" name="q1" id="q1d" value="D" />
				<label for="q1d">D) Hyperlinks and Text Markup Language</label>
			</div>		
		</li>
		
		<li>
			<h3>How many level of headings are there in HTML?</h3>
			<div>
				<input type="radio" name="q2" id="q2a" value="A" />
				<label for="q2a">A) 3</label>
			</div>			
			<div>
				<input type="radio" name="q2" id="q2b" value="B" />
				<label for="q2b">B) 4</label>
			</div>			
			<div>
				<input type="radio" name="q2" id="q2c" value="C" />
				<label for="q2c">C) 5</label>
			</div>			
			<div>
				<input type="radio" name="q2" id="q2d" value="D" />
				<label for="q2d">D) 6</label>
			</div>		
		</li>
   </li>
</ol>

PHP

<?php            
            $answer1 = $_POST['q1'];
            $answer2 = $_POST['q2'];
            $answer3 = $_POST['q3'];
            $answer4 = $_POST['q4'];
            $answer5 = $_POST['q5'];
			$answer6 = $_POST['q6'];
			$answer7 = $_POST['q7'];
			$answer8 = $_POST['q8'];
			$answer9 = $_POST['q9'];
			$answer10 = $_POST['q10'];
        
            $totalCorrect = 0;
            
            if ($answer1 == "B") { $totalCorrect++; }
            if ($answer2 == "D") { $totalCorrect++; }
            if ($answer3 == "C") { $totalCorrect++; }
            if ($answer4 == "A") { $totalCorrect++; }
            if ($answer5 == "C") { $totalCorrect++; }
		    if ($answer6 == "A") { $totalCorrect++; }
			if ($answer7 == "D") { $totalCorrect++; }
			if ($answer8 == "C") { $totalCorrect++; }
			if ($answer9 == "B") { $totalCorrect++; }
			if ($answer10 == "D") { $totalCorrect++; }

            if (!isset($anwser1))
			{
				echo "Please select an option";
			}

            echo "<div id='results'>$totalCorrect/10 Correct</div>";
?>
2

if you are unsure about the data, look at it:

var_dump($_POST);

you could just check this with

$questions = ['q1', 'q2', 'q3', ...];
$answers = array_keys($_POST);
$given = array_intersect($questions, $answers);
if(empty($given)) die('no answer given');
1 Like
3

and to extend that a little bit;

if(empty($given)) die("No answer given");
if(count($given) != count($questions)) die("Not all answers given");

I would certainly consider adding some Javascript validation in addition to this backend checking though. Give the user a chance to correct beforehand.

1 Like
4

Hi, thanks for the code. But I am getting the error “Notice: Undefined index” for the first lines of the PHP code ($answer1 = $_POST['q1'];). Is this because I’m using the $_POST method even though the indexes have not been set through the method? Do I have to assign them or is there a way around this?

5

Show us your full HTML.

6

I managed to get the messages to appear. But when I click the Submit button without checking any of the radio buttons, the message below appears above the “Please select an option.”
C:\WAMP64\WWW\QUIZ\RESULT.PHP:13:
ARRAY (SIZE=0)
EMPTY

And this appears when I only click one radio button and click Submit.
C:\WAMP64\WWW\QUIZ\RESULT.PHP:13:
ARRAY *(SIZE=1)
‘Q10’ => STRING ‘B’ (LENGTH=1)
“Please select an option for each question.”

I’ve provided my full HTML code for the quiz below.

HTML

<form action="Result.php" method="post" id="test">
	<ol>
		<li>
			<h3>What does HTML stand for?</h3>
			<div>
				<input type="radio" name="q1" id="q1a" value="A" />
				<label for="q1a">A) Home Tool Markup Learner </label>
			</div>			
			<div>
				<input type="radio" name="q1" id="q1b" value="B" />
				<label for="q1b">B) HyperText Markup Language</label>
			</div>			
			<div>
				<input type="radio" name="q1" id="q1c" value="C" />
				<label for="q1c">C) Hypermedia Text Menu Links</label>
			</div>			
			<div>
				<input type="radio" name="q1" id="q1d" value="D" />
				<label for="q1d">D) Hyperlinks and Text Markup Language</label>
			</div>		
		</li>
		
		<li>
			<h3>How many level of headings are there in HTML?</h3>
			<div>
				<input type="radio" name="q2" id="q2a" value="A" />
				<label for="q2a">A) 3</label>
			</div>			
			<div>
				<input type="radio" name="q2" id="q2b" value="B" />
				<label for="q2b">B) 4</label>
			</div>			
			<div>
				<input type="radio" name="q2" id="q2c" value="C" />
				<label for="q2c">C) 5</label>
			</div>			
			<div>
				<input type="radio" name="q2" id="q2d" value="D" />
				<label for="q2d">D) 6</label>
			</div>		
		</li>
		
		<li>
			<h3>What is the correct tag for inserting a line break?</h3>
			<div>
				<input type="radio" name="q3" id="q3a" value="A" />
				<label for="q3a">A) lb </label>
			</div>
			
			<div>
				<input type="radio" name="q3" id="q3b" value="B" />
				<label for="q3b">B) hr </label>
			</div>
			
			<div>
				<input type="radio" name="q3" id="q3c" value="C" />
				<label for="q3c">C) br </label>
			</div>
			
			<div>
				<input type="radio" name="q3" id="q3d" value="D" />
				<label for="q3d">D) sp </label>
			</div>		
		</li>
		
		<li>
			<h3>When adding a RGB colour, the number are separated by?</h3>
			<div>
				<input type="radio" name="q4" id="q4a" value="A" />
				<label for="q4a">A) Commas </label>
			</div>			
			<div>
				<input type="radio" name="q4" id="q4b" value="B" />
				<label for="q4b">B) Colons </label>
			</div>			
			<div>
				<input type="radio" name="q4" id="q4c" value="C" />
				<label for="q4c">C) Semi Colons </label>
			</div>			
			<div>
				<input type="radio" name="q4" id="q4d" value="D" />
				<label for="q4d">D) Spaces </label>
			</div>		
		</li>
		
		<li>
			<h3>To create an order list, what tag is used?</h3>
			<div>
				<input type="radio" name="q5" id="q5a" value="A" />
				<label for="q5a">A) il </label>
			</div>			
			<div>
				<input type="radio" name="q5" id="q5b" value="B" />
				<label for="q5b">B) ul </label>
			</div>			
			<div>
				<input type="radio" name="q5" id="q5c" value="C" />
				<label for="q5c">C) ol </label>
			</div>			
			<div>
				<input type="radio" name="q5" id="q5d" value="D" />
				<label for="q5d">D) tl </label>
			</div> 
		</li>
		
		<li>
			<h3>Where does the 'base' tag appear?</h3>
			<div>
				<input type="radio" name="q6" id="q6a" value="A" />
				<label for="q6a">A) Head </label>
			</div>			
			<div>
				<input type="radio" name="q6" id="q6b" value="B" />
				<label for="q6b">B) Title </label>
			</div>			
			<div>
				<input type="radio" name="q6" id="q6c" value="C" />
				<label for="q6c">C) Body </label>
			</div>			
			<div>
				<input type="radio" name="q6" id="q6d" value="D" />
				<label for="q6d">D) Form </label>
			</div> 
		</li>
		
		<li>
			<h3>What is the latest HTML standard?</h3>
			<div>
				<input type="radio" name="q7" id="q7a" value="A" />
				<label for="q7a">A) XML </label>
			</div>			
			<div>
				<input type="radio" name="q7" id="q7b" value="B" />
				<label for="q7b">B) XHTML </label>
			</div>			
			<div>
				<input type="radio" name="q7" id="q7c" value="C" />
				<label for="q7c">C) HTML 4.0 </label>
			</div>			
			<div>
				<input type="radio" name="q7" id="q7d" value="D" />
				<label for="q7d">D) HTML 5.0 </label>
			</div> 
		</li>
		
		<li>
			<h3>Where is the Body tag usually placed after?</h3>
			<div>
				<input type="radio" name="q8" id="q8a" value="A" />
				<label for="q8a">A) Title tag </label>
			</div>			
			<div>
				<input type="radio" name="q8" id="q8b" value="B" />
				<label for="q8b">B) Form tag </label>
			</div>			
			<div>
				<input type="radio" name="q8" id="q8c" value="C" />
				<label for="q8c">C) Head tag </label>
			</div>			
			<div>
				<input type="radio" name="q8" id="q8d" value="D" />
				<label for="q8d">D) HTML tag </label>
			</div> 
		</li>
		
		<li>
			<h3>What tag is used to display an image?</h3>
			<div>
				<input type="radio" name="q9" id="q9a" value="A" />
				<label for="q9a">A) picture </label>
			</div>			
			<div>
				<input type="radio" name="q9" id="q9b" value="B" />
				<label for="q9b">B) img </label>
			</div>			
			<div>
				<input type="radio" name="q9" id="q9c" value="C" />
				<label for="q9c">C) image </label>
			</div>			
			<div>
				<input type="radio" name="q9" id="q9d" value="D" />
				<label for="q9d">D) src </label>
			</div> 
		</li>
		
		<li>
			<h3>What version of HTML does not require br to be closed with /?</h3>
			<div>
				<input type="radio" name="q10" id="q10a" value="A" />
				<label for="q10a">A) HTML 2 </label>
			</div>			
			<div>
				<input type="radio" name="q10" id="q10b" value="B" />
				<label for="q10b">B) HTML 3 </label>
			</div>			
			<div>
				<input type="radio" name="q10" id="q10c" value="C" />
				<label for="q10c">C) HTML 4 </label>
			</div>			
			<div>
				<input type="radio" name="q10" id="q10d" value="D" />
				<label for="q10d">D) HTML 5 </label>
			</div> 
		</li>
	</ol>
            <input type="submit" value="Submit" class="submitbtn" />			
		</form>

PHP

 <?php            
		var_dump($_POST);
		$questions = ['q1', 'q2', 'q3', 'q4', 'q5', 'q6', 'q7', 'q8', 'q9', 'q10'];
		$answers = array_keys($_POST);
		$given = array_intersect($questions, $answers);
		if(empty($given)) die('Please select an option');
		if(count($given) != count($questions)) die("Please select an option for each question");
		
		
            $answer1 = $_POST['q1'];
            $answer2 = $_POST['q2'];
            $answer3 = $_POST['q3'];
            $answer4 = $_POST['q4'];
            $answer5 = $_POST['q5'];
			$answer6 = $_POST['q6'];
			$answer7 = $_POST['q7'];
			$answer8 = $_POST['q8'];
			$answer9 = $_POST['q9'];
			$answer10 = $_POST['q10'];
        
            $totalCorrect = 0;
            
            if ($answer1 == "B") { $totalCorrect++; }
            if ($answer2 == "D") { $totalCorrect++; }
            if ($answer3 == "C") { $totalCorrect++; }
            if ($answer4 == "A") { $totalCorrect++; }
            if ($answer5 == "C") { $totalCorrect++; }
			if ($answer6 == "A") { $totalCorrect++; }
			if ($answer7 == "D") { $totalCorrect++; }
			if ($answer8 == "C") { $totalCorrect++; }
			if ($answer9 == "B") { $totalCorrect++; }
			if ($answer10 == "D") { $totalCorrect++; }
			
            echo "<div id='results'>$totalCorrect/10 Correct</div>";   
		?>
7

that’s the var_dump outputting the contents of the $_POST array.

When you select no options, $_POST is empty, but it’s still an array (it’s ALWAYS an array - it’s a Superglobal Variable).

When you check one item and submit, $_POST has 1 element in it (SIZE=1), you chose the “B” option for question 10. (‘Q10’ => STRING ‘B’ (LENGTH=1))… The array key is defined by the name attribute (q10), and the value stored in it is a String, “B”, which has a length of 1. Because it’s a single character.

1 Like
8

OK, I understand now. Would there be anyway to hide these in the Results page?

9

remove the var_dump line…?

10

OK. Thanks for your help.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.