I've been stuck for awhile on trying to figure out why this code works for Firefox and not IE (version 6 or 7).
When a user selects a "Project Number" from a dropdown list generated with PHP from MySql, AJAX (in Firefox) automatically populates 2 other INPUT fields on the page: Customer and Vehicle Platform. But IE only sends an empty string (I've used ethereal to verify nothing is getting sent to the server). So my backend script (getCustVeh.php) that gets called from AJAX.js makes a call to MySql like this: select * from project_nr where project_nr = ' '
IE works fine if I change the "Project Number" field from a SELECT statement to INPUT and manually type in text for the Project Number. And IE also works if I don't make a call to MySql to populate the Project Number variable (select_project) but use <option value="DP-1050">DP-1050 </option> syntax instead.
I use templates to split the PHP/HTML code. Here is new_dr.ihtml where the Project Number variable {select_project} gets populated from new_dr.php
<tr>
<td>
Project Number:
</td>
<td>
<SELECT name="proj_nr" id="proj_nr" onFocus="promptEntry(pProjectNR)" onChange="updateCust_Veh()" >
{select_project}
</SELECT>
</td>
Partial code from new_dr.php
<script language=\"javascript\" src=\"AJAX.js\" > </script>
/////////////Project Number/////////////////
$proj_nr_arr = mysql_query ("SELECT project_nr FROM project_nr ORDER by project_nr");
if ( !isset ($project_nr) && !isset ($proj_nr) )
{
$t->set_var("picked", "selected");
$t->set_var("options", "--Choose One--");
// select_project is the variable in template new_dr.ihtml
$t->parse("select_project","select",true);
}
while($sys_arr=mysql_fetch_array($proj_nr_arr))
{
$system=$sys_arr["project_nr"]; // project_nr is field from project_nr table
$names = "$system";
$t->set_var("options", $names);
if ( $names == $project || $names == $proj_nr )
{
$t->set_var("picked", "selected");
} else
{
$t->set_var("picked", $null);
}
$t->parse("select_project","select",true); // populate the template
}
//////////////////////////////////////////////////////////////
The function updateCust_Veh is in AJAX.js (From Zipcode example at: www.webpasties.com/xmlHttpRequest/)
/////////////////// START of AJAX.js //////////////
function handleHttpResponse() { // Response back from getCustVeh.php
if (http.readyState == 4) {
// Split the comma delimited response into an array
results = http.responseText.split(","); // Results from getCustVeh.php
//document.write(results); // Prints OK in Firefox - kmk
document.getElementById('customer').value = results[0];
document.getElementById('veh_platform').value = results[1];
}
}
function updateCust_Veh() {
var url = "getCustVeh.php?param="; // The server-side script for AJAX call
var SendValue = document.getElementById("proj_nr").value; // PROBLEM for IE. Not passing data into function - kmk
//document.write(SendValue); // PROBLEM AREA - prints OK in Firefox. IE is not sending Anything - kmk
http.open("GET", url + escape(SendValue), true);
http.onreadystatechange = handleHttpResponse;
http.send(null);
}
function getHTTPObject() {
var xmlhttp;
/@cc_on
@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
alert("Your browser is IE-0"); // Triggers OK in IE 7 - kmk
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
alert("Your browser is IE-1");
} catch (E) {
xmlhttp = false;
}
}
@else
xmlhttp = false;
@end @/
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
alert("Your browser is Firefox Based");
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject(); // We create the HTTP Object
/// END of AJAX.js /////
Is this doable or should I look at a different method?
Thanks for any/all pointers.
