DaniWeb IT Discussion Community

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/index.php)
-   JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)
-   -   Problem with PhP MySql Ajax dropdown script (http://www.daniweb.com/forums/thread201301.html)

StefaRSA Jul 2nd, 2009 2:59 pm
Problem with PhP MySql Ajax dropdown script
 
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:
<!-- 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:
<? $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:
$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>????

essential Jul 5th, 2009 12:59 am
Re: Problem with PhP MySql Ajax dropdown script
 
Try to run this document inside your server w/o adding or changing anything:

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


All times are GMT -4. The time now is 10:15 am.

Forum system based on vBulletin Copyright ©2000 - 2009, Jelsoft Enterprises Ltd.
©2003 - 2009 DaniWeb® LLC