jquery ajax dropdown onchange example in php MySQL Database

In this article we will display jquery ajax dropdown onchange fetch the data from the database example in php. With the help of jQuery, Ajax, PHP and MYSQL step by step example I am going to complete this.

I Learn to dropdown onchange event is very confusing for new web developers. But don’t worry, if you will follow this post, you will Learn to how to do that.

Jquery Ajax Dropdown (onchange) Example in PHP:

First of all I will get a all the person list as well as sir name using jquery ajax and php to fetch data from a mysql database and display them in a dynamic dropdown list. When user will select any person then selected person information will appear below.

jQuery Get Dropdownlist Selected Value Onchange Event
jQuery Get Dropdownlist Selected Value Onchange Event

Jquery Ajax Dropdown (onchange) Example in PHP

To create a dynamic select option menu using jQuery Ajax and PHP it takes only three steps:-

  • Create a PHP file and define markup as well script for select option menu
  • Create a CSS file and define styling for select option menu
  • Connect to the database and Send data

Create Database:

create database demo;

Create Mysql Table:

	CREATE TABLE `persons` (
	`id` INT(11) NOT NULL AUTO_INCREMENT,
	`good_name` VARCHAR(255) NULL DEFAULT NULL,
	`sir_name` VARCHAR(255) NULL DEFAULT NULL,
	`address` VARCHAR(255) NULL DEFAULT NULL,
	`email` VARCHAR(255) NULL DEFAULT NULL,
	`mobile` VARCHAR(255) NULL DEFAULT NULL,
	`country` VARCHAR(255) NULL DEFAULT NULL,
	`city` VARCHAR(255) NULL DEFAULT NULL,
	PRIMARY KEY (`id`)
)
COLLATE='latin1_swedish_ci'
ENGINE=InnoDB
AUTO_INCREMENT=1
;

Insert Records In Mysql Table:

INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(1, 'Radhika', 'dipika', '5478 Larson Meadow\nCasandraville, VT 73844-0293', '[email protected]', '999999999', 'Surat', 'sumra dwrka');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(2, 'Sejal', 'Khtrani', '41415 Stehr Course Apt. 958\nSouth Berthafort, AK 47740', '[email protected]', '5869856569', 'Isle of Man', 'Jammnagar dhrol');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(3, 'Nikita', 'Sojitra', '458 Kautzer Mountain\nAronstad, FL 34152', '[email protected]', '1-528-589-0695', 'Belize', 'Katrineberg');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(4, 'Aksay', 'dave', '8745 Dietrich Unions Ganesh 178\nNorth Fatimamouth, AL 54635-8353', '[email protected]', '1-380-388-6370 x8648', 'Guam', 'Collierville');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(5, 'Dhaval', 'Menu', '19435 Cicero Well\nWest Jarrell, MA 51035-4794', '[email protected]', '1-995-393-1347 x986', 'Bouvet Island (Bouvetoya)', 'New Eliseohaven');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(6, 'Vishal', 'Pandya', '548 Roob Fall Ganesh 950\nEast Jaida, ME 49692-0730', '[email protected]', '836.979.1645 x343', 'India', 'Boyerhaven');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(7, 'Jaydeep', 'Ampipra', '29651 Moen Shores Apt. 710\nWest Ninabury, AL 37371-4514', '[email protected]', '937-421-6387 x182', 'Netherlands Antilles', 'Lake Lorinemouth');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(8, 'Bharat', 'Sakhiya', '98562 Cathy Stravenue\nWalshfort, IA 12348-3147', '[email protected]', '(802) 955-6535 x78249', 'Peru', 'Albinaborough');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(9, 'Vishal', 'Sakhiya', '324 Izaiah Courts\nShyannville, MN 58488', '[email protected]', '+1.425.306.7890', 'UK', 'East Helmer');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(10, 'Vijay', 'Bhanderi', '4859 Sjdus Rajkot Ganesh 518\nKleinton, OR 86307', '[email protected]', '(412) 934-6791', 'Georgia', 'Adahview');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(11, 'Rakesh', 'Chovatiya', '4345 Mijosr Mountains Ganesh 107\nEast Lavonne, PA 92446', '[email protected]', '1-710-786-9448', 'Monaco', 'Eugeniahaven');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(12, 'Paras', 'Dhudhagra', '51854 dishu Mission Apt. 834\nNew Adolfotown, HI 18148', '[email protected]', '(280) 692-7491', 'Bulgaria', 'New Wilhelmineville');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(13, 'Hiren', 'Mugra', '816 Welch plok Ganesh 770\nLuciusshire, MS 42451-5941', '[email protected]', '937.706.9143', 'Comoros', 'Uptonton');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(14, 'Chandni', 'Joshi', '16318 Bonita sco Apt. 709\nAthenaport, IL 26511', '[email protected]', '+1-294-375-1907', 'Vanuatu', 'Zulaufborough');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(15, 'Triguna', 'Barsiya', '10151 Om nagar Shore Apt. 033\nMarjoriemouth, KY 22030-1574', '[email protected]', '1-391-670-3346 x25463', 'Cayman Rajkot', 'Lake Flavio');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(16, 'Hitesh', 'Dhameliya', '1414 Reinger Rest Apt. 707\nSouth Kayachester, AR 39004-3831', '[email protected]', '+1.963.935.0710', 'Turks and Caicos Rajkot', 'North Adam');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(17, 'Myur', 'karsariya', '4231 Minnie jalpa\nMedhurstburgh, KJ 70923-2667', '[email protected]', '896.479.9846 x3199', 'Heard Island and McDonald Rajkot', 'New Yesseniaburgh');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(18, 'Ekta', 'Kapoor', '853 Albina jika\nAsamouth, NM 27737-1890', '[email protected]', '528.595.8020', 'Myanmar', 'Murazikfort');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(19, 'Modji', 'kichadi', '80539 Barrows Stream Apt. 651\nNorth Joshuahaven, CO 01023-3558', '[email protected]', '(658) 878-7250 x92671', 'Dimks (Diu) Rajkot', 'Porbandar');
INSERT INTO `persons` (`id`, `good_name`, `sir_name`, `address`, `email`, `mobile`, `country`, `city`) VALUES
	(20, 'Lils', 'Hunjijhsj', '3383 Andrew Lights\nSouth Lilianechester, DC 59528-5129', '[email protected]', '217.941.6891 x200', 'ahemdabad', 'paldi');

Create Database Connection (config.php):

Connect to the database and Send data, We shall be using mysqli oop for database.

<?php

$host = "localhost";
$dbUser = "root";
$password = "";
$database = "pakainfo_visitors";

$dbConn = new mysqli($host,$dbUser,$password,$database);

if($dbConn->connect_error)
{
	die("Sorry, Database Connection Error, Error No.: ".$dbConn->connect_errno." | ".$dbConn->connect_error);
}
?>

Create Dropdown (index.php):

<?php 
require_once('config.php');

$qry = "select id, good_name, sir_name from persons";

$rs = $dbConn->query($qry);

$fetchAllData = $rs->fetch_all(MYSQLI_ASSOC);
?>
<div>
	<label>Select person</label>
	<select id="person-list">
		<option value="0"> ----</option>
		<?php
		foreach($fetchAllData as $personInformation)
		{
			$personID = $personInformation['id'];
			$createFullName = $personInformation['good_name']." ".$personInformation['sir_name'];
			echo '<option value = "'.$personID.'">'.$createFullName.'</option>';
		} 
		?>
	</select>		
</div>

Add processing and person info div:

	<img src="img/ajax-processing.gif" id="processing">
	<div id="person-data"></div>

jQuery Ajax Code (index.php):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
	$(document).ready(function(){
		
		$("#person-list").change(function(){
				
				$("#processing").show();
				
				var getUserID = $(this).val();
				
				if(getUserID != '0')
				{
					$.ajax({
						type: 'GET',
						url: 'ajax.php',
						data: {person_id:getUserID},
						success: function(data){
							$("#processing").hide();
							$("#person-data").html(data);
						}
					});
				}
				else
				{
					$("#person-data").html('');
					$("#processing").hide();
				}
		});
		
	});
