AJAX

Problem with PhP MySql Ajax dropdown script

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jul 2009

Posts: 2

Reputation: StefaRSA is an unknown quantity at this point

Solved Threads: 0

StefaRSA

Offline

Newbie Poster

Problem with PhP MySql Ajax dropdown script

Jul 2nd, 2009

HI, I am using Roshan's Ajax dropdown code for my two ajax dropdown menus.

All is working fine, but when I want to use $_POST in the submitted form with FireFox, its not working...??? Its working fine in IE.

Can anybody please help me with this problem?

The Form where the dropdown is:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<!-- Province goes here -->
<tr>
   <td>-</td><td>-</td><td>-</td><td>-</td><td>Province</td><td>
  <select name="province" onChange="getCity('../dir/townsrc.php?province='+this.value)">
  <option value="">Select Province</option>
  <option value="1">KwaZulu-Natal</option>
  <option value="2">Western Cape</option>
  <option value="3">Eastern Cape</option>
  <option value="4">Free State</option>
  <option value="5">Gauteng</option>
  <option value="6">Limpopo</option>
  <option value="7">Mpumalanga</option>
  <option value="8">North West</option>
  <option value="9">Northern Cape</option>
  </select>
</td>
</tr>
<!-- Province ends here -->
<!-- Town goes here -->
<tr>
   <td>-</td><td>-</td><td>-</td><td>-</td><td>Town</td><td>
  <div id="citydiv"><select name="city">
 <option>Select Town</option>
     </select>
 </div>
 
  </td>
</tr>
<!-- Town ends here -->
<!-- Province goes here -->
<tr>
   <td>-</td><td>-</td><td>-</td><td>-</td><td>Province</td><td>
  <select name="province" onChange="getCity('../dir/townsrc.php?province='+this.value)">
  <option value="">Select Province</option>
  <option value="1">KwaZulu-Natal</option>
  <option value="2">Western Cape</option>
  <option value="3">Eastern Cape</option>
  <option value="4">Free State</option>
  <option value="5">Gauteng</option>
  <option value="6">Limpopo</option>
  <option value="7">Mpumalanga</option>
  <option value="8">North West</option>
  <option value="9">Northern Cape</option>
  </select>
</td>
</tr>
<!-- Province ends here -->
<!-- Town goes here -->
<tr>
   <td>-</td><td>-</td><td>-</td><td>-</td><td>Town</td><td>
  <div id="citydiv"><select name="city">
 <option>Select Town</option>
     </select>
 </div>

  </td>
</tr>
<!-- Town ends here -->

The townsrc.php:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<? $country=intval($_GET['province']);
 
$query=("SELECT * FROM search_town
WHERE provId=$country
ORDER BY townLabel ASC");
$result=mysql_query($query);
 
?>
<select name="city">
<option>Select Town</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['townLabel']?></option>
<? } ?>
</select>
<? $country=intval($_GET['province']);

$query=("SELECT * FROM search_town
WHERE provId=$country
ORDER BY townLabel ASC");
$result=mysql_query($query);

?>
<select name="city">
<option>Select Town</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['townLabel']?></option>
<? } ?>
</select>

The submit for:

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
$province = trim($_POST['province']);
$city = trim($_POST['city']);
$province = trim($_POST['province']);
$city = trim($_POST['city']);

In IE $province and $city gets posted
In FF only $province gets posted

Can it maybe something got to do with the <div>????

•

Join Date: Aug 2008

Posts: 954

Reputation: essential will become famous soon enough

Solved Threads: 131

essential

Offline

Posting Shark

Re: Problem with PhP MySql Ajax dropdown script

Jul 5th, 2009

Try to run this document inside your server w/o adding or changing anything:

Help with Code Tags

(Toggle Plain Text)

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */
td { text-align : center; }
/* ]]> */
</style> 
<script id="javascript1.5" type="text/javascript">
// <![CDATA[

