Select Option Dynamic Using PHP Mysql

1. Database Setup

First, create the necessary tables in your MySQL database:

-- Table for storing countries
CREATE TABLE `tbl_select` (
  `id` INT(6) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `country` VARCHAR(200) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- Table for storing user input
CREATE TABLE `tbl_insert` (
  `id` INT(6) NOT NULL AUTO_INCREMENT PRIMARY KEY,
  `name` VARCHAR(200) DEFAULT NULL,
  `country` VARCHAR(200) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

-- Insert countries into the tbl_select table
INSERT INTO `tbl_select` (`id`, `country`) VALUES
(1, 'Cambodia'),
(2, 'Mexico'),
(3, 'India'),
(4, 'France'),
(5, 'China'),
(6, 'Bermuda'),
(7, 'Australia'),
(8, 'Andorra'),
(9, 'Burundi'),
(10, 'Colombia');

2. `database.php`

This file establishes a connection to the MySQL database.

<?php
$servername = 'localhost';   // Database server
$username = 'root';          // Database username
$password = '';              // Database password
$dbname = 'db_select';       // Database name

// Create a connection
$connection = mysqli_connect($servername, $username, $password, $dbname);

// Check if connection was successful
if (!$connection) {
    die('Could not connect to MySQL: ' . mysqli_error($connection));
}
?>

3. `index.php`

This file contains the main logic for dynamically displaying the country selection and handling user form submissions.

<?php
include_once 'database.php'; // Include database connection

// Fetch countries from the database
$select = "SELECT * FROM tbl_select";
$result = mysqli_query($connection, $select);

// Initialize message variable
$message = '';

// Check if form is submitted
if (isset($_POST['submit'])) {
    $name = $_POST['name'];
    $country = $_POST['country'];

    // Insert the data into tbl_insert
    $insert = "INSERT INTO tbl_insert (name, country) VALUES ('$name', '$country')";
    if (mysqli_query($connection, $insert)) {
        $message = "Records added successfully.";
    } else {
        $message = "ERROR: Could not execute $insert. " . mysqli_error($connection);
    }

    // Close the database connection
    mysqli_close($connection);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid h-100 bg-light text-dark">
    <div class="row justify-content-center align-items-center">
        <h1>Select Option Dynamic Mysql</h1>
    </div>
    <hr/>
    <div class="row justify-content-center align-items-center h-100">
        <div class="col col-sm-6 col-md-6 col-lg-4 col-xl-3">
            <h5 class="text-success text-center" id="message"><?= $message; ?></h5>
            <form action="index.php" method="POST">
                <div class="form-group">
                    <input type="text" class="form-control" name="name" placeholder="Enter your name" required>
                </div>
                <div class="form-group">
                    <select class="form-control" name="country" required>
                        <option>Please select country</option>
                        <?php foreach ($result as $key => $value) { ?>
                            <option value="<?= $value['country']; ?>"><?= $value['country']; ?></option>
                        <?php } ?>
                    </select>
                </div>
                <div class="form-group">
                    <div class="container">
                        <div class="row">
                            <div class="col"><button type="submit" name="submit" class="col-6 btn btn-primary btn-sm float-left">Submit</button></div>
                            <div class="col"><button type="submit" name="reset" class="col-6 btn btn-secondary btn-sm float-right">Reset</button></div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    // Hide message after 3 seconds
    $(document).ready(function () {
        setTimeout(function () {
            $('#message').hide();
        }, 3000);
    });
</script>

</body>
</html>

How the Dynamic Select Works

Step 1: The first select dropdown allows the user to select a country.
Step 2: Once a country is selected, the form is submitted, and the selected country along with the user’s name, is saved into the database (tbl_insert).
Step 3: The success message or error message will be displayed based on the result of the form submission.
Step 4: The form will automatically hide the message after 3 seconds using jQuery.

Testing the Code

Upload the files to your web server: Upload database.php and index.php to the root directory of your server.
Create the database and tables: Execute the SQL code in your MySQL database to create the tables and insert countries.
Access the page: Go to your page in the browser (e.g., http://yourdomain.com/index.php) and test the dynamic select box functionality.

This tutorial demonstrates creating a dynamic dropdown system using PHP, MySQL, and jQuery for a smoother user experience. The system will be able to store data in the database and dynamically display the information based on user input.

Souy Soeng

Select Option Dynamic Using PHP Mysql

1. Database Setup

2. `database.php`

3. `index.php`

How the Dynamic Select Works

Testing the Code

Post a Comment

Souy Soeng

Select Option Dynamic Using PHP Mysql

1. Database Setup

2. database.php

3. index.php

How the Dynamic Select Works

Testing the Code

Post a Comment

2. `database.php`

3. `index.php`