Problem with PhP MySql Ajax dropdown script

Expand Post »

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:

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:

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:

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>????

StefaRSA

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

2 posts
since Jul 2009

Permalink

Jul 5th, 2009

Re: Problem with PhP MySql Ajax dropdown script

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

(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.

essential

Featured Poster

Reputation Points: 114

Solved Threads: 138

Posting Shark

Offline

973 posts
since Aug 2008

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Streaming Video

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: AJAX app not working in IE6, IE7, or IE8 I think JS file is problem

DaniWeb Message

Cancel Changes

User Name
Password