</script>

PHP Ajax Response (ajax.php):

<?php 
require_once('config.php');

if(isset($_GET['person_id']) && is_numeric($_GET['person_id']))
{
	$userID = intval($_GET['person_id']);
	
	$qry = "select good_name, sir_name, email, mobile, city, country from persons where id = ".$userID;

	$rs = $dbConn->query($qry);

	$fetchAllData = $rs->fetch_ALL(MYSQLI_ASSOC);

	$dynamicMakeTbl = '<table>';

	$dynamicMakeTbl .= '<tr>';
	$dynamicMakeTbl .= '<th>Good Name</th>';
	$dynamicMakeTbl .= '<th>Sir Name</th>';
	$dynamicMakeTbl .= '<th>Email</th>';
	$dynamicMakeTbl .= '<th>Mobile</th>';
	$dynamicMakeTbl .= '<th>City</th>';
	$dynamicMakeTbl .= '<th>Country</th>';
	$dynamicMakeTbl .= '</tr>';


	foreach($fetchAllData as $personInformation)
	{
		$dynamicMakeTbl .= '<tr>';
		$dynamicMakeTbl .= '<td>'.$personInformation['good_name'].'</td>';
		$dynamicMakeTbl .= '<td>'.$personInformation['sir_name'].'</td>';
		$dynamicMakeTbl .= '<td>'.$personInformation['email'].'</td>';
		$dynamicMakeTbl .= '<td>'.$personInformation['mobile'].'</td>';
		$dynamicMakeTbl .= '<td>'.$personInformation['city'].'</td>';
		$dynamicMakeTbl .= '<td>'.$personInformation['country'].'</td>';
		$dynamicMakeTbl .= '</tr>';	
	}

	$dynamicMakeTbl .= '</table>';

	echo $dynamicMakeTbl;

	$rs->close();

	$dbConn->close();

		
}
?>

CSS: Part

body{
	font-family:verdana;
	font-size:14px;
	background:#d6c173;
}

.container{
	width:1120px;
	margin:0 auto;
	border:1px solid #eeeeee;
	background:#ffffff;
	padding:10px;
}

h1{
	text-align:center;
	color:#c04e22;
	
}
table{
	border:1px solid #eeeeee;
	border-collapse: collapse;
	width:100%;
}

table th{
	border:1px solid #eeeeee;
	text-align:center;
	color:#c04e22;
	height:40px;
}
table td{
	border:1px solid #eeeeee;
	padding:5px;
	
}

#processing{
	display:none;
	margin-top:10px;
}

#person-data{
	margin-top:10px;
}

#person-list{
	height:30px;
	width:250px;
}

Thats all, this is jquery ajax dropdown onchange example in php.You can customize this full source code further as per your requirement. And please feel free to give messages or send email on this Article.

Read Also:  PHP Laravel 6 SweetAlert jQuery Ajax Delete Rows Example
Web Programming Tutorials Example with Demo

Read :

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about jquery ajax dropdown onchange example in php.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.

Read Also:  sql multiple joins

Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  PHP Laravel Check if Array is empty
  2. Read Also:  PHP Include and Require commands
  3. Read Also:  How to get selected value of dropdown in JavaScript/jQuery on change?
  4. Read Also:  PHP warning: invalid argument supplied for foreach()
  5. Read Also:  jQuery Ajax GET & POST REQUEST Methods PHP MySQLi
  6. Read Also:  PHP Image Upload and Crop in jQuery Example
  7. Read Also:  how to retrieve data from database and display it in textboxes using javascript?
  8. Read Also:  multiple drop down list in php using ajax
  9. Read Also:  PHP Stripe API ACH Payments using stripe.js
  10. Read Also:  How to display cross domain json data using Jquery
CLOSEX