Hello,

I have a account form that allows the user to modify their info (address, city state, zip). I also have this code on the original
form in which they fill out the first time. The form below is for modifying account. I found this code a long time ago and it worked
on the site that used it but it took a good bit of time for me to get it to work on my site. I think there has to be a better
way to do this. What I am doing below is based on the country, if USA, then show a populated list of states, if not USA, then
hide droplist and show a edit field so they can type in the providence. I have this working on the onchange event of the country
list. All this works fine. However, the problem lies in the div absolute positioning. As you can imagine this is a hassle in
browsers. Since IE and Mozilla handle things differently, I check for the browser and position accordinglly. I can get everything
positioned perfectly but the second you normalize your browser or change the width, the field as you can guess, moves with it.

I thought I could just get rid of the div tags and the absolute positioning and just hide one field or the other and make the
other one visible based on the country choice but I can not get that to work. I am not a guru at JS. I hope I have explained
this well enough. So I need to show a droplist of states if country is USA (CountryID=6) or if not, then an edit field to type
the providence.

Thanks for any help in this. Below is my current code.

$row["Country"] is from a query I left out of this post. I am only posting relative code.

Code:
$value	=	"<script language=\"JavaScript1.2\" type=\"text/javascript\">";

//php check country result. If 6 then USA
if ($row["Country"] == 6)
	{
	//here we do a browser check because our div positioning within our style tags would not work with all browsers. If we changed
	//the absolute positioning on our style for one browser the other would move. So we have individual styles for the browser.
	//We have Netscape then IE and then other browsers after that. If we run into position problems with a different browser
	//than IE or Netscape then we will use the last style.
	$value .= "var browserName=navigator.appName;
		if (browserName==\"Netscape\")
			{
			document.write('<style><!--');
			document.write('#select2		{position:absolute; left: 294px; top: 492px; width:200px; height: 25px; visibility:hidden; z-index: 100;}');
			document.write('#select3		{position:absolute; left: 294px; top: 492px; width:200px; height: 25px; visibility:visible; z-index: 100;}');
			document.write('//---></style>');
			}
		else
			{
			if (browserName==\"Microsoft Internet Explorer\")
				{
				document.write('<style><!--');
				document.write('#select2		{position:absolute; left: 294px; top: 494px; width:200px; height: 25px; visibility:hidden; z-index: 100;}');
				document.write('#select3		{position:absolute; left: 294px; top: 494px; width:200px; height: 25px; visibility:visible; z-index: 100;}');
				document.write('//---></style>');
				}

			else
				{
				document.write('<style><!--');
				document.write('#select2		{position:absolute; left: 294px; top: 492px; width:200px; height: 25px; visibility:hidden; z-index: 100;}');
				document.write('#select3		{position:absolute; left: 294px; top: 492px; width:200px; height: 25px; visibility:visible; z-index: 100;}');
				document.write('//---></style>');
				}
			}";
	}
else
	{
	$value .= "var browserName=navigator.appName;
		if (browserName==\"Netscape\")
			{
			document.write('<style><!--');
			document.write('#select2		{position:absolute; left: 294px; top: 492px; width:200px; height: 25px; visibility:visible; z-index: 100;}');
			document.write('#select3		{position:absolute; left: 294px; top: 492px; width:200px; height: 25px; visibility:hidden; z-index: 100;}');
			document.write('//---></style>');
			}
		else
			{
			if (browserName==\"Microsoft Internet Explorer\")
				{
				document.write('<style><!--');
				document.write('#select2		{position:absolute; left: 294px; top: 494px; width:200px; height: 25px; visibility:visible; z-index: 100;}');
				document.write('#select3		{position:absolute; left: 294px; top: 494px; width:200px; height: 25px; visibility:hidden; z-index: 100;}');
				document.write('//---></style>');
				}

			else
				{
				document.write('<style><!--');
				document.write('#select2		{position:absolute; left: 294px; top: 335px; width:200px; height: 25px; visibility:visible; z-index: 100;}');
				document.write('#select3		{position:absolute; left: 294px; top: 335px; width:200px; height: 25px; visibility:hidden; z-index: 100;}');
				document.write('//---></style>');
				}
			}";
	}


$value .= "</script>

<!--hide field code-->
<script language=\"JavaScript1.2\" type=\"text/javascript\">
ns5 = (document.getElementById&&!document.all)? true:false
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false

NS6 = (document.getElementById && !document.all)
IE = (document.all)
NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4")


var layerRef,styleRef
if (NS6)
	{
	layerRef = "document.getElementById('"
	styleRef = "').style."
	}
else
	{
	layerRef = (document.all) ? "" : "document.";
	styleRef = (document.all) ? ".style." : ".";
	}


function show(block)
	{
	eval(layerRef + block + styleRef + "visibility = 'visible'");
	}



function hide(block)
	{
	eval(layerRef + block + styleRef + "visibility = 'hidden'");
	}



function change(field,field2,field3)
	{

	if (field.value == 6)
		{
		field3.value = "";
		

		hide('select2');
		show('select3');
		}
	else
		if (field.value != 6 && field.value != "")
			{               
			field2.value = "";

			
			hide('select3');
			show('select2');
			}

	}
</script>




				

<!--*******************************************END of JAVASCRIPT*************************************************************-->";
   


	
$value .="<form name=\"acctmod\" method=\"post\" action=\"../admin/modacctsubmit.php\" onSubmit=\"return ValidateFormEmail()\">
						

<table border=\"0\" cellspacing=\"0\" cellpadding=\"3\">
	<tr>
		<td width=18%>
			<span style=color:blue>Country :</span>
		</td>
		<td width=\"575\" valign=\"top\">

			<div id=\"select1\">";

			$query	= "select * from countries order by country";

			$result	= @mysql_query($query);

			$temp = '';

			$value 	.= '<Select name=country onchange="javascript:change(document.acctmod.country,document.acctmod.state,document.acctmod.state2);">';

			//we loop through results comparing 
			for ($i = 0; $i < @mysql_num_rows($result); $i++)
				{
				$countryrow = @mysql_fetch_array($result);
				
				if ($countryrow["OurCode"] <> $row["Country"])
					$value .= '<Option value="'.$countryrow["OurCode"].'">'.$countryrow["Country"];
				else
					$value .= '<option value="'.$row["Country"].'" selected>'.$countryrow["Country"];

				}




$value .="</select>

			</div>
		</td>
	</tr>
	<tr>
		<td width=18%>
			<span style=color:blue>City :</span>
		</td>
		<td>
			<input type=\"Text\" name=\"city\" size=\"20\" maxlength=\"20\" value=\"".$row["City"]."\">
		</td>
	</tr>
	<tr>
		<td width=18%>
			<span style=color:blue>State/Providence : </span>
		</td>
		<td>

			<div id=\"select3\">";

			$query = "select * from states order by States";

			$result 	= @mysql_query($query);

			$value 	.= "<Select name=state>
							<option value=\"\">";

			for ($i = 0; $i < @mysql_num_rows($result); $i++)
				{
				$row1 = @mysql_fetch_array($result,MYSQL_ASSOC);

				if ($row["State"] <> $row1["Abbrev"])
					$value .= '<Option value="'.$row1["Abbrev"].'">'.$row1["States"];
				else
					$value .= '<option value="'.$row1["Abbrev"].'" selected>'.$row1["States"];
				}
			$value 	.= "</Select>

			</div>


			<div id=\"select2\"> ";

			if ($row["Country"] == 6)
				$value .= "<input type=text name=state2 size=20 maxlength=20 value=\"\">";

			else
				$value .= "<input type=text name=state2 size=20 maxlength=20 value=\"".stripslashes($row["State"])."\">";

$value .="</div>
		</td>
	</tr>
	<tr>
		<td width=18%>
			<span style=color:blue>Zip :</span>
		</td>
		<td>
			<input type=\"Text\" name=\"zip\" size=\"9\" maxlength=\"20\" value=\"".trim($row["Zip"])."\"> (ZIP/Postal Code)
		</td>
	</tr>
</table>


<table border=\"0\" cellspacing=\"0\" cellpadding=\"3\">							
	<tr>
		<td  colspan=2 align=right><p>
			<input type=\"submit\" name=\"submit\" value=\"Update\">
		</td>
	</tr>
</table>\n</form>";
I welcome a completely different solution to this.
Thanks again