PHP/Javascript/AJAX problem. Going NUTS!

I'll admit right up front that I know just enough about development to be dangerous, so my code is pretty ugly. I have a lot of debug stuff in it so that I can try to figure out what the heck is going on. I really do appreciate any help someone might be able to provide.

I'm helping my sister develop a new web site for a local tire company and they want a tire finder. I've loaded the database (just a simple flat file into a single table since they want regular updates that are exported from their POS system) with sample data.

I need to do a lookup by year, then make, then model, then submodel, automatically populating each drop down as I go. I've gotten as far as the model, but when I make a change to that dropdown, I'm getting a "can't find variable" error (Safari error console). IE (7 & 8) just show a script error.

If you want to see this, visit http://67.222.39.153/scripts/state_dropdown.php

It's so named because I found sample code to start with and simply(!) modified it.

There are two files that make this thing up: state.php and state_dropdown.php. I've listed both below: I've also zipped them up so they're easier to download and read: visit: http://kostdev.com/darnscripts.zip to download.

state.php:

<?php
//set IE read from page only not read from cache
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
header ("Cache-Control: no-cache, must-revalidate");
header ("Pragma: no-cache");

header("content-type: application/x-javascript; charset=tis-620");

$data = $_GET['data'];
$val = $_GET['val'];
$val2 = $_GET['val2'];
$val3 = $_GET['val3'];

echo "<BR>PAGE OPEN VAL1 = " . $val . "<BR>";
echo "<BR>PAGE OPEN VAL2 = " . $val2 . "<BR>";
echo "<BR>PAGE OPEN VAL3 = " . $val3 . "<BR>";


//set database
$dbhost = "localhost";
$dbuser = "kostdevc_lookup";
$dbpass = "*****"; // user account has *select* rights only
$dbname = "kostdevc_ktdb";

mysql_pconnect($dbhost,$dbuser,$dbpass) or die ("Unable to connect to MySQL server");

if ($data=='states')
{ // first dropdown
echo "<select name='states' onChange=\"dochange('cities', this.value)\">\n";
echo "<option value='0'>==== choose year ====</option>\n";
$result=mysql_db_query($dbname,"SELECT DISTINCT cyear FROM vehicles ORDER BY cyear DESC");
while(list($id)=mysql_fetch_array($result))
{
echo "<option value=\"$id\" >$id</option> \n" ;
}
}
else if ($data=='cities')
{ // second dropdown
echo "<br>$val <-- val" ;
echo "<br>$val2 <-- val2 <br>" ;
echo "<select name='cities' onChange=\"dochangemodel('models', this.value, $val)\">\n";
echo "<option value='0'>====choose make ====</option>\n";
$result=mysql_db_query($dbname,"SELECT DISTINCT make FROM vehicles WHERE cyear = '$val' ORDER BY make");
while(list($id)=mysql_fetch_array($result))
{
echo "<option value=\"$id\" >$id</option> \n" ;
}
}
else if ($data=='models')
{ // third dropdown
echo "<select name='models' onChange=\"dochangesubmodel('submodel', this.value, $val)\">\n";
// echo "<select name='models' onChange=\"dochangesubmodel('submodel', this.value, $val, $val2)\">\n";
echo "<option value='0'>====choose model ====</option>\n";
$result=mysql_db_query($dbname,"SELECT DISTINCT model FROM vehicles WHERE cyear = '$val2' AND make = '$val' ORDER BY model");

while(list($id)=mysql_fetch_array($result))
{
echo "<option value=\"$id\" >$id</option> \n" ;
}
}
else if ($data=='submodel')
{ // second dropdown
echo "<br>$val <-- val" ;
echo "<br>$val2 <-- val2 <br>" ;
echo "<select name='submodel' onChange=\"docwrite()\">\n";
echo "<option value='0'>====choose make ====</option>\n";
$result=mysql_db_query($dbname,"SELECT DISTINCT make FROM vehicles WHERE cyear = '$val' ORDER BY make");
while(list($id)=mysql_fetch_array($result))
{
echo "<option value=\"$id\" >$id</option> \n" ;
}
}
echo "</select>\n";
?>


