Filling the Twitter Bootstrap-Select Dynamically From MySQL Data Using PHP

In this lesson is a continuation of our previous tutorial called Creating and Populating table with MySQL Data using Twitter Bootstrap framework. At this time, we’re going to use the same framework. But we will focus on how to populate the Twitter Bootstrap-Select dynamically from MySQL Data using PHP and display the corresponding value in a label form. And it looks like as shown below. bootstrap_select Then let’s create a new file and name it as “selectbox.php”. And the following code:
  1. <!DOCTYPE html>
  2.  
  3. <html lang="en">
  4. <head>
  5. <meta charset="utf-8">
  6. <meta content="width=device-width, initial-scale=1.0" name="viewport">
  7. <meta content="" name="description">
  8. <meta content="" name="author">
  9. <link href="" rel="shortcut icon">
  10.  
  11. <title>List of Student</title><!-- Bootstrap core CSS -->
  12. <link href="css/bootstrap.min.css" rel="stylesheet">
  13. </head>
  14.  
  15. <body>
  16. <div class="container">
  17. <div class="well">
  18. <a class="brand" href="#">
  19. <h2>Bootstrap-select</h2></a>
  20. </div>
  21.  
  22. <div class="well">
  23. <!--This is the area where we are going to put our HTML form and PHP codes-->
  24.  
  25. <p>&nbsp;</p>
  26. </div>
  27. </div><!-- /container -->
  28. </body>
  29. </html>
The output of this code looks like as shown below. bootsrtrap_01 This time, we're going to edit our "selectbox.php" file. Then insert the following code inside the second "<div class="well">....</div>".
  1. <form action="selectbox.php" class="form-inline pull-left" method="post">
  2. <div class="form-group col-lg-4">
  3. <?php
  4. //set up mysql connection
  5. mysql_connect("localhost", "root", "") or die(mysql_error());
  6. //select database
  7. mysql_select_db("studentdb") or die(mysql_error());
  8. // Retrieve all the data from the "tblstudent" table
  9. $result = mysql_query("SELECT * FROM tblstudent") or die(mysql_error());
  10. // store the record of the "tblstudent" table into $row
  11. ?>
  12. <select class="form-control" name="fname">
  13. <option>
  14. Select a Name
  15. </option>
  16. <?php
  17. //it fills the selectbox from mysql data
  18. while ($row = mysql_fetch_array($result)) {
  19. //this the value that corrspond to the selected item of the user
  20. echo ' <option value="' . $row['email'] . '"> ';
  21. //this line will be visible to the user
  22. echo $row['firstname'] . ' </option> ';
  23. }
  24. ?>
  25. </select>
  26. </div><button class="btn btn-primary" name="submit" type=
  27. "submit">Go</button>
  28. <!--it check here fi the submit button is set then -->
  29. <?php
  30. if (isset($_POST['submit'])) {
  31. $fname = $_POST['fname'];
  32. //it display the value based on user selected item
  33. echo '<h3>' . "Your email address is: " . $fname . '</h3>';
  34.  
  35. } else {
  36. //if submit button is not set then,
  37. //it notify the user that theres no data has been selected
  38. echo '<h3>' . "No data is Selected!" . '</h3>';
  39. }
  40.  
  41. ?>
  42. </form>
In testing the application, the output should looks like as shown below. bootstrap_select3 Make sure the file structure should look like as shown below:
  1.  
  2. bootstraptable
  3. css
  4. fonts
  5. list.php
  6. selectbox.php

Add new comment