JavaScript Forum

**alhefner** · 11-19-2008, 12:44 AM

The script and partial html below is supposed to populate the options in a select list depending on the option chosen in the previous select.

The script calls a PHP script "getmodels.php" to query a database and select car models using the selected make as the search string.

Using a firefox browser, this all works perfectly but using IE the call to the PHP script does not seem to happen.

Here is the script and HTML as far as the form elements:

Code:

<html>

<head>
<title>car dealer used and pre-owned cars and trucks in Reno Nevada</title>
<script type="text/javascript">
<!--
var xmlHttp

function getModel(str)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }
var url="getmodels.php"
url=url+"?q="+str
url=url+"&sid="+Math.random()
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}

function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 {
 document.getElementById("model").innerHTML=xmlHttp.responseText
 }
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
 {
 // Firefox, Opera 8.0+, Safari
 xmlHttp=new XMLHttpRequest();
 }
catch (e)
 {
 //Internet Explorer
 try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
 catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
return xmlHttp;
}
// -->
</script>
</head>

<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
<table border="0" width="760" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td width="760" colspan="2" height="110" align="right" valign="middle" background="images/top_logo.gif"><a href="http://siteurl" target="_blank">Home</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://siteurl/contact.html" target="_blank">Contact us</a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="http://siteurl">About Us</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="images/bbb.gif" /></td>
    </tr>
    <tr>
        <td width="151" height="50" align="center" valign="middle" background="button_back.gif"><a href="#cars">See our Cars!</a></td>
        <td width="609" rowspan="6" height="283" background="images/main_1.jpg">&nbsp;</td>
    </tr>
    <tr>
        <td width="151" height="50" align="center" valign="middle" background="button_back.gif"><a href="http://siteurl/credit_app.php" target="_blank">APPLY for CREDIT</a></td>
    </tr>
    <tr>
        <td width="151" height="50" align="center" valign="middle" background="button_back.gif"><a href="http://siteurl/directions.html" target="_blank">Directions</a></td>
    </tr>
    <tr>
        <td width="151" height="50" align="center" valign="middle" background="button_back.gif"><a href="http://siteurl" target="_blank">Store Hours</a></td>
    </tr>
    <tr>
        <td width="151" height="50" align="center" valign="middle" background="button_back.gif"></td>
    </tr>
    <tr>
        <td width="151" height="33" align="center" valign="middle" background="bottom_button_back.gif">&nbsp;</td>
    </tr>
    <tr>
        <td width="760" colspan="2" height="110" bgcolor="#FDFD00">
            <p align="center"><b><font face="Arial" size="4">Welcome to Reno NV's used car specialist!  Find your next used car, truck or suv right here at Reno Nevada.</font></b>
We know you'll find what you're looking for at our quality used car dealership. Feel free to browse our inventory or search for a specific vehicle. We also offer great financing with low monthly payments.</p>
        </td>
    </tr>
    <tr>
        <td width="760" height="110" colspan="2" bgcolor="#FDFD00">
            <p align="center"><form name="search" method="post" action="search.php" target="_blank">
            <font color="#990000"><b>Search by price!</font></b>
            Min$:<input type="text" name="min" maxlength="7" />
            Max$:<input type="text" name="max" maxlength="7" />
            <input type="submit" name="Submit" value="Search" alt="Search for used cars by price range at dealersite" /></form></p>
        </td>
    </tr>
    <tr>
        <td width="760" height="110" colspan="2" bgcolor="#FDFD00">
            <p align="center"><form name="search_make" method="post" action="search_make.php" target="_blank">
            <font color="#990000"><b>Search by Make and Model!</font></b>
            <select name="make" onchange="getModel(value)">
            <option value="any">Any</option>
            <option value="BMW">BMW</option>
