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.



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.


This time, we're going to edit our "selectbox.php" file. Then insert the following code inside the second "....

".

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.


Make sure the file structure should look like as shown below:

bootstraptable
css
fonts
list.php
selectbox.php

Download