Thursday, 29 September 2016

Dynamic Dropdown list using AngularJS with PHP



Hello friends in this tutorial we are going to discuss how to fill dropdown list box dynamically by using AngularJS framework with php programming without page refresh. For discuss this things we will define two dropdown list, in first select box we will fill country name which is get from mysql table by using AngularJS and in second dropdown list we will fill state name of first selected dropdown list country which is also get from mysql table by using Angular Javascript with php programming language. So, in this video we have filled country select box by angular javascript function, this function send request to php script and that script send back data and filled country select box, then after we want to load state name of selected country in state selectbox, so for this we have add function under country selectbox on change event so, when we have select any country, then this function is called and this function again send request to php script and it send back data and by angular javascript directive we have display state name under state select box. So, this way we have developed dynamic select box by using angular 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>Webslesson Tutorial | Dynamic Dropdown list using AngularJS in 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">Dynamic Dropdown list using AngularJS in 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