Populate Dropdown Using jQuery From Database
Last Updated : Mar 11, 2024
IN - jQuery PHP MySQL | Written & Updated By - Anjali
In this article we will show you the solution of populate dropdown using jQuery from database, here first we needs to select database table and executes database connection then using get method we connecting external php file.
There we fetching particular column details and needs to print values with option tag then we appends on select element in html document for populate dropdown with fetched values.
Step By Step Guide On Populate Dropdown Using jQuery From Database :-
For interact with database we created conn.php file there we executed database connection by mysqli_connect() method and it’s referred by variable ‘$conn’.
In index.php file we included conn.php file for once and using ajax get method we connecting external php file for collects data from database table.
In get.php file we included database connection file and selecting data from table ‘info’ then printed on option element. At html block we appended result on select element.
Conn.php
<?php
$localhost = "localhost"; #localhost
$dbusername = "root"; #username of phpmyadmin
$dbpassword = ""; #password of phpmyadmin
$dbname = "dbase"; #database name
#connection string
$conn = mysqli_connect($localhost,$dbusername,$dbpassword,$dbname);
if($conn){
echo "Database connected successfully";
}
else{
echo "Error";
}
?>
Index.php
<?php
include "conn.php";
?>
<!DOCTYPE html>
<html>
<head>
<title>Populate dropdown using jquery from database</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
type: 'GET',
url: 'get.php',
async: false,
success:function(response){
$("#sel").append(response);
}
})
});
</script>
</head>
<body>
<br><br>
<div>Users
<select id="sel">
<option value="0">- Select -</option>
</select>
</div>
</body>
</html>
Get.php
<?php
include "conn.php";
$sql = "SELECT * FROM info";
$result = mysqli_query($conn,$sql);
$row = mysqli_fetch_row($result);
while($r=mysqli_fetch_array($result)){
echo "<option value='$r[0]'>$r[1]</option>";
}
?>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- External conn.php file created for executes database connection. This will mostly usable code on other pages so we created separately and included once at top of document for reusable purpose.
- In index.php file we defined select element with id ‘sel’, default option set to ‘- Select -’ value then at script block we defined ajax get method for collects result from external ‘get.php’ file and retrieved data appended on select element by specifying id ‘sel’ with append method which will have return data of result.
- In external get.php file we selecting all column details from table ‘info’ with database connection variable ‘$conn’ then which is added on ‘mysqli_query()’ method.
- It returns overall details which is stored on variable ‘$result’, using ‘mysqli_fetch_row()’ method we collecting table details row by row that is referred by variable ‘$row’.
- Then we added on while loop for iterates all row from table ‘info’ which is referred by variable ‘$r’ and we appending row’s ‘0th column’ values on option’s value attribute, row’s 1st column values appended between option tags.
- Finally those options are appended on html block’s select element so we successfully appended database details on dropdown.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to use each method with json array in jquery.
Before execution of program we needs to confirm server connection and internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see database connection successful message and fetched results shown on dropdown options.
I hope this article on populate dropdown using jQuery from database helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