<option value="Chevy ">Chevy </option>
<option value="Chrysler">Chrysler</option>
<option value="Dodge">Dodge</option>
<option value="Ford">Ford</option>
<option value="GMC">GMC</option>
<option value="Honda">Honda</option>
<option value="Hyundai">Hyundai</option>
<option value="Jeep">Jeep</option>
<option value="Kia">Kia</option>
<option value="Lexus">Lexus</option>
<option value="Lincoln">Lincoln</option>
<option value="Mazda">Mazda</option>
<option value="Saturn">Saturn</option>
<option value="Toyota">Toyota</option>
<option value="VW">VW</option>
</select>
             <select id="model" name="model">
            <option id="models" value="any">Any</option>
            </select>
            <input type="submit" name="Submit" value="Search" alt="Search for used cars by price range at dealersite" /></form></p>
        </td>
    </tr>
</table>

**chrishirst** · 11-19-2008, 04:03 AM

Is IE flagging any script errors?

**alhefner** · 05:22 AM

No error alerts at all.

Maybe a little clarification on the details of what is going on.

The search form has two select lists. One for car makes and then another for car model.

When the visitor chooses a make, the "onchange" event calls the javascript function which then passes the "make" to a php script.

The php script "getmodels.php" takes the value of "make" and queries the mysql database and gets a list of models associated with the "make" and outputs the list of options for model:

Code:

            echo"<option value=\"any\">Any</option>";
            $sql = "SELECT DISTINCT `model` FROM `vehicles` WHERE `make` LIKE '$make' ORDER BY `model` ASC LIMIT 0, 30 ";
            $result=mysql_query($sql) or die(mysql_error());
            while($row = mysql_fetch_array($result)){
            $model=stripslashes($row['model']);
            ?>
            <option value="<?echo $row['model'] ?>"><? echo $row['model'] ?></option>
            <?
            }

**alhefner** · 11-20-2008, 04:26 AM

I am not sure why but, a javascript function that is supposed to rewrite a list of select options on a web page does well with firefox but won't do the job in IE7.

I have used alerts to show some of the variables that are used and they all look good. The function that performs the change on page is:

Code:

 document.getElementById("model").innerHTML=xmlHttp.responseText;

Using an alert I can see that the proper text is being returned. I just used:

Code:

 alert(xmlHttp.responseText);

this lets me see what is returned from a query to aother PHP script and the value returned looks like:

Code:

<option value="any">Any</option>
<option value="Escort">Escort</option>
<option value="Expedition">Expedition</option>

So, I know that the value being returned is ok and it does show up when using a firefox browser but in IE7 the option list just never shows up.

Can I stuff the returned value into a variable and somehow use that ? I am plain confused here and need to get this function to work.

**chrishirst** · 11-20-2008, 04:55 AM

< merged both threads>

That's shed a bit more light on the subject.

There is a long standing bug in IE (since IE5) with select elements and innerHTML and basically ....

... it doesn't work

One workaround is to create the options in a loop after you have retrieved the values. Let the server code create an array of the values and then the js can iterate through it.

Or use a placeholder div and insert the entire select element as innerHTML for the container.

**chrishirst** · 11-20-2008, 04:58 AM

here you are, the MSDN is good for some things

http://support.microsoft.com/default...b;en-us;276228

**alhefner** · 11-20-2008, 07:40 AM

Much thanks! That clears up a lot of headbanging. Ya just gotta love Microsoft.

Any way, I found that this will work on IE:

Code:

function stateChanged()
{
var browser=navigator.appName;

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete");
 {
 document.getElementById("model").outerHTML=xmlHttp.responseText
 }
}

This code works in FF:

Code:

function stateChanged()
{
var browser=navigator.appName;

if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete");
 {
 document.getElementById("model").innerHTML=xmlHttp.responseText
 }
}

As you can see the only difference is:

Code:

document.getElementById("model").innerHTML=xmlHttp.responseText

or

Code:

document.getElementById("model").outerHTML=xmlHttp.responseText

So, what should I do to switch these up depending on the browser?

**chrishirst** · 11-20-2008, 10:31 AM

do some "browser sniffing" and a

if (IE) {
do this
} else {
do the other
}