Hariom
Prajapati
23 Jun 2022
PHPIn this tutorial we will learn that how to get radio buttons value using GET method in PHP. Here we will take an example of PHP radio buttons to get selected value of radio buttons in PHP by GET method.
Now , follow all the bellow steps.
Step 1 – Create a HLML form with radio button
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>how to create radio buttons get selected value in php</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
font-family: 'JetBrains Mono', monospace;
background: #d2d2d2;
}
.error {
color: red;
}
select {
width: 100%;
min-height: 150px;
margin-bottom: 20px;
}
input[type="submit"] {
display: block;
margin: 20px auto;
}
label {
display: block;
position: relative;
cursor: pointer;
font-size: 18px;
padding-left: 46px;
margin-bottom: 15px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.select {
top: 0;
left: 0;
height: 25px;
width: 25px;
position: absolute;
border-radius: 50%;
background-color: #cccccc;
}
label:hover input~.select {
background-color: #ccc;
}
label input:checked~.select {
background-color: #1A33FF;
}
.select:after {
content: "";
position: absolute;
display: none;
}
label input:checked~.select:after {
display: block;
}
label .select:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
.select-tag {
background: #48161D;
color: #fff;
border-radius: 15px;
display: inline-block;
font-size: 14px;
padding: 3px 15px;
margin-left: 5px;
}
.main-box {
border-radius: 5px;
background: #fff;
padding: 15px;
border: 1px solid #48161D;
box-shadow: 2px 2px 5px #d2d2d2;
}
</style>
</head>
<body>
<div class="container mt-5 pt-5">
<div class="row mt-5">
<div class="col-md-6 main-box offset-md-3">
<form action="" method="post">
<div class="row">
<div class="col-md-12 text-center title mb-2">
<h4><strong>Radio Buttons in PHP</strong></h4>
</div>
<div class="col-md-12 mt-4">
<div class="row">
<div class="col-md-6">
<label>
<input type="radio" name="radio" value="html">HTML
<span class="select"></span>
</label>
</div>
<div class="col-md-6">
<label>
<input type="radio" name="radio" value="css">CSS
<span class="select"></span>
</label>
</div>
<div class="col-md-6">
<label>
<input type="radio" name="radio" value="js">JavaScript
<span class="select"></span>
</label>
</div>
<div class="col-md-6">
<label>
<input type="radio" name="radio" value="php">PHP
<span class="select"></span>
</label>
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" name="submit" vlaue="Get Values" class="btn btn-success btn-sm">
</div>
<div class="col-md-12 text-center mt-2">
<!-- we need to use php code here which describe in step 2 to get value -->
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>Step 2 – Use below PHP code to get value of radio button using GET method
<?php
if(isset($_POST['submit'])){
if(!empty($_POST['radio'])) {
echo '<p class="select-tag mt-3">'.$_POST['radio'].'</p>';
}else{
echo '<p class="error alert alert-danger mt-3">Please Select Any Radio.';
}
}
?>
Let’s combine step 1 and step 2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>how to create radio buttons get selected value in php</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
body {
font-family: 'JetBrains Mono', monospace;
background: #d2d2d2;
}
.error {
color: red;
}
select {
width: 100%;
min-height: 150px;
margin-bottom: 20px;
}
input[type="submit"] {
display: block;
margin: 20px auto;
}
label {
display: block;
position: relative;
cursor: pointer;
font-size: 18px;
padding-left: 46px;
margin-bottom: 15px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.select {
top: 0;
left: 0;
height: 25px;
width: 25px;
position: absolute;
border-radius: 50%;
background-color: #cccccc;
}
label:hover input~.select {
background-color: #ccc;
}
label input:checked~.select {
background-color: #1A33FF;
}
.select:after {
content: "";
position: absolute;
display: none;
}
label input:checked~.select:after {
display: block;
}
label .select:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
.select-tag {
background: #48161D;
color: #fff;
border-radius: 15px;
display: inline-block;
font-size: 14px;
padding: 3px 15px;
margin-left: 5px;
}
.main-box {
border-radius: 5px;
background: #fff;
padding: 15px;
border: 1px solid #48161D;
box-shadow: 2px 2px 5px #d2d2d2;
}
</style>
</head>
<body>
<div class="container mt-5 pt-5">
<div class="row mt-5">
<div class="col-md-6 main-box offset-md-3">
<form action="" method="post">
<div class="row">
<div class="col-md-12 text-center title mb-2">
<h4><strong>Radio Buttons in PHP</strong></h4>
</div>
<div class="col-md-12 mt-4">
<div class="row">
<div class="col-md-6">
<label>
<input type="radio" name="radio" value="html">HTML
<span class="select"></span>
</label>
</div>
<div class="col-md-6">
<label>
<input type="radio" name="radio" value="css">CSS
<span class="select"></span>
</label>
</div>
<div class="col-md-6">
<label>
<input type="radio" name="radio" value="js">JavaScript
<span class="select"></span>
</label>
</div>
<div class="col-md-6">
<label>
<input type="radio" name="radio" value="php">PHP
<span class="select"></span>
</label>
</div>
</div>
</div>
<div class="col-md-12">
<input type="submit" name="submit" vlaue="Get Values" class="btn btn-success btn-sm">
</div>
<div class="col-md-12 text-center mt-2">
<?php
if (isset($_POST['submit'])) {
if (!empty($_POST['radio'])) {
echo '<p class="select-tag mt-3">' . $_POST['radio'] . '</p>';
} else {
echo '<p class="error alert alert-danger mt-3">Please Select Any Radio.';
}
}
?>
</div>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
Output