------------- END OF STATE.PHP


------------- STATE_DROPDOWN.PHP

<br>
This is sample Ajax DropDown Menu When you select state in first dropdown menu<br>
the second dropdown menu will change automatic and display cites in the state selection

<br><br>
<?

echo "<form name=sel>\n";
echo "Year : <font id=states><select>\n";
echo "<option value='0'>============</option> \n" ;
echo "</select></font>\n";

echo "Make : <font id=cities><select>\n";
echo "<option value='0'>=== none ===</option> \n" ;
echo "</select></font>\n";

echo "Model : <font id=models><select>\n";
echo "<option value='0'>=== none ===</option> \n" ;
echo "</select></font>\n";

echo "Submodel : <font id=submodel><select>\n";
echo "<option value='0'>=== none ===</option> \n" ;
echo "</select></font>\n";
?>

<script language=Javascript>
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {} //IE
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
try { return new XMLHttpRequest(); } catch(e) {} //Native Javascript
alert("XMLHttpRequest not supported");
return null;
};

function dochange(src, val) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "state.php?data="+src+"&val="+val); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}

function dochangemodel(src, val, val2) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "state.php?data="+src+"&val="+val+"&val2="+val2); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}

function dochangesubmodel(src, val, val2) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "state.php?data="+src+"&val="+val+"&val2="+val2); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
}

function docwrite() {
document.writenln("<br>HERE!<br>");
}

/*
function dochangesubmodel(src, val, val2, val3) {
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
document.getElementById(src).innerHTML=req.responseText; //retuen value
}
}
};
req.open("GET", "state.php?data="+src+"&val="+val+"&val2="+val2+"&val3="+val3); //make connection
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
req.send(null); //send value
} */
window.onLoad=dochange('states', -1); // value in first dropdown
</script>

------------- END OF STATE_DROPDOWN.PHP

I sincerely appreciate the help.

Scott

http://www.codingforums.com/showthread.php?t=68462

Do follow the advice in the link provided by Fumigator. The code is mangled enough even without proper formatting.

Firefox with Firebug reports, for example, "Eagle not defined". Replace Eagle with whatever the last selected Make is (at least that's what I think you're calling it). I can't figure anything else out.

Something to consider: if that's you're real database username and password, change it quickly.

I removed the password and used the PHP tags as suggested. That user account is temporary and only has rights to select from the db which has only sample data right now.

Also, what you're seeing is the symptom. As soon as I select a model (after selecting the year and make), I get "can't find variable xxxxx" where "xxxxx" is the vehicle MAKE. Try selecting different ones and you'll see this behavior.

Really bugging me!

Scott

Alright, I looked a little more. I think my eyes are bleeding now.

I copied and pasted these two files to my server and commented out these lines in state.php (and their cousins under the other 3 or 4 blocks):
$result=mysql_db_query($dbname,"SELECT DISTINCT make FROM vehicles WHERE cyear = '$val' ORDER BY make");
while(list($id)=mysql_fetch_array($result))
I replaced them with this in each location:
for ( $id = 5; $id<10; $id++ )

What that did, if it's not obvious, is to disable the db lines in each block and replace them with a loop for creating generic select options. After also changing that ending document.writeln to document.write so I could get some output, this works.

My guess as to the source of the problem is the while (list($id)) part. I'll leave it as an exercise to the reader to figure it out. Maybe there are zero rows returned from the query, or something.

One odd thing I noticed:

header("content-type: application/x-javascript; charset=tis-620");

You tell the browser that the data contained within is JavaScript code. (I'm not sure whether that is the correct content-type. But anyway)

But then it starts to echo HTML.

echo "<BR>PAGE OPEN VAL1 = " . $val . "<BR>";

While HTML can contain JavaScript in the proper tags, it is not the same.

EDIT: I realize this echo is a debug statement. But there is more HTML being echoed (such as the <select>s)