More

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


 

Related Topics

×

TOP TOPICS

Road map for web development 2022 What is git and git hub How to create a Google logo using HTML and CSS What is .htaccess file and how to use it Most important HTML5 interview questions PHP CRUD operations How to send mail using PHP Insert and fetch image using PHP How to dowload pdf using PHP How to export data in Excel using Laravel Import excel data in database using laravel How to send mail in Laravel 8 Laravel 8 CRUD Operation Laravel 8 Image Upload and Fetch Tutorial Example Laravel 8 CRUD operation using DB Laravel 8 CRUD Operation using resource controller Date Validations Using jquery Datepicker How to reset or clear a form using JavaScript Form validation in Laravel 8 How to download pdf file using Laravel 8 dompdf How to Toggle Password Visibility Using JavaScript PHP CRUD Operation Using Ajax and Jquery Get Yesterday and Tomorrow Date in PHP How to disable text selection using CSS and Jquery How to Get Previous Month and Next month date from Date in PHP Laravel CRUD Operation Using Ajax and Jquery How to find numbers from string in PHP How to Convert String Date to Date Format in PHP How to calculate age from dob column using mysql Rotate image using JQuery animate() method Allow Only Numbers in a Text Box using jQuery How To connect SSH using PHP? Radio buttons value using GET method in PHP How to get X and Y position on click event using jQuery Delete Confirmation Message using JavaScript Select2 DropDown With Validation using Bootstrap 4 How to Zoom an Image on Mouse Hover using CSS How to Remove First Element from Array in PHP How to Remove Last Element from Array in PHP E-Signature Pad using jQuery, Ajax and PHP PHP Contact Form with Google reCAPTCHA How to update profile image in Laravel using Ajax How to get X and Y position of an element using jQuery How to disable a anchor tag in HTML using CSS, JS and jQuery check if atleast one checkbox is checked or not using jQuery How can we count number of rows in a table using jQuery How can we count child elements inside a div using jQuery How to use radio button on change event in jQuery How to get checked radio button value by name using jQuery How to count the number of character in a string using jQuery How to add modal popup in PHP using jQuery?