php & ajax

[gingar]

hi guys,

I've got form, that contains a country dropdown list, and a city dropdown list the populates when the country is selected via ajax.

The entire form interface works, meaning when I select the country, the city displays correctly. However, I am not able to retrieve the value from the city drop down list when the form is submitted!

I've got 2 separate forms that require this country-city drop down selection. Both codes are roughly the same. 1 works in ie but not firefox. the other doesn't work in both ie n firefox!

Any idea why?

this is the form code

<tr>
		<td class="main" valign="top">Country</td>
		<td class="main" valign="top">:</td>
		<td>
			<select name="country_id" onChange="showCountry(this.value);">
				<?
					$query1="SELECT id,country_name FROM country order by country_name asc";	
					$rscountry1 = mysql_query($query1);

				if (@mysql_num_rows($rscountry1) != 0 )
				{
					while($row1 = mysql_fetch_array($rscountry1))
					{
						$country_id = $row1['id'];
						$country_name = $row1['country_name'];
						?>
						<option value="<?=$country_id?>" <? if($country_id==$sel_country_id) { print "selected"; } ?>><?=$country_name?></option>
						<?
					}
				}
			?>
		</select>
	</td>
</tr>
<tr>
	<td class="main" valign="top">City</td>
	<td class="main" valign="top">:</td>
	<td>
		<span id="optionCity">

			<select name="city_id">
				<?
					$query1="SELECT id, city_name FROM city WHERE country_id = '$sel_country_id' order by city_name asc";	
					$rscountry1 = mysql_query($query1);

					if (@mysql_num_rows($rscountry1) != 0 )
					{
						while($row1 = mysql_fetch_array($rscountry1))
						{
							$city_id = $row1['id'];
							$city_name = $row1['city_name'];
							?>
							<option value="<?=$city_id?>" <? if($city_id==$sel_city_id) { print "selected"; } ?>><?=$city_name?></option>
							<?
						}
					}
				?>
			</select>

		</span>
	</td>
</tr>

this is the ajax code

var xmlHttp;

function showCountry(str)
{
	if (str.length==0)
	{ 
		replace_html("optionCity", "");
		return;
	}
	xmlHttp=GetXmlHttpObject()
	if (xmlHttp==null)
	{
		alert ("Your browser does not support AJAX!");
		return;
	} 

var url="ajax_get_city.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlHttp.onreadystatechange=selectChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
} 

function selectChanged() 
{ 
	if(xmlHttp.readyState==3)	//The request is in process
    {
		show_progressbar("optionCity");
		//replace_html("optionCity", "loading..."); 
    }
	if (xmlHttp.readyState==4)	//The request is complete
	{ 
		replace_html("optionCity",""); 
		replace_html("optionCity", 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;
}

function show_progressbar(id) 
{
	replace_html(id, '<img src="4.gif" border="0" alt="Loading, please wait..." />');
}

function replace_html(id, content) 
{
	document.getElementById(id).innerHTML = content;
}

this is the getcity.php code. basically just returns a <select>...</select>

$sql_city = "SELECT city_name, id FROM city where $country_id='".$country_id."' order by city_name";


echo '<select name="city_id2">';

$rs_city = mysql_query($sql_city) or die(mysql_error());
while ($row = mysql_fetch_assoc($rs_city))
{
	echo '<option value="'.$row['id'].'">'.$row['city_name'].'</option>';
}

echo '</select>';

[NogDog]

I don't know if this is the problem, but you use a select field name of "city_id" in the first piece of code, but "city_id2" in the last piece. Shouldn't it be the same?