Select Option Dynamic Using PHP Mysql

Select Option Dynamic Using PHP Mysql

Select Option Dynamic Using PHP Mysql


  • 1. database DB

  • 2. database.php

  • 3. index.php

In this tutorial, we are going to learn how to create Dynamic Select Box using PHP. This tutorial works by the user for selecting the first select box which is a list of country, then the second select box will automatically load without any refreshing the whole page and it will display the corresponding states in the chosen country and the same with the third select box it will display cities in the chosen states.

For example

The selected country is Australia. The corresponding states are VictoriaTasmaniaSouth AustraliaWestern AustraliaQueensland, and New South Wales. And it will correspond also the Cities of the selected states. These are MelbourneGeelongBallarat, and Bendigo.

1. database DB



CREATE TABLE `tbl_insert` (
  `id` int(6) NOT NULL,
  `name` varchar(200) DEFAULT NULL,
  `country` varchar(200) DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;


CREATE TABLE `tbl_select` (
  `id` int(6) NOT NULL,
  `country` varchar(200) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;



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



<?php

    $servername     =   'localhost';
    $username       =   'root';
    $password       =   '';
    $dbname         =   "db_select";
    $connection     =   mysqli_connect($servername, $username, 
    $password,"$dbname");
    if(!$connection)
    {
      die('Could not Connect My Sql:' .mysql_error());

    }


3. index.php


<?php
include_once 'database.php';
    $select = "SELECT * FROM tbl_select";
    $result = mysqli_query ($connection, $select);

    $message   =  '';
    if(isset($_POST['submit']))
    {
        $name       =   $_POST['name'];
        $country    =   $_POST['country'];
    
        // Attempt insert query execution
        $insert = "INSERT INTO tbl_insert (name, country) VALUES ('$name', '$country')";
        if(mysqli_query($connection, $insert)){
            $message =  "Records added successfully.";
        } 
            else
        {
            $message = "ERROR: Could not able to execute $insert. " . mysqli_error($connection);
        }
        
        // Close 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">
                </div>
                <div class="form-group">
                    <select class="form-control" name="country">
                        <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>
        $(document).ready(function()
        {
            setTimeout(function()
            {
                $('#message').hide();
            },3000);
        });
    </script>
</body>

</html>
Reactions

Post a Comment

0 Comments

close