Link to home
Start Free TrialLog in
Avatar of MrBaseball9
MrBaseball9

asked on

Firefox, Javascript onBlur, onChange, onFocus Problems

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.


Avatar of ncoo
ncoo
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>
Avatar of ncoo
ncoo
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="">
Avatar of MrBaseball9
MrBaseball9

ASKER

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.
Avatar of MrBaseball9
MrBaseball9

ASKER

Also, if I tab from one value to the next, it works fine.  This only happens when clicking on an object.
Avatar of walkerke
walkerke
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?
Avatar of MrBaseball9
MrBaseball9

ASKER

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.
Avatar of MrBaseball9
MrBaseball9

ASKER

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.
Avatar of ncoo
ncoo
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>
Avatar of MrBaseball9
MrBaseball9

ASKER

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.
ASKER CERTIFIED SOLUTION
Avatar of ncoo
ncoo
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of MrBaseball9
MrBaseball9

ASKER

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.
Avatar of ncoo
ncoo
Glad you got that working I thought I was going mad.

That is most unusual behaviour from Dreamweaver though, it's normally very good.