PHP+MySqli EP.14 Ajax Select/Option From Database php การเลือกข้อมูลที่เกี่ยวข้องกันใน Database และส่งค่าผ่าน ฟอร์ม
PHP+MySqli EP.14 Ajax Select/Option
From Database php
การเลือกข้อมูลที่เกี่ยวข้องกันใน Database
และส่งค่าผ่าน ฟอร์ม สามารถนำไปประยุกค์
ใช้กับการเลือก จังหวัด อำเภอ และอื่น ๆ ได้
Database
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 |
-- phpMyAdmin SQL Dump -- version 4.7.0 -- https://www.phpmyadmin.net/ -- -- Host: localhost -- Generation Time: Aug 28, 2019 at 07:26 AM -- Server version: 10.1.25-MariaDB -- PHP Version: 5.6.31 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `selectbrand` -- CREATE DATABASE IF NOT EXISTS `selectbrand` DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci; USE `selectbrand`; -- -------------------------------------------------------- -- -- Table structure for table `cities` -- CREATE TABLE `cities` ( `city_id` int(11) NOT NULL, `state_id` int(11) NOT NULL, `city_name` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive' ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; -- -- Dumping data for table `cities` -- INSERT INTO `cities` (`city_id`, `state_id`, `city_name`, `status`) VALUES (1, 1, 'Hazelbrook', 1), (2, 1, 'Lawson', 1), (3, 2, 'Boulia', 1), (4, 2, 'Warenda', 1), (5, 2, 'Middleton', 1), (6, 3, 'Bendigo', 1), (7, 3, 'Melbourne', 1), (8, 4, 'Bümpliz', 1), (9, 4, 'Bethlehem', 1), (10, 4, 'Lorraine', 1), (11, 5, 'Les Grottes', 1), (12, 5, 'Eaux-Vives', 1), (13, 5, 'Champel', 1), (14, 6, 'Parc Jura vaudois', 1), (15, 6, 'Montricher', 1), (16, 6, 'Yverdon-les-Bains', 1), (17, 7, 'Oviedo', 1), (18, 7, 'Mieres del Camino', 1), (19, 8, 'Manresa', 1), (20, 8, 'Lleida', 1), (21, 9, 'Alcorcón', 1), (22, 9, 'Getafe', 1), (23, 10, 'Leicester', 1), (24, 10, 'Liverpool', 1), (25, 11, 'Carrefour Selous', 1), (26, 11, 'St Ouen', 1), (27, 12, 'Dundee', 1), (28, 12, 'Aberdeen', 1), (29, 13, 'Miami', 1), (30, 13, 'Orlando', 1), (31, 13, 'Jacksonville', 1), (32, 13, 'Panama City', 1), (33, 14, 'Khashuri', 1), (34, 14, 'Tkibuli', 1), (35, 14, 'Ambrolauri', 1), (36, 14, 'Ghobi', 1), (37, 15, 'Wichita', 1), (38, 15, 'Dodge City', 1), (39, 15, 'Liberal', 1), (40, 15, 'Manhattan', 1); -- -------------------------------------------------------- -- -- Table structure for table `countries` -- CREATE TABLE `countries` ( `country_id` int(11) NOT NULL, `country_name` varchar(50) CHARACTER SET utf8 NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive' ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; -- -- Dumping data for table `countries` -- INSERT INTO `countries` (`country_id`, `country_name`, `status`) VALUES (1, 'Austrialia', 1), (2, 'Switzerland', 1), (3, 'Spain', 1), (4, 'United kingdom', 1), (5, 'United states', 1); -- -------------------------------------------------------- -- -- Table structure for table `states` -- CREATE TABLE `states` ( `state_id` int(11) NOT NULL, `country_id` int(11) NOT NULL, `state_name` varchar(50) COLLATE utf8_unicode_ci NOT NULL, `status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active | 0=Inactive' ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; -- -- Dumping data for table `states` -- INSERT INTO `states` (`state_id`, `country_id`, `state_name`, `status`) VALUES (1, 1, 'New South Wales', 1), (2, 1, 'Queensland', 1), (3, 1, 'Victoria', 1), (4, 2, 'Bern', 1), (5, 2, 'Geneva', 1), (6, 2, 'Vaud', 1), (7, 3, 'Asturias', 1), (8, 3, 'Katalonien', 1), (9, 3, 'Madrid', 1), (10, 4, 'England', 1), (11, 4, 'Jersey', 1), (12, 4, 'Scotland', 1), (13, 5, 'Florida', 1), (14, 5, 'Georgia', 1), (15, 5, 'Kansas', 1); -- -------------------------------------------------------- -- -- Indexes for table `cities` -- ALTER TABLE `cities` ADD PRIMARY KEY (`city_id`); -- -- Indexes for table `countries` -- ALTER TABLE `countries` ADD PRIMARY KEY (`country_id`); -- -- Indexes for table `states` -- ALTER TABLE `states` ADD PRIMARY KEY (`state_id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `cities` -- ALTER TABLE `cities` MODIFY `city_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=81; -- -- AUTO_INCREMENT for table `countries` -- ALTER TABLE `countries` MODIFY `country_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11; -- -- AUTO_INCREMENT for table `states` -- ALTER TABLE `states` MODIFY `state_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=31; -- /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */; |
condb.php(สร้างไว้ในโฟเดอร์ Connections)
1 2 3 4 5 6 |
<?php $con= mysqli_connect("localhost","root","","selectbrand") or die("Error: " . mysqli_error($con)); mysqli_query($con, "SET NAMES 'utf8' "); ?> |
index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
<?php // Include the database config file include_once 'Connections/condb.php'; // Fetch all the country data $query = "SELECT * FROM countries WHERE status = 1 ORDER BY country_name ASC"; $result = mysqli_query($con, $query); ?> <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#country').on('change', function(){ var countryID = $(this).val(); if(countryID){ $.ajax({ type:'POST', url:'ajaxData.php', data:'country_id='+countryID, success:function(html){ $('#state').html(html); $('#city').html('<option value="">Select state first</option>'); } }); }else{ $('#state').html('<option value="">Select country first</option>'); $('#city').html('<option value="">Select state first</option>'); } }); $('#state').on('change', function(){ var stateID = $(this).val(); if(stateID){ $.ajax({ type:'POST', url:'ajaxData.php', data:'state_id='+stateID, success:function(html){ $('#city').html(html); } }); }else{ $('#city').html('<option value="">Select state first</option>'); } }); }); </script> <title></title> </head> <body> </br> </br> <div class="container"> <div class="row"> <div class="col-2"> </div> <div class="col"> <div class="card" style="width: 100%"> <div class="col"> <form action="n.php" method="POST"> <br/><h3>Ajax Select/Option : fordev22 </h3> <br /> <!-- Country dropdown --> <select class="form-control success" id="country" name='country_id'> <option value="">Select Country</option> <?php while($row = mysqli_fetch_array($result)) { echo'<option value="'.$row['country_id'].'">'.$row["country_name"].'</option>'; } ?> </select><br/> <!-- State dropdown --> <select class="form-control" id="state" name="state_id"> <option value="">Select state</option> </select><br/> <!-- City dropdown --> <select class="form-control" id="city" name="city_id"> <option value="">Select city</option> </select><br/> <input class="btn btn-secondary btn-block" type="submit" name="submit" value="Enter"/><br/> </form> </div> </div> </div> <div class="col-2"> </div> </div> </div> </body> </html> |
ajaxData.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<?php // Include the database config file include_once 'Connections/condb.php'; if(!empty($_POST["country_id"])){ // Fetch state data based on the specific country $query = "SELECT * FROM states WHERE country_id = ".$_POST['country_id']." AND status = 1 ORDER BY state_name ASC"; $result = mysqli_query($con, $query); // Generate HTML of state options list if($result->num_rows > 0){ echo '<option value="">Select State</option>'; while($row = $result->fetch_assoc()){ echo '<option value="'.$row['state_id'].'">'.$row['state_name'].'</option>'; } }else{ echo '<option value="">State not available</option>'; } }elseif(!empty($_POST["state_id"])){ // Fetch city data based on the specific state $query = "SELECT * FROM cities WHERE state_id = ".$_POST['state_id']." AND status = 1 ORDER BY city_name ASC"; $result = mysqli_query($con, $query); // Generate HTML of city options list if($result->num_rows > 0){ echo '<option value="">Select city</option>'; while($row = $result->fetch_assoc()){ echo '<option value="'.$row['city_id'].'">'.$row['city_name'].'</option>'; } }else{ echo '<option value="">City not available</option>'; } } ?> |
n.php (ตัวอย่างข้อมูลที่ภูกส่งมา)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<?php // Include the database config file include_once 'Connections/condb.php'; // Fetch all the country data $country_id = $_POST['country_id']; $state_id = $_POST['state_id']; $city_id = $_POST['city_id']; $query = "SELECT * FROM countries WHERE country_id = $country_id "; $result = mysqli_query($con, $query); while($row = mysqli_fetch_array($result)) echo "ประเทศ : ".$row['country_name']."</br>"; $query = "SELECT * FROM states WHERE state_id = $state_id "; $result = mysqli_query($con, $query); while($row = mysqli_fetch_array($result)) echo "รัฐ : ".$row['state_name']."</br>"; $query = "SELECT * FROM cities WHERE city_id = $city_id "; $result = mysqli_query($con, $query); while($row = mysqli_fetch_array($result)) echo "เมือง : ".$row['city_name']; ?> <?php echo "<pre>"; print_r($_POST); echo "</pre>"; ?> <?php if(isset($_POST['submit'])){ echo 'Selected Country ID: '.$_POST['country_id']."<br/>"; echo 'Selected State ID: '.$_POST['state_id']."<br/>"; echo 'Selected City ID: '.$_POST['city_id']."<br/>"; } ?> <!DOCTYPE html> <html> <head> <title></title> </head> <body> <a href="index.php">Select</a> </body> </html> |
ผลลัพธ์ที่ได้