Basic radio button validation upon submit

robincham

Truly basic question: How may I ensure a radio button is selected when a form is submitted and not submit the form if no button is selected? I don't have any button 'pre-checked' for a variety of reasons, so I need to make sure one IS checked before the form is submitted. NOTE: the page containing the radio buttons is one of a series of pages that make up a complete form; data from each page/section of the form is carried via sessions to the next page, etc. 'til user arrives a final page displaying all previous selections.

FWIW, with radio button name="fplan", I've tried isset ($_POST['fplan'], but don't know how to 'not submit' page/form if this is true. I've also tried

if (isset ($POST['submit']) && ! isset ($POST['fplan'])) {
echo "Please select a floorplan";
}

but, again, don't know how to keep form from submitting (and continuing to next part of form on next page) if radio button is not selected.

david8787

You can use javascript and add a function to check if the radio button is selected.

<form method="post" action="form_handler.php" onsubmit="return myValidator()">
</form>

Once the user clicks submit if the function returns false(because they haven't selected a button) the form is not submitted. Hope this helps.

NogDog

You may want to enclose the form processing portion of the script in its own block, either an ELSE block or its own IF block. A useful pattern is to add each validation error to an array, then if the array is empty, process the form, else redisplay the form with the error messages.

<?php
$errors = array();
if(isset($_POST['submit'])) // check to see if form was submitted
{
   if(!isset($_POST['radio_button']))
   {
      $errors['radio_button'] = "You must select an option for Radio Button.";
   }
   // and so forth...
   if(empty($errors))
   {
      // process the form
      header('Location: http://example.com/success.php'); // redirect to success page
      exit;
   }
}
?>
<html><head><title>test</title></head><body>
<p>blah blah blah</p>
<?php
if(!empty($errors))
{
   foreach($errors as $err)
   {
      echo "<p class='error'>$err</p>\n";
   }
}
?>
<form name='test'>
<!-- form fields, etc.... -->
</form>
</body></html>

NogDog

david8787;10952048 wrote:
You can use javascript and add a function to check if the radio button is selected.
<form method="post" action="form_handler.php" onsubmit="return myValidator()">
</form>
Once the user clicks submit if the function returns false(because they haven't selected a button) the form is not submitted. Hope this helps.

While such JavaScript is a useful feature, you still need to validate on the server side in the PHP, as a user can have JavaScript turned off, or a malicious user can be submitting the form via cURL or other means completely bypassing your form page.

robincham

NogDog, david8787:

Thanx for suggestions. David, I plan to use PHP instead of j'script for the reasons expressed by NogDog.

NogDog: Find below what I've done using your suggestion; unfortunately, it doesn't print the error message. Corrections, feedback welcome.

Question: Am I correct to use action="<?php $_SERVER['PHP_SELF']; ?>" in form? I figure the redirect will take a 'successful' user to next page instead of form action.

<?php
$errors = array();
if(isset($POST['submit'])) // check to see if form was submitted
{
if(!isset($POST['fplan']))
{
$errors['fplan'] = "Please select a floorplan.";
}
// and so forth with other errors
if(empty($errors))
{
//process the form
header('Location: http://nwpods.com/options.php'); // redirect to options page
exit;
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>NWPods | Original RPod Floorplans</title>
<style type="text/css'>
form class="fp_original" {
margin-top:35px;
}
</style>
<link rel="stylesheet" type="text/css" href="stylesheets/nwpods.css" />
<link rel="stylesheet" type="text/css" href="stylesheets/fplan.css" />
<script type="text/javascript" src="jscripts/jquery-1.2.3.min.js"></script>
<script type="text/javascript" src="jscripts/jquery.easing.min.js"></script>
<script type="text/javascript" src="jscripts/jquery.lavalamp.min.js"></script>
<script type="text/javascript" src="jscripts/runlamp.js"></script>
<script type="text/javascript" src="jscripts/curvycorners.js"></script>
</head>
<body>
<div id="header" class="inshadow">
<p>NW·Pods</p>
<ul class="lavaLamp" id="pods">
<li><a href="index.htm">Home</a></li>
<li class="first current"><a class="here" href="build_a_pod.htm">Build Your Pod</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="wrapper">
<div id="content">
<div id="mainbox" class="outshadow">
<h1>Build Your Pod</h1>

<h4>Step 2:</h4>
<?php
if (!empty($errors))
{
foreach($errors as $err)
{
echo '<p style="font-weight:bold">$err</p>';
}
}
?>
<p class="pick"><strong>Pick a floorplan for your original RPod model</strong></p>
<p class="intro">Make your R*Pod fit your lifestyle with an interior layout you like, then move on to step three at the bottom of the page.</p>
<form class="fp_original" action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
<table>

<tr>
<td><h3 class="first">RP-151</h3><img src="floorplans/RP-151.jpg" alt="" />
<td><p class="fplan">This stunning layout features the best in compact design and comfort. You'll enjoy lounging in this protected interior and
still feel like you're 'on the road' when you pull this little puppy behind your big rig.</p>
<label>I want floorplan RP-151<input type="radio" name="fplan" value="RP-151_9999" /></label></td>
</td>
</tr>
<tr>
<td><h3>PR-171</h3><img src="floorplans/RP-171.jpg" alt="" /></td>
<td><p class="fplan">This stunning layout features the best in compact design and comfort. You'll enjoy lounging in this protected interior and
still feel like you're 'on the road' when you pull this little puppy behind your big rig.</p>
<label>I want floorplan RP171<input type="radio" name="fplan" value="RP-171_10299" /></label></td>
</tr>
<tr>
<td><h3>RP-172</h3><img src="floorplans/RP-172.jpg" alt="" /></td>
<td><p class="fplan">This stunning layout features the best in compact design and comfort. You'll enjoy lounging in this protected interior and
still feel like you're 'on the road' when you pull this little puppy behind your big rig.</p>
<label>I want floorplan RP-172<input type="radio" name="fplan" value="RP-172_10250" /></label></td>
</tr>
<tr>
<td><h3>RP-173</h3><img src="floorplans/RP-173.jpg" alt="" /></td>
<td><p class="fplan">This stunning layout features the best in compact design and comfort. You'll enjoy lounging in this protected interior and
still feel like you're 'on the road' when you pull this little puppy behind your big rig.</p>
<label>I want floorplan RP-173<input type="radio" name="fplan" value="RP-173_10550" /></label></td>
</tr>
</table>
<p class="step">OK, now move on to pick an interior fabric design and color plus some options in<input type="submit" value="Step 3">.</p>

</form>
</div>
</div>
<div id="push"></div>
</div>
<div id="footer">
<p><strong>At NWPODS, we make quality personalized travel-trailers affordable!</strong></p>
</div>
</body>
</html>

robincham

NogDog:

Possibly simpler solution for my particular need:

I've added

<?php
session_start();

// radio button validation
if(isset($POST['submit'])) // check if form is submitted
{
if(isset($POST['fplan'])) // if fplan radio button selected, then redirect to options page
header('Location: http://somefolder/options.php');
elseif (!isset($_POST['fplan'])) // otherwise, show warning and redisplay page
$warning = "Please make a selection, then move on to step three at the bottom of the page. ";
}
?>

to the top of each radio button page, then placed

<php echo "<h3>$warning</h3>"; ?>

where I needed warning displayed on radio button page.

Also used action="<?php echo $_SERVER['radio_button.php']; ?>" to send user back to same page if radio button not selected.

Thanx for your original idea; I plan to use it on subsequent options and contact_info pages.

robincham