php - Using AJAX to update multiple fields from SQL -

i'm sure there's easy answer i've looked everywhere , can't seem find answer. have dropdown box @ start of form office names being populated sql table. depending on office user selects, want other fields filled out corresponding information record. used w3schools php ajax database page guide shows how update 1 id in page , need update input field address, city, state, zip, , contact.

here's relevant code isn't working. code trigger script dropdown:

<select name="users" onchange="showoffice(this.value)" class="field select" tabindex="1" > 

the script on page:

<script> function showoffice(str) { if (str=="") { document.getelementbyid("practice_name").innerhtml=""; document.getelementbyid("contact").innerhtml=""; document.getelementbyid("address").innerhtml=""; document.getelementbyid("city").innerhtml=""; document.getelementbyid("state").innerhtml=""; document.getelementbyid("zip").innerhtml=""; return; }  if (window.xmlhttprequest) {// code ie7+, firefox, chrome, opera, safari xmlhttp=new xmlhttprequest(); } else {// code ie6, ie5 xmlhttp=new activexobject("microsoft.xmlhttp"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readystate==4 && xmlhttp.status==200) { document.getelementbyid("practice_name").innerhtml=xmlhttp.practice_name; document.getelementbyid("contact").innerhtml=xmlhttp.contact; document.getelementbyid("address").innerhtml=xmlhttp.address; document.getelementbyid("city").innerhtml=xmlhttp.city; document.getelementbyid("state").innerhtml=xmlhttp.state; document.getelementbyid("zip").innerhtml=xmlhttp.zip; } } xmlhttp.open("get","getoffice.php?q="+str,true); xmlhttp.send(); } </script> 

and getoffice.php code:

<?php $q=$_get["q"];   $host="********"; // host name  $db_username="******"; // mysql username  $db_password="******"; // mysql password   // connect server , select database. $con = mysqli_connect("$host", "$db_username", "$db_password");  if (!$con) { die('could not connect: ' . mysqli_error($con)); }  mysqli_select_db($con,"*****"); $sql="select * initial_practice id = '".$q."'";  $result = mysqli_query($con,$sql); $row=mysql_fetch_array($result); ?> var practice_name = <? echo $row['practice_name']; ?> var contact = <? echo $row['contact']; ?> var address = <? echo $row['address']; ?> var city = <? echo $row['city']; ?> var state = <? echo $row['state']; ?> var zip = <? echo $row['zip']; ?> <? mysqli_close($con); ?> 

any appreciated.

your problem aren't using response text correctly. can fixed in couple steps. ajax request pulls printed out getoffice.php.

first

we're gonna want change these lines on on-page script this:

xmlhttp.onreadystatechange=function() {     if (xmlhttp.readystate==4 && xmlhttp.status==200)     {         document.getelementbyid("practice_name").innerhtml=xmlhttp.practice_name;         document.getelementbyid("contact").innerhtml=xmlhttp.contact;         document.getelementbyid("address").innerhtml=xmlhttp.address;         document.getelementbyid("city").innerhtml=xmlhttp.city;         document.getelementbyid("state").innerhtml=xmlhttp.state;         document.getelementbyid("zip").innerhtml=xmlhttp.zip;     } } 

to bit easier (i tend separate readystate , status if statements, delusional belief can randomly fail when combined):

xmlhttp.onreadystatechange=function() {     if(xmlhttp.readystate==4)     {         if(xmlhttp.status==200)         {             eval(xmlhttp.responsetext);         }     } }; 

now we're evaluating request. also, note added semi-colon end of onreadystatechange function.

second

change following lines in getoffice.php from:

var practice_name = <? echo $row['practice_name']; ?> var contact = <? echo $row['contact']; ?> var address = <? echo $row['address']; ?> var city = <? echo $row['city']; ?> var state = <? echo $row['state']; ?> var zip = <? echo $row['zip']; ?> 

to:

document.initialpractice.practice_name.value = <?php echo $row['practice_name']; ?> document.initialpractice.contact.value = <?php echo $row['contact']; ?>; document.initialpractice.address.value = <?php echo $row['address']; ?>; document.initialpractice.city.value = <?php echo $row['city']; ?>; document.initialpractice.state.value = <?php echo $row['state']; ?>; document.initialpractice.zip.value = <?php echo $row['zip']; ?>; 

now, when response server, javascript evaluate above response appropriately , fill in fields. @ least should, providing query doesn't fail.

also, can change mysqli_fetch_array() mysqli_fetch_assoc(), since need associative array.

note: have solved problem adding eval(xmlhttp.responsetext); below readystate/status checks , removing xmlhttp. in front of innerhtml variables.