How to Keep Radio Button Checked After Form Submit in PHP
In this blog, you will learn how to keep the radio button checked after the form submit. When we use validation in the form then there is a need to keep the radio button checked after the form submit.
If we left any input empty then our remaining input should be filled with the previous value that the user filled, if our form got blanked then the user irritates to fill it up again so for user experience we need our input should be filled up with the value after submit.
Let’s see the solution how to keep the radio button checked after submitting:
Example:
<?php
$nameErr = $emailErr = $mobileErr = $genderErr=" ";
$name = $email = $mobile = $gender="";
if (isset($_POST["submit"])) {
if (empty($_POST["name"])) {
$nameErr = "Name is required";
} else {
$name = $_POST["name"];
// check if name only contains letters and whitespace
if (!preg_match("/^[a-zA-Z-' ]*$/",$name)) {
$nameErr = "Only letters and white space allowed";
}
}
if (empty($_POST["email"])) {
$emailErr = "Email is required";
} else {
$email = $_POST["email"];
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
$emailErr = "Invalid email format";
}
}
if (empty($_POST["mobile"])) {
$mobileErr = "Mobile is required";
} else {
$mobile = $_POST["mobile"];
if (!preg_match('/^[0-9]{10}+$/', $mobile)) {
$mobileErr = "Only letters and white space allowed";
}
}
if (empty($_POST["gender"])) {
$genderErr = "Gender is required";
} else {
$gender = $_POST["gender"];
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Validation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
.error
{
color:#f00;
}
</style>
</head>
<body style="background-color: #8affaf;">
<div class="container">
<h2 class="text-center mt-5 text-primary">CONTACT US</h2>
<form method="post" class="needs-validation" enctype="multipart/form-data">
<div class="form-group">
<label for="uname">NAME:</label>
<input type="text" class="form-control" placeholder="Enter username" name="name" value="<?php if(isset($_POST['name'])){echo $_POST['name'];} ?>" >
<span class="error">* <?php echo $nameErr;?></span>
</div>
<div class="form-group">
<label for="uname">EMAIL:</label>
<input type="email" class="form-control" placeholder="Enter Email" name="email" value="<?php if(isset($_POST['email'])){echo $_POST['email'];} ?>">
<span class="error">* <?php echo $emailErr;?></span>
</div>
<div class="form-group">
<label for="uname">MOBILE NUMBER:</label>
<input type="text" class="form-control" placeholder="Enter Mobile no" name="mobile" value="<?php if(isset($_POST['mobile'])){echo $_POST['mobile'];} ?>" >
<span class="error">* <?php echo $mobileErr;?></span>
</div>
<div class="form-group">
<label for="uname">Gender:</label>
<input type="radio" name="gender" value="male" <?php if(isset($_POST['gender'])){if($_POST['gender']=="male"){echo 'checked';}} ?>> Male
<input type="radio" name="gender" value="female" <?php if(isset($_POST['gender'])){if($_POST['gender']=="female"){echo 'checked';}} ?>> Female
<p><span class="error"> <?php echo $genderErr;?></span></p>
</div>
<button type="submit" name="submit" class="btn btn-primary p-3 btn-block my-5">Submit</button>
</form>
</div>
</body>
</html>