We help IT Professionals succeed at work.

Firefox, Javascript onBlur, onChange, onFocus Problems

18,672 Views
Last Modified: 2013-12-07
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.value =  document.form.byear.value + '-' + document.form.bmonth.value + '-' + document.form.bday.value;
}
function hometownBuild() {
     document.form.hometown.value =  document.form.city.value + '|' + document.form.state.value + '|' + document.form.country.value;
}
function schoolBuild() {
     document.form.schools.value =  document.form.school1.value + '|' + document.form.school2.value + '|' + document.form.school3.value;
}
//--></script>

///////////////////////////////FIRST METHOD/////////////////////////////////////////////////
 <select name="bmonth" class="month" id="bmonth" onBlur="birthdayBuild();">
<option value="01">January</option>
        <option value="02">February</option>
        <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</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </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">

///////////////////////////////SECOND METHOD/////////////////////////////////////////////////
 <input name="city" type="text" class="textfield3" id="city" onfocus="document.getElementById(city).blur()" onChange="hometownBuild();">
      <select name="state" class="dateyear" id="state" onfocus="document.getElementById(state).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.getElementById(country).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.


Comment
Watch Question

Commented:
You need to use getElementById.

You would use it like this, that will work in firefox.

<html>
<head>
<script language="JavaScript">
<!--//
function hometownBuild() {
      var city = document.getElementById('city');
      var state = document.getElementById('state');
      var hometown = document.getElementById('hometown');
      var country = document.getElementById('country');

      hometown.value = city.value + '|' + state.value + '|' + country.value;
}

//--></script>
</head>
<body>



<input name="city" type="text" class="textfield3" id="city" onchange="hometownBuild();">
      <select name="state" class="dateyear" id="state" 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" onchange="hometownBuild();">
        <input type="text" name="hometown" id="hometown" value="">
</body>
</html>

Commented:
The other important thing is that each input needs an id.

Before you had:

<input type="hidden" name="hometown" >

Which is no good you need:

<input type="hidden" name="hometown" id="hometown" value="">

Your javascript will be as follows:

<script language="JavaScript">
<!--//
function hometownBuild() {
      var city = document.getElementById('city');
      var state = document.getElementById('state');
      var hometown = document.getElementById('hometown');
      var country = document.getElementById('country');

      hometown.value = city.value + '|' + state.value + '|' + country.value;
}

function birthdayBuild() {
      var birthday = document.getElementById('birthday');
      var byear = document.getElementById('byear);
      var bmonth = document.getElementById('bmonth);
      var bday = document.getElementById('bday);
      birthday.value = byear.value + '|' + bmonth.value + '|' + bday.value;
}

function schoolBuild() {
      var schools = document.getElementById('schools');
      var school1 = document.getElementById('school1');
      var school2 = document.getElementById('school2');
      var school3 = document.getElementById('school3');

      birthday.schools = school1.value + '|' + school2.value + '|' + school3.value;
}

//--></script>

Your HTML:

 <select name="bmonth" class="month" id="bmonth" onchange="birthdayBuild();">
<option value="01">January</option>
        <option value="02">February</option>
        <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</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
      <select name="bday" class="dateyear" id="bday" onchange="birthdayBuild();">
        <?
        for ($i = 1; $i <= 31; $i++)
        {
        ?>
        <option value="<? echo $i; ?>" ><? echo $i; ?></option>
        <?
            }
       ?>
      </select>
      <select name="byear" class="dateyear" id="byear" onchange="birthdayBuild();" >
         <?
        for ($i = 2007; $i >= 1900; $i--)
         {
        ?>
        <option value="<? echo $i; ?>" ><? echo $i; ?></option>
        <?
            }
       ?>
      </select>
        <input type="text" name="birthday" id="birthday" value="">


<input name="city" type="text" class="textfield3" id="city" onchange="hometownBuild();">
      <select name="state" class="dateyear" id="state" 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" onchange="hometownBuild();">
        <input type="text" name="hometown" id="hometown" value="">

Author

Commented:
Hi ncoo,

I'm still losing focus as soon as I click on a different form field.

EX: on one line I have a textbox (city) listbox(state) textbox (country)

If I click on Country, my focus immediately goes to city.  if I click on state, the listbox menu pops up for a split second then I lost focus to city again.

Author

Commented:
Also, if I tab from one value to the next, it works fine.  This only happens when clicking on an object.

Commented:
What is your objective with the focus and blur. Focus is the opposite of blur. To focus on one field is to blur the previous field. Your script is blurring the very field your are trying to focus on. Under the second method you have:

>><input name="city" type="text" class="textfield3" id="city" onfocus="document.getElementById(city).blur()" onChange="hometownBuild();">

The onfocus event is triggered as soon as your cursor enters the city textfield. But the onfocus event blurs the city textfield which, I would guess, pushes the cursor to the next field. This would be an effective way to keep anyone from ever changing the city field. Is that your objective?

Author

Commented:
The line of code you highlighted was just one of the methods that someone else on a different site has tried.  I've been toying with the coding that's similar to what ncoo has been trying.

Author

Commented:
What I need to do is after a user makes a change to a field, that my hidden field, is updated according to the new information.

Commented:
The first bit of code I posted does exactly that. If you click away or tab away from the current input box it will update the hidden field. I suggest unhidding the field so you can see what is happening as shown below:

<html>
<head>
<script language="JavaScript">
<!--//
function hometownBuild() {
      var city = document.getElementById('city');
      var state = document.getElementById('state');
      var hometown = document.getElementById('hometown');
      var country = document.getElementById('country');

      hometown.value = city.value + '|' + state.value + '|' + country.value;
}

//--></script>
</head>
<body>



<input name="city" type="text" class="textfield3" id="city" onchange="hometownBuild();">
      <select name="state" class="dateyear" id="state" 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" onchange="hometownBuild();">
        <input type="text" name="hometown" id="hometown" value="">
</body>
</html>

Author

Commented:
Yes, I know that it is updating the hidden field... but a user still can't click on a different field and type in any changes.
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Hi Ncoo,  I tested your code outside of my page and it worked fine.  

I actually did find my problem.  Dreamweaver added label tags <label></label> around my fields and that was what was causing the jumping.

If anyone is interested in seeing what I'm talking about, add <label> after the <body> tag in ncoo's code, and </label> before the ending </body>

Thanks for your help.

Commented:
Glad you got that working I thought I was going mad.

That is most unusual behaviour from Dreamweaver though, it's normally very good.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.