Drop down list with OnChange event and passing data to back end script

Select One option and onChange event will pass the data to back end PHP script and receive the data to display the same.


Here the options are collected from a back end PHP scripts by taking data from MySQL database.
DEMO: Options from MySQL database table
After populating the drop down list box with options , we can trigger the onChange event and send the selected option value to another back end PHP script and receive the returnd output form the PHP page.
<div ng-app="my_app" ng-controller="my_ctrl">
<select ng-model="students" ng-options="x.name for x in details" ng-change="onChange()" >
</select>
</div>
<br><br>
<div class='alert alert-primary' role='alert' id=d1>After selection details will appear here</div>


<script>
var app = angular.module('my_app', []);
app.controller('my_ctrl', function($scope, $http) {
  $http.get("student-data.php") // data source for options 
  .then(function (response) {$scope.details = response.data.student_data;});
 $scope.onChange = function()
{
 var id=$scope.students.id;
 var name=$scope.students.name;
  $http.get("form-select-data.php?id="+id+"&name="+name) // data posted  
  .then(function (response) {var str = response.data;
  document.getElementById('d1').innerHTML=str
  });
}  
});
</script>
We are posting our selected option values to back end PHP script form-select-data.php, here is the code of this file.
<?Php
$id=$_GET['id'];     // Collecting id value 
$name=$_GET['name']; // Collecting name value
echo "Welcome <b>$name</b> , your id is : <b>$id</b>";
?>
Dropdown List Box
DEMO: Options using JSON format DEMO: Options from MySQL database Displaying records from MySQL database table

Post your comments , suggestion , error , requirements etc here

We use cookies to improve your browsing experience. . Learn more
HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
©2000-2021 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer