ajax vs FF2

yzerman · July 6, 2007

I have a script that I need to be compliant with all browsers. Problem is, my script when done one way, only works with Modzilla 5.0 compatible browsers (Firefox 2 and Safari) and fails to work with IE6, FF1, and Opera. I have not tested the script in IE7 because I refuse to place garbage on my machine.

Anyway here is the code:

<?php //ajax.php
if ($_REQUEST['type'] == 'list') { //list for register.php - person selects a state, a list of areas shows up
$state = $_REQUEST['state'];
$list = getList($state); //returns an array of choices
echo '<select name="area" id="area">';
echo '<option value="">Select Area</option>';
foreach ($list as $k) {
	echo "<option value=\"$k\" description=\"$k\">$k</option>";
}
echo '</select>';
}
?>

This way outputs this array in FF2 when I submit the form:

Array (
[submit] => Next
[gender] => Male
[first_name] => ss
[last_name] => ss
[email] => ss
[password1] => ss
[password2] => ss
[year] => 1986
[month] => 11
[day] => 18
[state] => Indiana
[imgverification] => ARFLI )

Note no [area] => value

This way in IE6 - FF1 and Opera outputs the following:

Array ( 
[submit] => Next
[gender] => Male
[first_name] => ss
[last_name] => ss
[email] => ss
[password1] => ss
[password2] => ss
[year] => 2002
[month] => 01
[day] => 02
[state] => Arkansas 
[area] => Fayetteville //there is the area I am looking for in FF2
[imgverification] => 0FMX3 )

Note no code has changed.

Here is the code in register.php:

<tr>
	<td>	
	<? 	$st = $query("SELECT DISTINCT state FROM arealist");
		$state = mysql_fetch_array($st);?>
		<select name="state" id="state" onChange="selectCollege(this.value)">
			<option value="">State</option>
			<? foreach ($state as $s) {
				foreach ($s as $k) { ?>
			<option value="<?=$k?>"><?=$k?></option>
			<? } } ?>
		</select>
		</td>
</tr>
<tr><td colspan="2" class="area"><div id="area"></div>
</td>
</tr>

Now when I change the code from a div tag, to a select tag with the id="area", and remove the select tags from ajax.php, it works in FF2, but is broken in the rest of the browsers (instead of echoing the option tags within the select tags, it prints out all of the the areas in one line.)

per1os · July 6, 2007

I have a script that I need to be compliant with all browsers. Problem is, my script when done one way, only works with Modzilla 5.0 compatible browsers (Firefox 2 and Safari) and fails to work with IE6, FF1, and Opera. I have not tested the script in IE7 because I refuse to place garbage on my machine.

Welcome to the sucky world of "compliancy". FF2 is upheld to standards, IE decided to say ",.|.." to the standards which makes it near impossible to code for every browser.

You will fight this till the end of time. Microsoft thinks that they are the standard. It sucks because like 90% of internet users use IE so you sort of HAVE to code for it, but as for me, I only code for FF.

Anyhow this is not a PHP question, this is more of a JavaScript/CSS/HTML directed question as what you are asking for is the client-side not server side.

yzerman · July 6, 2007

I have a script that I need to be compliant with all browsers. Problem is, my script when done one way, only works with Modzilla 5.0 compatible browsers (Firefox 2 and Safari) and fails to work with IE6, FF1, and Opera. I have not tested the script in IE7 because I refuse to place garbage on my machine.

Welcome to the sucky world of "compliancy". FF2 is upheld to standards, IE decided to say ",.|.." to the standards which makes it near impossible to code for every browser.

You will fight this till the end of time. Microsoft thinks that they are the standard. It sucks because like 90% of internet users use IE so you sort of HAVE to code for it, but as for me, I only code for FF.

Anyhow this is not a PHP question, this is more of a JavaScript/CSS/HTML directed question as what you are asking for is the client-side not server side.

While I agree with you here - this is generally a PHP piece of software with some Java and HTML (notice I didnt post the js file because it was not relevent) integrated. This is server side - because in this case its not the browser thats the problem. There is a bug in my code somewhere - because $_REQUEST['area'] is not being sent with FF2, but it is sent with all the other browsers. IE is not the problem here, FireFox is.

per1os · July 6, 2007

Post the html for the built page.

yzerman · July 6, 2007

IE6:

<table cellpadding="2">
<tr>

	<td><span class="style64">Gender </span></td>

	<td>
		<input type="radio" name="gender" value="Male">Male 
		<input type="radio" name="gender" value="Female">Female
	</td>

</tr>
	<tr>

	<td><span class="style64">First Name </span></td>

	<td><input type="text" name="first_name" value="" maxlength="16" size="28"></td>

</tr>
<tr>

	<td><span class="style64">Last Name </span></td>

	<td><input type="text" name="last_name" value="" maxlength="16" size="28"></td>

</tr>	
<tr>

	<td><span class="style64">Email Address </span></td>

	<td><input type="text" name="email" value="" maxlength="48" size="28"></td>

</tr>
<tr>

	<td><span class="style64">Password </span></td>

	<td><input type="password" name="password1" value="" maxlength="48" size="28"></td>

</tr>

<tr>

	<td><span class="style64">Confirm Password </span></td>

	<td><input type="password" name="password2" value="" maxlength="48" size="28"></td>

</tr>
<tr>

	<td><span class="style64">Date of Birth </span></td>

	<td>

		<select name="year" class="selectshort">

			<option value="">Year</option>


			<option value="2002">2002</option>


			<option value="2001">2001</option>


			<option value="2000">2000</option>


			<option value="1999">1999</option>


			<option value="1998">1998</option>


			<option value="1997">1997</option>


			<option value="1996">1996</option>


			<option value="1995">1995</option>


			<option value="1994">1994</option>


			<option value="1993">1993</option>


			<option value="1992">1992</option>


			<option value="1991">1991</option>


			<option value="1990">1990</option>


			<option value="1989">1989</option>


			<option value="1988">1988</option>


			<option value="1987">1987</option>


			<option value="1986">1986</option>


			<option value="1985">1985</option>


			<option value="1984">1984</option>


			<option value="1983">1983</option>


			<option value="1982">1982</option>


			<option value="1981">1981</option>


			<option value="1980">1980</option>


			<option value="1979">1979</option>


			<option value="1978">1978</option>


			<option value="1977">1977</option>


			<option value="1976">1976</option>


			<option value="1975">1975</option>


			<option value="1974">1974</option>


			<option value="1973">1973</option>


			<option value="1972">1972</option>


			<option value="1971">1971</option>


			<option value="1970">1970</option>


			<option value="1969">1969</option>


			<option value="1968">1968</option>


			<option value="1967">1967</option>


			<option value="1966">1966</option>


			<option value="1965">1965</option>


			<option value="1964">1964</option>


			<option value="1963">1963</option>


			<option value="1962">1962</option>


			<option value="1961">1961</option>


			<option value="1960">1960</option>


			<option value="1959">1959</option>


			<option value="1958">1958</option>


			<option value="1957">1957</option>


			<option value="1956">1956</option>


			<option value="1955">1955</option>


			<option value="1954">1954</option>


			<option value="1953">1953</option>


			<option value="1952">1952</option>


			<option value="1951">1951</option>


			<option value="1950">1950</option>


			<option value="1949">1949</option>


			<option value="1948">1948</option>


			<option value="1947">1947</option>


			<option value="1946">1946</option>


			<option value="1945">1945</option>


			<option value="1944">1944</option>


			<option value="1943">1943</option>


			<option value="1942">1942</option>


			<option value="1941">1941</option>


			<option value="1940">1940</option>


			<option value="1939">1939</option>


			<option value="1938">1938</option>


			<option value="1937">1937</option>


			<option value="1936">1936</option>


			<option value="1935">1935</option>


			<option value="1934">1934</option>


			<option value="1933">1933</option>


			<option value="1932">1932</option>


			<option value="1931">1931</option>


			<option value="1930">1930</option>


			<option value="1929">1929</option>


			<option value="1928">1928</option>


			<option value="1927">1927</option>


			<option value="1926">1926</option>


			<option value="1925">1925</option>


			<option value="1924">1924</option>


			<option value="1923">1923</option>


			<option value="1922">1922</option>


			<option value="1921">1921</option>


			<option value="1920">1920</option>


			<option value="1919">1919</option>


			<option value="1918">1918</option>


			<option value="1917">1917</option>


			<option value="1916">1916</option>


			<option value="1915">1915</option>


			<option value="1914">1914</option>


			<option value="1913">1913</option>


			<option value="1912">1912</option>


			<option value="1911">1911</option>


			<option value="1910">1910</option>


			<option value="1909">1909</option>


			<option value="1908">1908</option>


			<option value="1907">1907</option>


		</select>

		<select name="month" class="selectshort">

			<option value="">Month</option>


			<option value="01">01</option>


			<option value="02">02</option>


			<option value="03">03</option>


			<option value="04">04</option>


			<option value="05">05</option>


			<option value="06">06</option>


			<option value="07">07</option>


			<option value="08">08</option>


			<option value="09">09</option>


			<option value="10">10</option>


			<option value="11">11</option>


			<option value="12">12</option>


		</select>

		<select name="day" style="width:54px">

			<option value="">Day</option>


			<option value="01">01</option>


			<option value="02">02</option>


			<option value="03">03</option>


			<option value="04">04</option>


			<option value="05">05</option>


			<option value="06">06</option>


			<option value="07">07</option>


			<option value="08">08</option>


			<option value="09">09</option>


			<option value="10">10</option>


			<option value="11">11</option>


			<option value="12">12</option>


			<option value="13">13</option>


			<option value="14">14</option>


			<option value="15">15</option>


			<option value="16">16</option>


			<option value="17">17</option>


			<option value="18">18</option>


			<option value="19">19</option>


			<option value="20">20</option>


			<option value="21">21</option>


			<option value="22">22</option>


			<option value="23">23</option>


			<option value="24">24</option>


			<option value="25">25</option>


			<option value="26">26</option>


			<option value="27">27</option>


			<option value="28">28</option>


			<option value="29">29</option>


			<option value="30">30</option>


			<option value="31">31</option>


		</select>

	</td>

</tr>
<tr>
	<td colspan="2"><b>State and Metro Area</b></td>
</tr>
<tr>
	<td>	
				<select name="state" id="state" onChange="selectArea(this.value)">
			<option value="">State</option>
							<option value="Alabama">Alabama</option>
							<option value="Alaska">Alaska</option>
							<option value="Arizona">Arizona</option>
							<option value="Arkansas">Arkansas</option>
							<option value="California">California</option>
							<option value="Colorado">Colorado</option>
							<option value="Connecticut">Connecticut</option>
							<option value="Delaware">Delaware</option>
							<option value="District of Columbia">District of Columbia</option>
							<option value="Florida">Florida</option>
							<option value="Georgia">Georgia</option>
							<option value="Hawaii">Hawaii</option>
							<option value="Idaho">Idaho</option>
							<option value="Illinois">Illinois</option>
							<option value="Indiana">Indiana</option>
							<option value="Iowa">Iowa</option>
							<option value="Kansas">Kansas</option>
							<option value="Kentucky">Kentucky</option>
							<option value="Maine">Maine</option>
							<option value="Maryland">Maryland</option>
							<option value="Massachusetts">Massachusetts</option>
							<option value="Michigan">Michigan</option>
							<option value="Minnesota">Minnesota</option>
							<option value="Mississippi">Mississippi</option>
							<option value="Missouri">Missouri</option>
							<option value="Montana">Montana</option>
							<option value="Nebraska">Nebraska</option>
							<option value="Nevada">Nevada</option>
							<option value="New Hampshire">New Hampshire</option>
							<option value="New Jersey">New Jersey</option>
							<option value="New Mexico">New Mexico</option>
							<option value="New York">New York</option>
							<option value="North Carolina">North Carolina</option>
							<option value="North Dakota">North Dakota</option>
							<option value="Ohio">Ohio</option>
							<option value="Oklahoma">Oklahoma</option>
							<option value="Oregon">Oregon</option>
							<option value="Pennsylvania">Pennsylvania</option>
							<option value="Rhode Island">Rhode Island</option>
							<option value="South Carolina">South Carolina</option>
							<option value="South Dakota">South Dakota</option>
							<option value="Tennessee">Tennessee</option>
							<option value="Texas">Texas</option>
						</select>
		</td>
</tr>
<tr><td colspan="2" class="area"><div id="area"></div>
</td>
</tr>

FF2:

<table cellpadding="2">
<tr>

	<td><span class="style64">Gender </span></td>

	<td>
		<input type="radio" name="gender" value="Male">Male 
		<input type="radio" name="gender" value="Female">Female
	</td>

</tr>
	<tr>

	<td><span class="style64">First Name </span></td>

	<td><input type="text" name="first_name" value="" maxlength="16" size="28"></td>

</tr>
<tr>

	<td><span class="style64">Last Name </span></td>

	<td><input type="text" name="last_name" value="" maxlength="16" size="28"></td>

