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.
After selection details will appear here
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>";
?>