Focus() And Select() Problems With Firefox

vdesignlabs

Jan 10 2008, 12:21 AM

Hi guys,

I am new to javascript and am currently learning it with the book Wrox Beginning Javascript 3rd ed.

I have just encountered a problem that I am not able to figure out. Could you please help me out.....

The problem is that select() and focus() are not working in FF2.0 but works in IE7.

This is what the code is supposed to do:
1. I enter a age
2. If I enter non numerical data and then I tab out of the text area
3. An alert box pops up and tells me to correct the age.
4. On hitting ok it goes back to the age field.

But in FF its going to the next tag(the submit button).

This is the code:

CODE

&lt;script type="text/javascript">

function txt_age_onblur()
{
	var in_txt_age = document.form1.txt_age;

	if (isNaN(in_txt_age.value))
	{
		alert("Please enter a valid age");
		in_txt_age.focus(); //looks as if no need for focus() as I am able to edit the text with only select() in IE. Not working with FF.
		in_txt_age.select(); //Not working with FF
	}
}
</script>
</head>
<body>
<form name=form1>
Age:
<input type=text name=txt_age onblur="txt_age_onblur()" size=3 maxlength=3 />
<input type=button value=Submit />
</form>
</body>
</html>

Thanks for you time friends. Smile..............

Comment/Reply (w/o sign-up)

vdesignlabs

Jan 10 2008, 07:04 AM

Solved it!!!!!!!!!

I used this instead:

CODE

setTimeout("document.form1.txt_age.select()", 1);

and I can't understand why

CODE

document.form1.txt_age.select(); 

did not work!!!!!!!!!

If somebody can tell me why, it will be appreciated.

Thank You...............

Comment/Reply (w/o sign-up)

TavoxPeru

Jan 11 2008, 05:46 AM

A time ago i have the same problem and i found that this happens because of the DOM and if you set or not the DOCTYPE to tell the browser which kind of page you serve. So, what i did to resolve this is to attach to the onsubmit event of my form the this reserved word, that references the form itself and of course declare correctly which page i will serve using the DOCTYPE.

This is the code that i use on my page:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $languageCode; ?>">
<head>
<script  type="text/javascript">
//<![CDATA[
function validate_form1(theForm) {
    Tot = theForm.elements.length-3; // because i don't need to validate the last 3 fields of my form (2 buttons and one textfield)
    for(i = 0; i < Tot;i++) {
        if(theForm.elements[i].value == "") {
            alert("Error...blah blah blah");
            theForm.elements[i].focus();
            theForm.elements[i].select();
            return false;
        }
    }
    email=theForm.email_field_name.value;
    if (!isEmail(email)) {
        alert("Error email not valid!!!");
        theForm.email_field_name.focus();
        theForm.email_field_name.select();
        return false;
    }

    return true;
}
// other functions
//]]>
</script>
</head>
<body>

<form action="sendmail.php" method="post" id="form1" onsubmit="return validate_form1(this);">

</form>

</body>
</html>

As you can see, this page is a valid XHTML webpage, please visit the following webpage Contact Us - Calendar Te Recuerdo Perú 2008 - Almanac Te Recuerdo Peru 2008 if you want to see it in action.

Of course, you can use this to reference not only your forms also you can use it with your fields, for example, you can attach to the onfocus event of your fields the select() function to select its contents directly like in the following code:

CODE

Best regards,

Comment/Reply (w/o sign-up)