.focus() not working in FireFox

First here is the code simplified:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
            <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
            <title>Test</title>
            <script type="text/javascript">
                    
                  function validRequired(formField)
                  {
                        var result = true;
      
                        alert('test');
                        formField.focus();
                        result = false;
      
                        return result;
                  }
            </script>
      </head>
      
      <body>
            <form method="post" action="<?php $_SERVER['PHP_SELF']; ?>" onsubmit="javascript: return validRequired(document.getElementById('email'));">
                  <label for="email">Email:</label></td>
                  <input type="text" size="30" name="email" id="email" />
                  <input type="submit" />
            </form>
      </body>
</html>

The problem is that in FireFox 1.0.1 on Mac OS X 10.3.8 when the form is submitted and there is a validation error the focus goes to the field that caused the error then immediately to the submit button. Taking out the alert() function fixes the problem but is obviously not the solution I want to use.

If I use setTimeout("formField.focus()", 50) it give me an error - "formField is not defined". If I change it to setTimeout("document.getElementById('email').focus()", 50) that fixes the problem. But then I am left with changing all of my reusable code to incorporate using document.getElementById('email'), which I've started to do and just ended up making a big mess of the code.

Any suggestions?

Thanks,
Lauren
evcoAsked:
Who is Participating?
 
XxavierCommented:
Hi evco!!, Very tricky but try this (should work for multiple validations :-)

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<script type="text/javascript">
                 
               function validRequired(formField, fieldLabel)
               {   Field=formField
                    var result = true;
     
                    alert('test');
                    setTimeout("Field.focus()", 50);
                    result = false;
     
                    return result;
               }
               
               function validateForm(theForm)
                 {
                     
                      if (!validRequired(theForm.email,"Email",true))
                           return false;
       
                      return true;
                 }
          </script>
</head>

<body>

<form method="post" action="http://google.com" onsubmit="javascript: return validateForm(this);">
  <label for="email"><p>Email:</label> <input type="text" size="30" name="email" id="email"
  /> <input type="submit" /> </p>
</form>
</body>
</html>
0
 
XxavierCommented:
Hi evco!! Good job I am around tonight cause I can help you

<script type="text/javascript">
                 
               function validRequired(formField)
               {
                    var result = true;
     
                    alert('test');
                     formField.value=formField.value+'';
                    formField.focus();
                   
                    result = false;
     
                    return result;
               }
          </script>
</head>

<body>

<form method="post" action="http://google.com"
onsubmit="javascript: return validRequired(document.getElementById('email'));">
  <label for="email"><p>Email:</label> <input type="text" size="30" name="email" id="email"
  /> <input type="submit" /> </p>
</form>
</body>


Thanks for the points in advance.

Happy Easter

Xxavier
0
 
evcoAuthor Commented:
Thanks for the quick response.

I think I simplified the code a little TOO much. My actual setup includes an external javascript file that contains all sorts of server-side form validation functions.

So here is the code again with some small additions to give you a better idea:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
            <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
            <title>Test</title>
            <script type="text/javascript">
                    
                  function validRequired(formField, fieldLabel)
                  {
                        var result = true;
      
                        alert('test');
                        setTimeout("formField.focus()", 50);
                        result = false;
      
                        return result;
                  }
                  
                  function validateForm(theForm)
                    {
                          
                          if (!validRequired(theForm.email,"Email",true))
                                return false;
        
                          return true;
                    }
            </script>
      </head>
      
      <body>
            <form method="post" action="<?php $_SERVER['PHP_SELF']; ?>" onsubmit="javascript: return validateForm(this);">
                  <label for="email">Email:</label></td>
                  <input type="text" size="30" name="email" id="email" />
                  <input type="submit" />
            </form>
      </body>
</html>


So the setTimeout line is giving me the error - "formField is not defined".

I'm not well-versed in JavaScript so I'm not sure how formField.value=formField.value+''; helps the issue.  I tried adding it to my code but I still received the same error.

If I take out the setTimeout line and just keep the formField.focus() the focus function simply just does not work in FireFox unless I remove the alert() function right before it.

Thanks,
Lauren
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 
evcoAuthor Commented:
Adding Field=formField; did the trick!

Thanks for coming up with a solution so quickly!
0
 
XxavierCommented:
Always eager to please, Goodnight Lauren.

Xx  :-)
0
 
XxavierCommented:
Oh my!!  I now have just gone over 100,000 points. I think it is time for a party!!

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.