</tr>	
<tr>

	<td><span class="style64">Email Address </span></td>

	<td><input type="text" name="email" value="" maxlength="48" size="28"></td>

</tr>
<tr>

	<td><span class="style64">Password </span></td>

	<td><input type="password" name="password1" value="" maxlength="48" size="28"></td>

</tr>

<tr>

	<td><span class="style64">Confirm Password </span></td>

	<td><input type="password" name="password2" value="" maxlength="48" size="28"></td>

</tr>
<tr>

	<td><span class="style64">Date of Birth </span></td>

	<td>

		<select name="year" class="selectshort">

			<option value="">Year</option>


			<option value="2002">2002</option>


			<option value="2001">2001</option>


			<option value="2000">2000</option>


			<option value="1999">1999</option>


			<option value="1998">1998</option>


			<option value="1997">1997</option>


			<option value="1996">1996</option>


			<option value="1995">1995</option>


			<option value="1994">1994</option>


			<option value="1993">1993</option>


			<option value="1992">1992</option>


			<option value="1991">1991</option>


			<option value="1990">1990</option>


			<option value="1989">1989</option>


			<option value="1988">1988</option>


			<option value="1987">1987</option>


			<option value="1986">1986</option>


			<option value="1985">1985</option>


			<option value="1984">1984</option>


			<option value="1983">1983</option>


			<option value="1982">1982</option>


			<option value="1981">1981</option>


			<option value="1980">1980</option>


			<option value="1979">1979</option>


			<option value="1978">1978</option>


			<option value="1977">1977</option>


			<option value="1976">1976</option>


			<option value="1975">1975</option>


			<option value="1974">1974</option>


			<option value="1973">1973</option>


			<option value="1972">1972</option>


			<option value="1971">1971</option>


			<option value="1970">1970</option>


			<option value="1969">1969</option>


			<option value="1968">1968</option>


			<option value="1967">1967</option>


			<option value="1966">1966</option>


			<option value="1965">1965</option>


			<option value="1964">1964</option>


			<option value="1963">1963</option>


			<option value="1962">1962</option>


			<option value="1961">1961</option>


			<option value="1960">1960</option>


			<option value="1959">1959</option>


			<option value="1958">1958</option>


			<option value="1957">1957</option>


			<option value="1956">1956</option>


			<option value="1955">1955</option>


			<option value="1954">1954</option>


			<option value="1953">1953</option>


			<option value="1952">1952</option>


			<option value="1951">1951</option>


			<option value="1950">1950</option>


			<option value="1949">1949</option>


			<option value="1948">1948</option>


			<option value="1947">1947</option>


			<option value="1946">1946</option>


			<option value="1945">1945</option>


			<option value="1944">1944</option>


			<option value="1943">1943</option>


			<option value="1942">1942</option>


			<option value="1941">1941</option>


			<option value="1940">1940</option>


			<option value="1939">1939</option>


			<option value="1938">1938</option>


			<option value="1937">1937</option>


			<option value="1936">1936</option>


			<option value="1935">1935</option>


			<option value="1934">1934</option>


			<option value="1933">1933</option>


			<option value="1932">1932</option>


			<option value="1931">1931</option>


			<option value="1930">1930</option>


			<option value="1929">1929</option>


			<option value="1928">1928</option>


			<option value="1927">1927</option>


			<option value="1926">1926</option>


			<option value="1925">1925</option>


			<option value="1924">1924</option>


			<option value="1923">1923</option>


			<option value="1922">1922</option>


			<option value="1921">1921</option>


			<option value="1920">1920</option>


			<option value="1919">1919</option>


			<option value="1918">1918</option>


			<option value="1917">1917</option>


			<option value="1916">1916</option>


			<option value="1915">1915</option>


			<option value="1914">1914</option>


			<option value="1913">1913</option>


			<option value="1912">1912</option>


			<option value="1911">1911</option>


			<option value="1910">1910</option>


			<option value="1909">1909</option>


			<option value="1908">1908</option>


			<option value="1907">1907</option>


		</select>

		<select name="month" class="selectshort">

			<option value="">Month</option>


			<option value="01">01</option>


			<option value="02">02</option>


			<option value="03">03</option>


			<option value="04">04</option>


			<option value="05">05</option>


			<option value="06">06</option>


			<option value="07">07</option>


			<option value="08">08</option>


			<option value="09">09</option>


			<option value="10">10</option>


			<option value="11">11</option>


			<option value="12">12</option>


		</select>

		<select name="day" style="width:54px">

			<option value="">Day</option>


			<option value="01">01</option>


			<option value="02">02</option>


			<option value="03">03</option>


			<option value="04">04</option>


			<option value="05">05</option>


			<option value="06">06</option>


			<option value="07">07</option>


			<option value="08">08</option>


			<option value="09">09</option>


			<option value="10">10</option>


			<option value="11">11</option>


			<option value="12">12</option>


			<option value="13">13</option>


			<option value="14">14</option>


			<option value="15">15</option>


			<option value="16">16</option>


			<option value="17">17</option>


			<option value="18">18</option>


			<option value="19">19</option>


			<option value="20">20</option>


			<option value="21">21</option>


			<option value="22">22</option>


			<option value="23">23</option>


			<option value="24">24</option>


			<option value="25">25</option>


			<option value="26">26</option>


			<option value="27">27</option>


			<option value="28">28</option>


			<option value="29">29</option>


			<option value="30">30</option>


			<option value="31">31</option>


		</select>

	</td>

