clock  Mon - Sun 8.00 AM - 8.00 PM
mail  edu@teknowize.com
fb
instagram
play store
pinterest

How to get radio buttons value using GET method in PHP

  Hariom Prajapati
  23 Jun 2022
  PHP
Imperial Advance Hero Image

How to get radio buttons value using GET method in PHP

In 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

php