- Handling select box (drop-down list) in a PHP form
- Select box
- Multi-select
- Using switch
- Download Sample Code
- PHP Select Option
- A quick introduction to the element
- Getting the selected value from a element
- Select with multiple options
- Summary
- Display Data From Database in Select Options using PHP & MYSQL
- How to Fetch Data From Database in PHP and Display in Select Option
- 1. Insert Select Option Value
- 2. Connect Database to display data
- 3. Fetch Data From Database
- 4. Display Data in Select Option
Handling select box (drop-down list) in a PHP form
This tutorial will show you how to add select boxes and multi-select boxes to a form, how to retrieve the input data from them, how to validate the data, and how to take different actions depending on the input.
Select box
Let’s look at a new input: a “select” box, also known as a “drop-down” or “pull-down” box. A select box contains one or more “options”. Each option has a “value”, just like other inputs, and also a string of text between the option tags. This means when a user selects “Male”, the “formGender” value when accessed by PHP will be “M”.
p> What is your Gender? select name="formGender"> option value="">Select. option> option value="M">Maleoption> option value="F">Femaleoption> select> p>
The selected value from this input was can be read with the standard $_POST array just like a text input and validated to make sure the user selected Male or Female.
php if(isset($_POST['formSubmit']) ) $varMovie = $_POST['formMovie']; $varName = $_POST['formName']; $varGender = $_POST['formGender']; $errorMessage = ""; // - - - snip - - - > ?>
It’s always a good idea to have a “blank” option as the first option in your select box. It forces the user to make a conscious selection from the box and avoids a situation where the user might skip over the box without meaning to. Of course, this requires validation.
( For a generic, easy to use form validation script, see PHP Form Validation Script )
Multi-select
Suppose you want to present a select box that allows the user to select multiple options.
Here is how to create such an input in HTML:
label for='formCountries[]'>Select the countries that you have visited:label>br> select multiple="multiple" name="formCountries[]"> option value="US">United Statesoption> option value="UK">United Kingdomoption> option value="France">Franceoption> option value="Mexico">Mexicooption> option value="Russia">Russiaoption> option value="Japan">Japanoption> select>
Please note the similarity to a checkbox group. First, set multiple=“multiple” as a property of the select box. Second, put [ ] at the end of the name. Finally, we don’t really need a “blank” option in this select box, because we can simply check to make sure the user selected something or not. To select multiple values, use the shift or ctrl buttons when clicking.
The PHP code to process this field is very similar to the checkbox code. $_POST[‘formCountries’] returns an array of the selected values.
php if(isset($_POST['formSubmit'])) $aCountries = $_POST['formCountries']; if(!isset($aCountries)) echo("You didn't select any countries!
\n"); > else $nCountries = count($aCountries); echo("You selected
$nCountries countries: "); for($i=0; $i $nCountries; $i++) echo($aCountries[$i] . " "); > echo(""); > > ?>
As before, use “isset” is to make sure some values were selected.
Using switch
Now, let’s change the multi-select box back to a standard single select box. We want to now perform different actions based on what selection the user makes. You could write a bunch of “if” statements, but that could get messy. Let’s look at two ways: dynamic commands and the switch statement.
These two approaches have their pro’s and con’s. The switch method is basically a concise method of writing a bunch of “if” statements. Each case matches the variable passed the switch and performs all actions after that case up until a break statement. In this case, each case is redirecting to the corresponding page to the selected country. If the selected country is not found in one of the cases, the “default” case is assumed, and “Error!” is displayed.
The second method is just passing the selected value to the header function to redirect to the correct page.
The first method requires writing more code, but is more secure because it ensures the form only redirects to 6 pre-programmed cases, or else displays an error message and ends execution.
The second method is much more concise, but less secure because a malicious user could monkey around with the form and submit whatever value he wants. If using method 2, it’s a good idea to validate the selected country first, to make sure it won’t result in a redirect to a malicious page.
Download Sample Code
Download the PHP form select samples below:
PHP Select Option
Summary: in this tutorial, you will learn how to use the element to create a drop-down list and a list box and how to get the selected values from the element in PHP.
A quick introduction to the element
The is an HTML element that provides a list of options. The following shows how to define a element in HTML:
label for="color">
Background Color: label> select name="color" id="color"> option value="">--- Choose a color --- option> option value="red">Red option> option value="green">Green option> option value="blue">Blue option> select>Code language: HTML, XML (xml)
The element has two important attributes:
- id – the id associates the element with a element
- name – the name attribute associates with the value for a form submission.
The element nested inside the element defines an option in the menu. Each option has a value attribute. The value attribute stores data submitted to the server when it is selected.
If an option doesn’t have the value attribute, the value attribute defaults to the text inside the element.
To select an option when the page loads for the first time, you can add the selected attribute to the element.
The following example selects the Green option when the page first loads:
label for="color">
Background Color: label> select name="color" id="color"> option value="">--- Choose a color --- option> option value="red">Red option> option value="green" selected>Green option> option value="blue">Blue option> select>Code language: HTML, XML (xml)
Getting the selected value from a element
We’ll create a form that uses a element.
First, create the following folders and files:
├── css | └── style.css ├── inc | ├── footer.php | ├── get.php | ├── header.php | └── post.php └── index.php
Code language: JavaScript (javascript)
Second, place the following code in the header.php file:
html>
html lang="en"> head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> link rel="stylesheet" href="css/style.css"> title>PHP select option title> head> body class="center"> main>Code language: HTML, XML (xml)
Third, place the following code in the footer.php file:
main
> body> html>Code language: HTML, XML (xml)
Fourth, add the following code to the get.php file to create a form that has one element with a submit button:
form action="" method="post">
div> label for="color">Background Color: label> select name="color" id="color"> option value="">--- Choose a color --- option> option value="red">Red option> option value="green" selected>Green option> option value="blue">Blue option> select> div> div> button type="submit">Select button> div> form>Code language: HTML, XML (xml)
The form uses the POST method to submit data to the webserver.
Finally, add the following code to the post.php file:
$color = filter_input(INPUT_POST, 'color', FILTER_SANITIZE_STRING); ?> if ($color) : ?> p>You selected span style="color:"> echo $color ?> span>
p> p>a href="index.php">Back to the form a> p> else : ?> p>You did not select any color p> endif ?>Code language: HTML, XML (xml)
To get the selected value of the element, you use the $_POST superglobal variable if the form method is POST and $_GET if the form method is GET .
Alternatively, you can use the filter_input() function to sanitize the selected value.
If you select the first option of the element, the selected value will be empty. Otherwise, the selected value is red, green, or blue.
Select with multiple options
To enable multiple selections, you add the multiple attribute to the element:
select name="colors[]" id="colors" multiple>
. select>Code language: HTML, XML (xml)
When you select multiple options of a element and submit the form, the name will contain multiple values rather than a single value. To get multiple selected values, you add the square brackets ( []) after the name of element.
Let’s take a look at an example of using a element with multiple selections.
First, create the following folders and files:
. ├── css | └── style.css ├── inc | ├── footer.php | ├── get.php | ├── header.php | └── post.php └── index.php
Code language: JavaScript (javascript)
Second, place the following code into the header.php file:
html>
html lang="en"> head> meta charset="UTF-8" /> meta name="viewport" content="width=device-width, initial-scale=1.0" /> title>PHP Listbox title> link rel="stylesheet" href="css/style.css"> head> body class="center"> main>Code language: HTML, XML (xml)
Third, add the following code to the footer.php file:
main
> body> html>Code language: HTML, XML (xml)
Fourth, include the header.php and footer.php files in the index.php :
require __DIR__ . '/inc/header.php'; $request_method = strtoupper($_SERVER['REQUEST_METHOD']); if ($request_method === 'GET') < require __DIR__ . '/inc/get.php'; > elseif ($request_method === 'POST') < require __DIR__ . '/inc/post.php'; > require __DIR__ . '/inc/footer.php';
Code language: HTML, XML (xml)
If the HTTP request is GET, the index.php file will show a form from the get.php file. When the form is submitted, the post.php file will handle the form submission.
Fifth, create a form that contains a element with the multiple attribute in the get.php file. The name of the element has an opening and closing square bracket [] so that PHP can create an array that holds the select values.
form action="" method="post">
div> label for="colors">Background Color: label> select name="colors[]" id="colors" multiple> option value="red">Red option> option value="green">Green option> option value="blue">Blue option> option value="purple">Purple option> option value="magenta">Magenta option> option value="cyan">Cyan option> select> div> div> button type="submit">Submit button> div> form>Code language: HTML, XML (xml)
Finally, handle the form submission in the post.php file:
$selected_colors = filter_input( INPUT_POST, 'colors', FILTER_SANITIZE_STRING, FILTER_REQUIRE_ARRAY ); ?> if ($selected_colors) : ?> p>You selected the following colors: p>
ul> foreach ($selected_colors as $color) : ?> li style="color:"> echo $color ?> li> endforeach ?> ul> p> p> else : ?> p>You did not select any color. p> endif ?> a href="index.php">Back to the form a>Code language: HTML, XML (xml)
The post.php file uses the filter_input() function to get the selected colors as an array. If you select one or more colors, the post.php file will display them.
Summary
- Use the element to create a dropdown list.
- Use the multiple attribute to create a list that allows multiple selections.
- Use $_POST to get the selected value of the select element if the form method is POST (or $_GET if the form method is GET ).
- Add square brackets( [] ) after the name of the element to get multiple selected values.
Display Data From Database in Select Options using PHP & MYSQL
In this tutorial, You will learn to display data from the database in select options using PHP & MySQL with some simple steps. These steps are very easy to understand and implement in web applications.
Here, I have shared source code to display data in a single dropdown select option. Once you learn it, you will easily customize it according to your project requirement.
How to Fetch Data From Database in PHP and Display in Select Option
Before getting started it’s coding, you should create the following folder structure –
codingstatus/ |__database.php |__ fetch-data.php |__ display-data.php |
Learn Also –
1. Insert Select Option Value
To display data from the database in a select option value, First of all, You will have to insert the select option value into the database. So, Make sure, you have already done it.
2. Connect Database to display data
To insert a select option value in the database, you must connect PHP to MySQL database with the help of the following query.
- $hostName – It must contain hostname.
- $userName – It must contain username of the database.
- $password – It must contain password of the database
- $database – It must contain database name.
connect_error) < die("Connection failed: " . $conn->connect_error); > ?>
3. Fetch Data From Database
To fetch data from database, you will have to implement the following steps –
Step-1: Write SQL query to select from the “course”
Step-2: store option data in the $options by fetching from the database
query($query); if($result->num_rows> 0) < $options= mysqli_fetch_all($result, MYSQLI_ASSOC); >?>
4. Display Data in Select Option
To display data in select option, you will have to follow the following steps –
Step-1: First of all, Include database.php and then also include the fetch-data.php
Step-2: Apply foreach loop to the $option and print the option value within select option input field.
File Name – display-data.php