[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1299
  • Last Modified:

.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
0
evco
Asked:
evco
  • 4
  • 2
1 Solution
 
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
 
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now