使用AJAX从SQL更新多个字段

Question

I'm sure there's an easy answer to this but I've looked everywhere and can't seem to find an answer. I have a dropdown box at the start of a form for office names being populated from an sql table. Depending on which office the user selects, I want the other fields to be filled out with the corresponding information for that record. I used the w3schools php ajax database page as a my guide but it only shows how to update one id in the page and I need to update the input field for address, city, state, zip, and contact.

Here's the relevant code which isn't working. The Code for to trigger the script for the dropdown:

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

The Script on that 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 for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for 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 then my getoffice.php code:

<?php
$q=$_GET["q"];


$host="********"; // Host name 
$db_username="******"; // Mysql username 
$db_password="******"; // Mysql password 

// Connect to server and 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 * FROM initial_practice WHERE 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 help would be greatly appreciated.

Answer 1

Finally figured it out. For any of you having the same trouble here's a fix.

php code:

$row=mysqli_fetch_assoc($result);

$name = $row['practice_name'];
$contact = $row['contact_name'];
$address = $row['address'];
$city = $row['city'];
$state = $row['state'];
$zip = $row['zip'];

echo $name."#".$contact."#".$address."#".$city."#".$state."#".$zip;

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 for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{

    if(xmlhttp.status==200)
    {
        var data = xmlhttp.responseText.split("#");
        var name = decodeURIComponent(data[0]);
        var contact = decodeURIComponent(data[1]);
        var address = decodeURIComponent(data[2]);
        var city = decodeURIComponent(data[3]);
        var state = decodeURIComponent(data[4]);
        var zip = decodeURIComponent(data[5]);
        document.initialpractice.practice_name.value = name;
        document.initialpractice.contact.value = contact;
        document.initialpractice.address.value = address;
        document.initialpractice.city.value = city;
        document.initialpractice.state.value = state;
        document.initialpractice.zip.value = zip;
    }
}
};
xmlhttp.open("GET","getoffice.php?q="+str,true);
xmlhttp.send();
}
</script>