OnBlur and OnFocus Events not working in FIreFox. This is a known issue, but I've heard of some workarounds to certain situations, and I'm hoping that one of you may have the answer for my problem.
In my forms, I am combining several form fields into 1 field or storage into a database.
Example:
Dropdowns for Day, Month, Year. I use an onBlur or onChange to call a javascript function that formats the date as 0000-00-00 and stores it to it's own variable to be stored in a database.
This method is fine in all browsers except Firefox. Apparently, Firefox has issues with how the onblur or onchange is handled and never updates the variable, and furthermore, loses its focus to the previous text field.
I will post several examples of what I have tried.
[code]
<script language="JavaScript"><!--
function birthdayBuild() {
document.form.birthday.val
ue = document.form.byear.value + '-' + document.form.bmonth.value
+ '-' + document.form.bday.value;
}
function hometownBuild() {
document.form.hometown.val
ue = document.form.city.value + '|' + document.form.state.value + '|' + document.form.country.valu
e;
}
function schoolBuild() {
document.form.schools.valu
e = document.form.school1.valu
e + '|' + document.form.school2.valu
e + '|' + document.form.school3.valu
e;
}
//--></script>
//////////////////////////
/////FIRST
METHOD////////////////////
//////////
//////////
/////////
<select name="bmonth" class="month" id="bmonth" onBlur="birthdayBuild();">
<option value="01">January</option
>
<option value="02">February</optio
n>
<option value="03">March</option>
<option value="04">April</option>
<option value="05">May</option>
<option value="06">June</option>
<option value="07">July</option>
<option value="08">August</option>
<option value="09">September</opti
on>
<option value="10">October</option
>
<option value="11">November</optio
n>
<option value="12">December</optio
n>
</select>
<select name="bday" class="dateyear" id="bday" onBlur="birthdayBuild();">
<?
for ($i = 1; $i <= 31; $i++)
{
?>
<option value="<? echo $i; ?>" ><? echo $i; ?></option>
<?
}
?>
</select>
<select name="byear" class="dateyear" id="byear" onBlur="birthdayBuild();" >
<?
for ($i = 2007; $i >= 1900; $i--)
{
?>
<option value="<? echo $i; ?>" ><? echo $i; ?></option>
<?
}
?>
</select>
<input type="hidden" name="birthday">
//////////////////////////
/////SECON
D METHOD////////////////////
//////////
//////////
/////////
<input name="city" type="text" class="textfield3" id="city" onfocus="document.getEleme
ntById(cit
y).blur()"
onChange="hometownBuild();
">
<select name="state" class="dateyear" id="state" onfocus="document.getEleme
ntById(sta
te).blur()
" onChange="hometownBuild();
">
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
</select>
<input name="country" type="text" class="textfield3" id="country" onfocus="document.getEleme
ntById(cou
ntry).blur
()" onChange="hometownBuild();
">
<input type="hidden" name="hometown">
//////////////////////////
/////THIRD
METHOD////////////////////
//////////
//////////
/////////
<input name="city" type="text" class="textfield3" id="city" onChange="hometownBuild();
" onfocus="this.blur()">
<select name="state" class="dateyear" id="state" onChange="hometownBuild();
" onfocus="this.blur()">
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
</select>
<input name="country" type="text" class="textfield3" id="country" onChange="hometownBuild();
" onfocus="this.blur()">
<input type="hidden" name="hometown">
[/code]
Plug this into a firefix browser and you'll see what I mean.
Start Free Trial