Firefox, Javascript onBlur, onChange, onFocus Problems

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="">

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.

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

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?

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.

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.

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>

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.

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.