How to get the selected value from select option/dropdown select menu using PHP

Geekydaayaree May 22, 2021

How to get the selected value from the dropdown select menu using PHP

How to get the selected value from select option/dropdown select menu using PHP


Hello there, in this article you will get to know how you can get the selected value of a dropdown menu or a select menu and show that selected option in a text box.

Applications:

This is basically used in the forms, especially when you are modifying/updating the existing form data and you have to get the value of the selected option of the previous form.

Technology used:

HTML, CSS, and PHP



Source Code: 

HTML:


    
        <!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
</head>
<body>
<div class="test_container">
<ul class="wrapper">
<li>
<form action="<?php htmlentities($_SERVER['PHP_SELF']);?>" method="POST">
<label for="Gender">Gender: </label>
<select name="gender_select" id="Gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
</select>
<input type="submit" name="Submit" value="Submit">
</form>
</li>
<li>
<label for="">Selected Value: </label>
<input type="text" name="select_input" id="" value="">
</li>
</ul>
</div>
</body>
</html>

CSS:


 <style>
        .test_container{
                width: 600px;
                border: 2px solid black;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
        }
        .wrapper li{                
                display: flex;
                margin: 10px;
        }
</style>

PHP:


<?php htmlentities($_SERVER['PHP_SELF']);?>
<?php echo $_POST['gender_select']?>

Complete Source Code:


<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        .test_container{
                width: 600px;
                border: 2px solid black;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%,-50%);
        }
        .wrapper li{                
                display: flex;
                margin: 10px;
        }
        </style>

       
</head>
<body>
<div class="test_container">
<ul class="wrapper">
<li>
<form action="<?php htmlentities($_SERVER['PHP_SELF']);?>" method="POST">
<label for="Gender">Gender: </label>
<select name="gender_select" id="Gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
</select>
<input type="submit" name="Submit" value="Submit">
</form>
</li>
<li>
<label for="">Selected Value: </label>
<input type="text" name="select_input" id="" value="<?php echo $_POST['gender_select']?>">
</li>
</ul>
</div>
</body>
</html>

Output:

Thank you.!
Tags:

Post a Comment

0 Comments