- PHP - Updating values in drop down list upon user input
- <?php
- $conn = mysql_connect("127.0.0.1","root","")
- mysql_select_db(MyApp,$conn);
- $sql2=("SELECT App.AppName FROM App);
- $result2=mysql_query($sql2);
- echo '<select name="sublist">';
- echo '<option value=""></option>';
- while ($row2 = mysql_fetch_assoc($result2))
- {
- echo '<option value="' . $row2['AppName'] . '">' . $row2['AppName']. '</option>';
- }
- echo '</select>';
- ?>
- function getXMLObject() //XML OBJECT
- {
- var xmlHttp = false;
- try {
- xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") // For Old Microsoft Browsers
- }
- catch (e) {
- try {
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") // For Microsoft IE 6.0+
- }
- catch (e2) {
- xmlHttp = false // No Browser accepts the XMLHTTP Object then false
- }
- }
- if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
- xmlHttp = new XMLHttpRequest(); //For Mozilla, Opera Browsers
- }
- return xmlHttp; // Mandatory Statement returning the ajax object created
- }
- var xmlhttp = new getXMLObject(); //xmlhttp holds the ajax object
- function makeAjaxRequest(url, params, output, image) {
- var getdate = new Date(); //Used to prevent caching during ajax call
- if( image == 1 ){
- document.getElementById(output).innerHTML='<img src="./images/template/ajax-loader.gif"></img>';
- }
- if(xmlhttp) {
- xmlhttp.open("POST",url,true); //calling testing.php using POST method
- xmlhttp.onreadystatechange = function(){
- if (xmlhttp.readyState == 4) {
- if(xmlhttp.status == 200) {
- document.getElementById(output).innerHTML=xmlhttp.responseText; //Update the HTML Form element
- }
- else {
- // alert("Error during AJAX call. Please try again");
- }
- }
- }
- xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
- xmlhttp.send(params); //Posting txtname to PHP File
- }
- }
- function makeAjaxGetRequest(url, output, image) {
- var getdate = new Date(); //Used to prevent caching during ajax call
- if( image == 1 ){
- document.getElementById(output).innerHTML='<img src="./images/template/ajax-loader.gif"></img>';
- }
- if(xmlhttp) {
- xmlhttp.open("GET",url,true); //calling testing.php using GET method
- xmlhttp.onreadystatechange = function(){
- if (xmlhttp.readyState == 4) {
- if(xmlhttp.status == 200) {
- document.getElementById(output).innerHTML=xmlhttp.responseText; //Update the HTML Form element
- }
- else {
- // alert("Error during AJAX call. Please try again.");
- }
- }
- }
- xmlhttp.send(null); //Posting txtname to PHP File
- }
- }
- function emptyAjaxReportBox(id)
- {
- document.getElementById(id).innerHTML= '';
- }
- // your call file; what you posted above. Obviously change the names and Id's to match what you need.
- <form id="testFormId" name="testForm" action="post" >
- <select id="firstSelectId" name="firstSelect" onchange="makeAjaxRequest('url', 'firstSelect='+encodeURIComponent(document.getElementById('firstSelectId').value),'outputDivId', '0');" >
- </select>
- <div id="outputDivId" >
- <select name="secondInput">Whatever values you want to load up can go in here. They can be the default values; meaning, if select 1 value = 0, then you have have these values in select 2. Once you change select 1, this will disappear and be replaced by what your ajax returns. Therefore, for easy processing after you submit the form, you should make this select 2 the same name and id as what you use in the ajax.</div>
- </form>
- //your AJAX file needs to be a separate page than what you're currently reading. Put whatever you want in there.
- $db = connectioninfo;
- $query;
- echo 'What you put in the echo is what will show up in the outputDiv. <select></select>';