var getCity = function( method, qstr ) { 
   var sel = (( document.getElementsByTagName ) ? document.getElementsByTagName("select") : document.all.tags("select"));
   sel1 = sel[ (( typeof this.id !== "undefined" ) ? this.id : qstr ) ];
   qstr = sel1.options[ sel1.selectedIndex ].value;
   sel2 = sel[ "city" ].options[ sel[ "city" ].selectedIndex ].value;
   
   url = (( method === "GET" ) ? "../dir/townsrc.php?province=" + qstr + "&amp;city=" + sel2 : "../dir/townsrc.php" );
   try {
      if ( "XMLHttpRequest" in window ) {
      xmlHttp = new XMLHttpRequest(); 
      } else if ( "ActiveXObject" in window ) {
      var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
         try {
            for ( var i = 0; i < client.length; i++ ) {
            xmlHttp = new ActiveXObject( client[ i ] ); 
            }
         } catch( er ) { }
      }  
   } catch( e ) {
      if ( "createRequest" in window ) {
      xmlHttp = window.createRequest();
      } xmlHttp = null;
   } if ( xmlHttp !== null ) {
   (( "overrideMimeType" in xmlHttp ) ? xmlHttp.overrideMimeType("text/xml") : xmlHttp );
   xmlHttp.onreadystatechange = function() { // I have no idea on how you implement things inside here.

/* So you'll need to re-implement everything to get what you exactly needed on this operation. 

inititializing normal operation: */ 
   if ( xmlHttp.readyState === 4 || xmlHttp.readyState === "complete" ) {
      if ( xmlHttp.status === 200 ) {
      (( document.getElementById ) ? document.getElementById("citydiv") : document.all.citydiv ).innerHTML = xmlHttp.responseText;
      }
   }    
};
   xmlHttp.open( method, encodeURIComponent( url ), true );
   (( method === "POST" && "setRequestHeader" in xmlHttp ) ? xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8;") : xmlHttp );
   xmlHttp.send((( method === "POST" ) ? "province=" + qstr + "&amp;city=" + sel2 : null ));
   return false;
   } alert( "Your browser does not handle AJAX Request!" );
};
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="form" action="#" onsubmit="return false;">
<table width="50%" frame="box" rules="all" cellpadding="4" cellspacing="4" border="1">
<!-- Province goes here --> 
<tr> 
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>Province</td>
<td><!-- The following request type can be set to "GET/POST" inside the getCity() function request builder.
 
Just see which one works in your form -->
<select id="province" name="province" onChange="getCity( 'GET', 'province' );" size="1">
<option value="">Select Province</option> 
<option value="1">KwaZulu-Natal</option> 
<option value="2">Western Cape</option> 
<option value="3">Eastern Cape</option> 
<option value="4">Free State</option> 
<option value="5">Gauteng</option> 
<option value="6">Limpopo</option>
<option value="7">Mpumalanga</option>
<option value="8">North West</option>
<option value="9">Northern Cape</option> 
</select> 
</td> 
</tr> 
<!-- Province ends here --> 
<!-- Town goes here --> 
<tr> 
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>Town</td><td><div id="citydiv">
<select id="city" name="city" size="1"><option value="" selected="selected">Select Town</option> 
</select>
</div> 
</td> 
</tr>
</table> 
<!-- Town ends here -->
</form>
</div>
</body>
</html>

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<?xml-stylesheet type="text/css" href="#css21" media="screen"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html id="xhtml10S" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Window-target" content="_top" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Free Live Help!</title>
<style id="css21" type="text/css" media="screen">
/* <![CDATA[ */
td { text-align : center; }
/* ]]> */
</style> 
<script id="javascript1.5" type="text/javascript">
// <![CDATA[

var getCity = function( method, qstr ) { 
   var sel = (( document.getElementsByTagName ) ? document.getElementsByTagName("select") : document.all.tags("select"));
   sel1 = sel[ (( typeof this.id !== "undefined" ) ? this.id : qstr ) ];
   qstr = sel1.options[ sel1.selectedIndex ].value;
   sel2 = sel[ "city" ].options[ sel[ "city" ].selectedIndex ].value;
   
   url = (( method === "GET" ) ? "../dir/townsrc.php?province=" + qstr + "&amp;city=" + sel2 : "../dir/townsrc.php" );
   try {
      if ( "XMLHttpRequest" in window ) {
      xmlHttp = new XMLHttpRequest(); 
      } else if ( "ActiveXObject" in window ) {
      var client = [ "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
         try {
            for ( var i = 0; i < client.length; i++ ) {
            xmlHttp = new ActiveXObject( client[ i ] ); 
            }
         } catch( er ) { }
      }  
   } catch( e ) {
      if ( "createRequest" in window ) {
      xmlHttp = window.createRequest();
      } xmlHttp = null;
   } if ( xmlHttp !== null ) {
   (( "overrideMimeType" in xmlHttp ) ? xmlHttp.overrideMimeType("text/xml") : xmlHttp );
   xmlHttp.onreadystatechange = function() { // I have no idea on how you implement things inside here.

/* So you'll need to re-implement everything to get what you exactly needed on this operation. 

inititializing normal operation: */ 
   if ( xmlHttp.readyState === 4 || xmlHttp.readyState === "complete" ) {
      if ( xmlHttp.status === 200 ) {
      (( document.getElementById ) ? document.getElementById("citydiv") : document.all.citydiv ).innerHTML = xmlHttp.responseText;
      }
   }    
};
   xmlHttp.open( method, encodeURIComponent( url ), true );
   (( method === "POST" && "setRequestHeader" in xmlHttp ) ? xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8;") : xmlHttp );
   xmlHttp.send((( method === "POST" ) ? "province=" + qstr + "&amp;city=" + sel2 : null ));
   return false;
   } alert( "Your browser does not handle AJAX Request!" );
};
// ]]>
</script>
</head>
<body>
<div id="main">
<form id="form" action="#" onsubmit="return false;">
<table width="50%" frame="box" rules="all" cellpadding="4" cellspacing="4" border="1">
<!-- Province goes here --> 
<tr> 
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>Province</td>
<td><!-- The following request type can be set to "GET/POST" inside the getCity() function request builder.
 
Just see which one works in your form -->
<select id="province" name="province" onChange="getCity( 'GET', 'province' );" size="1">
<option value="">Select Province</option> 
<option value="1">KwaZulu-Natal</option> 
<option value="2">Western Cape</option> 
<option value="3">Eastern Cape</option> 
<option value="4">Free State</option> 
<option value="5">Gauteng</option> 
<option value="6">Limpopo</option>
<option value="7">Mpumalanga</option>
<option value="8">North West</option>
<option value="9">Northern Cape</option> 
</select> 
</td> 
</tr> 
<!-- Province ends here --> 
<!-- Town goes here --> 
<tr> 
<td>-</td>
<td>-</td>
<td>-</td>
<td>-</td>
<td>Town</td><td><div id="citydiv">
<select id="city" name="city" size="1"><option value="" selected="selected">Select Town</option> 
</select>
</div> 
</td> 
</tr>
</table> 
<!-- Town ends here -->
</form>
</div>
</body>
</html>

Last edited by essential; Jul 5th, 2009 at 1:05 am.