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:

Contents

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 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.


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

Create Dropdown (index.php):


query($qry);

$fetchAllData = $rs->fetch_all(MYSQLI_ASSOC);
?>

	Select person

Add processing and person info div:

jQuery Ajax Code (index.php):

PHP Ajax Response (ajax.php):


query($qry);

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

	$dynamicMakeTbl = '';

	$dynamicMakeTbl .= '';
	$dynamicMakeTbl .= '';
	$dynamicMakeTbl .= '';
	$dynamicMakeTbl .= '';
	$dynamicMakeTbl .= '';
	$dynamicMakeTbl .= '';
	$dynamicMakeTbl .= '';
	$dynamicMakeTbl .= '';


	foreach($fetchAllData as $personInformation)
	{
		$dynamicMakeTbl .= '';
		$dynamicMakeTbl .= '';
		$dynamicMakeTbl .= '';
		$dynamicMakeTbl .= '';
		$dynamicMakeTbl .= '';
		$dynamicMakeTbl .= '';
		$dynamicMakeTbl .= '';
		$dynamicMakeTbl .= '';	
	}

	$dynamicMakeTbl .= 'Good Name Sir Name Email Mobile City Country
'.$personInformation['good_name'].' '.$personInformation['sir_name'].' '.$personInformation['email'].' '.$personInformation['mobile'].' '.$personInformation['city'].' '.$personInformation['country'].'';

	echo $dynamicMakeTbl;

	$rs->close();

	$dbConn->close();

		
}
?>

Good Name	Sir Name	Email	Mobile	City	Country
'.$personInformation['good_name'].'	'.$personInformation['sir_name'].'	'.$personInformation['email'].'	'.$personInformation['mobile'].'	'.$personInformation['city'].'	'.$personInformation['country'].'

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.

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.

Leave a Comment Cancel reply

Unraveling the Power of Anchor Text: A Comprehensive Guide

8 Reasons Why Paper Courier Bags Are Preferred Over Plastic

Boost Your WordPress Presence: The Top 5 Social Media Feed Plugins for 2024

How to Recover From Writer’s Block in 2024

Generate Random IMEI Numbers in Java | Code Example

Resolving Common Select2 Issues