tabindexes don't work with onBlur function in Net

elisabeth · November 23rd, 2004, 11:23 AM

Hello,

I am having problems using NETSCAPE with the tabindexes after using the "onBlur" Javascript function. I have been looking and looking and I can't find what is wrong!!!.

Basically, I have the following:
- field1
- field2
- field3
- field4
...etc
Field 2 and field3 are inicially disabled.
What I want to do is:
- If I enter something in field1 => I want field2 and field3 to be automatically enabled.. and obviously I want the cursor to be on field2. Sounds easy right?

Now:
CASE 1: Field 1 is empty:
- I use the "tabulator" from field1.... and the cursor goes to field4: CORRECT.

CASE 2: Field1 is not empty:
- I use the "tabulator".... field3 and field4 are enabled .... but the cursor goes to field4!!!!!

It works perfectly with Explorer but not with Netscape 7.0

Could you help ?

Here is part of my coding:
....
Function initForm1(form)
{
var f1=form.field1.value;
if (!f1.match(/^(\s)*$/) )
{
form.field2.disabled=false;
form.field3.disabled=false;
form.field2.focus();
}
else
{
form.field2.disabled=true;
form.field2.value="";
form.field3.disabled=true;
form.field3.value="";
}
}

.....
Field1:
<input type=text name="field1" tabindex=3 onBlur="initForm1(this.form);"
<br>
Field2:
<input type=text name="field2" tabindex=4>
<br>
Field3:
<input type=text name="field3" tabindex=5>
<br>
Field4:
<input type=text name="field4" tabindex=6>
.....

ChrisScott · November 23rd, 2004, 12:01 PM

Hi Elisabeth,

I'm sure there are other ways to do this with Netscape, but this seems to work...

Code:

function initForm1(form)
{
    var f1=form.field1.value;
    if (!f1.match(/^(\s)*$/) ) 
    {
        form.field2.disabled=false;
        form.field3.disabled=false;
        setTimeout("document.forms." + form.name + ".field2.focus()", 1);
    }
    else
    {
        form.field2.disabled=true;
        form.field2.value="";
        form.field3.disabled=true;
        form.field3.value=""; 
    }

}

HTH,

Chris

elisabeth · November 23rd, 2004, 02:25 PM

I don't know what I have done wrong but it partially works!!!
Now, I did get the focus on field2 .... but if I use the tabulator on field2..... the cursor does not go to field3 but somewhere else!!!!

ChrisScott · November 24th, 2004, 04:22 AM

Not sure what you're doing wrong without seeing the code, but the following works for me...

Code:

<html>

<head>
  <title></title>

<script type="text/javascript">
function initForm1(form)
{
    var f1=form.field1.value;
    if (!f1.match(/^(\s)*$/) ) 
    {
        form.field2.disabled=false;
        form.field3.disabled=false;
        setTimeout("document.forms." + form.name + ".field2.focus()", 1);
    }
    else
    {
        form.field2.disabled=true;
        form.field2.value="";
        form.field3.disabled=true;
        form.field3.value=""; 
    }

}
</script>

</head>

<body>

<form name="myForm">
Field1:
<input type=text name="field1" tabindex=3 onBlur="initForm1(this.form);" 
<br>
Field2:
<input type=text name="field2" tabindex=4 disabled="disabled">
<br>
Field3:
<input type=text name="field3" tabindex=5 disabled="disabled">
<br>
Field4:
<input type=text name="field4" tabindex=6>

<input type="button" onclick="this.form.field2.focus();" />
</form>

</body>

</html>

Cheers,

Chris

elisabeth · November 24th, 2004, 04:51 AM

Hello Chris,
I have tried your script... it works but only for field2. I mean that once I am on field 2 and use the tabulator.... it does not go to field 3.
Once the fields are enabled, I need to be able to use the tabulator to go from field1 to field2 to field3 to field4.

Thanks for your help.

joefawcett · November 24th, 2004, 06:06 AM

Well I don't know what your "tabulator" is but Chris's page works for me in IE and Netscape with the tab button.

--

Joe (Microsoft MVP - XML)

elisabeth · November 24th, 2004, 07:48 AM

I think I now understand the use of the button that focuses on field2.. but this is not what I exactly need.
I have tried Chris's page again (on Netscape 7.0) and this is what I exactly do:
- Focus on field1
- Write something on field1
- Use tab (from field1) => goes to field2 => correct
- Use tab (from field2) => goes to the button near field4 => but I want the cursor to go directly to field3.

ChrisScott · November 24th, 2004, 07:58 AM

Hi Elisabeth,

I had been using the button for testing only - you don't need it.

However, the tab works fine for me from field 2 to 3 in Netscape.

Can you post your code please?

Thanks,

Chris

elisabeth · November 24th, 2004, 08:24 AM

Hello Chris!!
I think I know why we are having problems. When I tried your script, I first used the tabulator on field1 and then the cursor went to field4. After that I focused on field1, entered a value and used the tab, it went to field2 and using the tab from field2 the cursor went to field1 again!!.
Now if you enter a value the first time in field1 it works fine.

Anyway, here is my code:

<html>
<head>
<title></title>

<script type="text/javascript">

function disableFields()
{
document.forms[0].field2.disabled=false;
document.forms[0].field3.disabled=false;
}

function initForm1(form)
{
var f1=form.field1.value;
if (!f1.match(/^(\s)*$/) )
{
   form.field2.disabled=false;
   form.field3.disabled=false;
   setTimeout("document.forms." + form.name + ".field2.focus()", 1);
}
else
{
   form.field2.disabled=true;
   form.field2.value="";
   form.field3.disabled=true;
   form.field3.value="";
}
}
</script>
</head>
<body onLoad=disableFields()>

<form name="myForm">
Field1:
<input type=text name="field1" tabindex=3 onBlur="initForm1(this.form);"
<br>
Field2:
<input type=text name="field2" tabindex=4 >
<br>
Field3:
<input type=text name="field3" tabindex=5 >
<br>
Field4:
<input type=text name="field4" tabindex=6>
</form>
</body>
</html>

ChrisScott · November 24th, 2004, 08:59 AM

Hi Elisabeth,

The code works fine for me, I did notice on closer inspection that the line

Code:

<input type=text name="field1" tabindex=3 onBlur="initForm1(this.form);"

has no closing ">" - so probably worth correcting that just in case.

In addition, you may want to modify your initForm1 method...

Code:

function initForm1(form)
{
    var f1=form.field1.value;
    if (!f1.match(/^(\s)*$/) ) 
    {
        form.field2.disabled=false;
        form.field3.disabled=false;
        setTimeout("document.forms." + form.name + ".field2.focus()", 1);
    }
    else
    {
        form.field2.disabled=true;
        form.field2.value="";
        form.field3.disabled=true;
        form.field3.value=""; 
        setTimeout("document.forms." + form.name + ".field4.focus()", 1);
    }

}

(extra line to set focus on field 4 after disabling 2 & 3 - otherwise you get nothing in focus in Netscape)

HTH,

Chris