php - Dynamic dropdown list -
- subjects
- course
- chapters
i want add 2 dynamic dropdown lists, 1 subjects, , 1 course. when select subject, courses added subject should loaded in course dropdown list, , add chapters courses.
how do that?
any appreciated.
here code:
<div class="content-form-inner"> <div id="page-heading">enter details</div> <div class="form_loader" id="thisformloader"></div> <div id="error_message"></div> <form name="thisform" id="thisform" action="editchapters.php?mode=<?php echo $_request['mode']; ?>&id=<?php echo $id; ?>" method="post" enctype="multipart/form-data"> <table border="0" cellpadding="0" cellspacing="0" id="id-form" > <tr> <th valign="top" style="width:0%"><span class="required">*</span>subject</th> <td style="width: 0%"> <select name="subject_name" class="select-form required " style="color:#000 !important;width:200px !important"> <option value="">select</option> <?php $sql = "select * mock_subject "; $res = mysqli_query($dbhandle,$sql); $numrows =mysqli_num_rows($res); echo mysql_error(); if($numrows){ while($obj = mysqli_fetch_object($res)){ if($obj->status == 1){ if($subject == $obj->id){ echo '<option value="'.$obj->id.'" selected>'.($obj->subject_name).'</option>'; } else{ echo '<option value="'.$obj->id.'">'.($obj->subject_name).'</option>'; } } } } ?> </select> </td> <td style="width: 0%;"> <div id="subject_id-error" class="error-inner"></div> </td> <td></td> </tr> <tr> <th valign="top" style="width:0%"><span class="required">*</span>course</th> <td style="width: 0%"> <select name="course_name" class="select-form required " style="color:#000 !important;width:200px !important"> <option value="">select</option> <?php $sql = "select * mock_course "; $res = mysqli_query($dbhandle,$sql); $numrows =mysqli_num_rows($res); echo mysql_error(); if($numrows){ while($obj = mysqli_fetch_object($res)){ if($obj->status == 1){ if($course == $obj->id){ echo '<option value="'.$obj->id.'" selected>'.($obj->course_name).'</option>'; } else{ echo '<option value="'.$obj->id.'">'.($obj->course_name).'</option>'; } } } } ?> </select> </td> <td style="width: 0%;"> <div id="course_id-error" class="error-inner"></div> </td> <td></td> </tr> <tr> <th><span class="required">*</span>chapter</th> <td><input type="text" name="chapter_name" class="inp-form required" value="<?php echo $chapter;?>" style="color:#000 !important;"></td> <td> <div></div> </td> </tr> <tr> <th> </th> <td valign="top"><input type="submit" name="submit_button" value="<?php echo $mode=="edit"? "update" : "add" ?>" class="form-submit" /> <input type="reset" value="reset" class="form-reset" /> </tr> </table> </form> <div class="clear"></div> </div>
one possible solution would, if data set comparatively small. load data on page load, , use jquery value of dropdown, , based on formulate values other drop downs. second solution ajax , call data database every action. , print using angular. i've attached sample code that. my_script.js
var app = angular.module('myapp', []); app.controller('customersctrl', function($scope, $http) { $(document).ready(function(){ callsettimeout(); }); function callsettimeout(){ settimeout(function(){ update(); callsettimeout(); },200); } function update(){ $http.get("http://localhost/whatsonyourmind/db.php") .success(function (response) {$scope.names = response.records;}); } }); this db.php
<?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "mind"; // create connection $conn = new mysqli($servername, $username, $password, $dbname); // check connection if ($conn->connect_error) { die("connection failed: " . $conn->connect_error); } $sql = "select * data"; $result = $conn->query($sql); $jsonstring=array(); if ($result->num_rows > 0) { // output data of each row while($row = $result->fetch_assoc()) { array_push($jsonstring,array('id' =>$row['id'],'name' =>$row['name'],'message' =>$row['message'])); } echo json_encode(array("records"=>$jsonstring)); } else { echo "0 results"; } $conn->close(); ?> this index.html
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title>whats on mind</title> <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> </head> <body> <ul id="ajax"></ul> <div ng-app="myapp" ng-controller="customersctrl"> <ol> <li ng-repeat="x in names"> {{ 'id:'+x.id + ' name:' + x.name +' message:'+x.message}} </li> </ol> </div> <script src="my_script.js"></script> </body> </html>
Comments
Post a Comment