</tr>
<tr>
	<td colspan="2"><b>State and Metro Area</b></td>
</tr>
<tr>
	<td>	
				<select name="state" id="state" onChange="selectArea(this.value)">
			<option value="">State</option>

							<option value="Alabama">Alabama</option>
							<option value="Alaska">Alaska</option>
							<option value="Arizona">Arizona</option>
							<option value="Arkansas">Arkansas</option>
							<option value="California">California</option>
							<option value="Colorado">Colorado</option>

							<option value="Connecticut">Connecticut</option>
							<option value="Delaware">Delaware</option>
							<option value="District of Columbia">District of Columbia</option>
							<option value="Florida">Florida</option>
							<option value="Georgia">Georgia</option>
							<option value="Hawaii">Hawaii</option>

							<option value="Idaho">Idaho</option>
							<option value="Illinois">Illinois</option>
							<option value="Indiana">Indiana</option>
							<option value="Iowa">Iowa</option>
							<option value="Kansas">Kansas</option>
							<option value="Kentucky">Kentucky</option>

							<option value="Maine">Maine</option>
							<option value="Maryland">Maryland</option>
							<option value="Massachusetts">Massachusetts</option>
							<option value="Michigan">Michigan</option>
							<option value="Minnesota">Minnesota</option>
							<option value="Mississippi">Mississippi</option>

							<option value="Missouri">Missouri</option>
							<option value="Montana">Montana</option>
							<option value="Nebraska">Nebraska</option>
							<option value="Nevada">Nevada</option>
							<option value="New Hampshire">New Hampshire</option>
							<option value="New Jersey">New Jersey</option>

							<option value="New Mexico">New Mexico</option>
							<option value="New York">New York</option>
							<option value="North Carolina">North Carolina</option>
							<option value="North Dakota">North Dakota</option>
							<option value="Ohio">Ohio</option>
							<option value="Oklahoma">Oklahoma</option>

							<option value="Oregon">Oregon</option>
							<option value="Pennsylvania">Pennsylvania</option>
							<option value="Rhode Island">Rhode Island</option>
							<option value="South Carolina">South Carolina</option>
							<option value="South Dakota">South Dakota</option>
							<option value="Tennessee">Tennessee</option>

							<option value="Texas">Texas</option>
						</select>
		</td>
</tr>
<tr><td colspan="2" class="area"><div id="area"></div>
</td>
</tr>

per1os · July 6, 2007

I still say its a Javascript/css issue.

Post the javascript that is used to populate the div area.

What seems to be happening is that for some reason when that div is populated and than submit is hit, firefox is not retrieving the name of the select, which is why the area portion is not populated.

Javascript/CSS are the parts that vary as they are client-side and not server side.

roopurt18 · July 6, 2007

Try changing:

<select name="state" id="state" onChange="selectArea(this.value)">

to

<select name="state" id="state" onChange="selectArea(this.options[this.selectedIndex].value)">

I'd be curious to see the function selectArea.

Sign In

ajax vs FF2

Recommended Posts

yzerman

Link to comment

Share on other sites

per1os

Link to comment

Share on other sites

yzerman

Link to comment

Share on other sites

per1os

Link to comment

Share on other sites

yzerman

Link to comment

Share on other sites

per1os

Link to comment

Share on other sites

roopurt18

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information