Hello friends, in this tutorial we are going to discuss how you can dynamically populate the dropdown list using AngularJS Framework with PHP programming without page refresh. To discuss this, we define two dropdown lists. In the first selection field we enter the name of the country that was retrieved with AngularJS from the MySQL table, and in the second dropdown list the name of the country of the first country of the selected dropdown list It becomes MySQL table with angled Javascript related to PHP programming language. So in this video we filled in the country selection field with the JavaScript angle function. This function sends a request to the PHP script and this script sends the data and the full country selection field after we want to load the state name of the country selected in the status selection box, we have the function to insert in the change event in the country selection box then If we have selected a country, this function is called and this function sends a request to the PHP script again and sends data back. The JavaScript Angular directive gives us the name of the display status under the status selection field. In this way we have developed a dynamic selection box using an angled JavaScript framework with PHP programming.
Source Code
Database
--
-- Table structure for table `country`
--
CREATE TABLE IF NOT EXISTS `country` (
`country_id` int(11) NOT NULL AUTO_INCREMENT,
`country_name` varchar(255) NOT NULL,
PRIMARY KEY (`country_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;
--
-- Dumping data for table `country`
--
INSERT INTO `country` (`country_id`, `country_name`) VALUES
(1, 'United States of America'),
(2, 'Canada'),
(3, 'Australia');
-- --------------------------------------------------------
--
-- Table structure for table `state`
--
CREATE TABLE IF NOT EXISTS `state` (
`state_id` int(11) NOT NULL AUTO_INCREMENT,
`country_id` int(11) NOT NULL,
`state_name` varchar(255) NOT NULL,
PRIMARY KEY (`state_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;
--
-- Dumping data for table `state`
--
INSERT INTO `state` (`state_id`, `country_id`, `state_name`) VALUES
(1, 1, 'Alabama'),
(2, 1, 'Arizona'),
(3, 1, 'California'),
(4, 2, 'Alberta'),
(5, 2, 'Manitoba'),
(6, 2, 'Ontario'),
(7, 3, 'Queensland'),
(8, 3, 'Tasmania'),
(9, 3, 'Victoria');
index.php
<!DOCTYPE html>
<html>
<head>
<title>MyitBuddies Tutorials | How To Dynamic Dropdown list using AngularJS with PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<br /><br />
<div class="container" style="width:600px;">
<h3 align="center">How To Dynamic Dropdown list using AngularJS with PHP</h3>
<br />
<div ng-app="myapp" ng-controller="usercontroller" ng-init="loadCountry()">
<select name="country" ng-model="country" class="form-control" ng-change="loadState()">
<option value="">Select Country</option>
<option ng-repeat="country in countries" value="{{country.country_id}}">{{country.country_name}}</option>
</select>
<br />
<select name="state" ng-model="state" class="form-control">
<option value="">Select State</option>
<option ng-repeat="state in states" value="{{state.state_id}}">
{{state.state_name}}
</option>
</select>
</div>
</div>
</body>
</html>
<script>
var app = angular.module("myapp",[]);
app.controller("usercontroller", function($scope, $http){
$scope.loadCountry = function(){
$http.get("load_country.php")
.success(function(data){
$scope.countries = data;
})
}
$scope.loadState = function(){
$http.post("load_state.php", {'country_id':$scope.country})
.success(function(data){
$scope.states = data;
});
}
});
</script>
load_country.php
<?php
//load_country.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$output = array();
$query = "SELECT * FROM country ORDER BY country_name ASC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$output[] = $row;
}
echo json_encode($output);
?>
load_state.php
<?php
//load_state.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$output = array();
$data = json_decode(file_get_contents("php://input"));
$query = "SELECT * FROM state WHERE country_id='".$data->country_id."' ORDER BY state_name ASC";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$output[] = $row;
}
echo json_encode($output);
?>
0 comments:
Post a Comment
Please don't enter any spam link in the comment box.