Set focus after showing an alert?

[Martin]

I have the following function in the onchange event of several text
boxes. If the user enters an invalid number the alert displays. I
would like to return the user to that same field after he closes the
alert but setting the focus as I'm doing here doesn't do it (instead,
the focus goes to the next field).

Any suggestions as to hwo I can make this work?

Thanks.

function checkIt(fldID,maxValue,btnID){
if (document.getElementById(fldID).value > maxValue)
{alert('Invalid Lane Number');
document.getElementById(btnID).disabled=true;
document.getElementById(fldID).focus;}
else
document.getElementById(btnID).disabled=false;
}

 

[Michael Winter]

I have the following function in the onchange event of several text
boxes. If the user enters an invalid number the alert displays. I would
like to return the user to that same field after he closes the alert but
setting the focus as I'm doing here doesn't do it (instead, the focus
goes to the next field).

Any suggestions as to hwo I can make this work?

Thanks.

function checkIt(fldID,maxValue,btnID){

If this is called from an intrinsic event, it would be much easier, and
more reliable, to follow the pattern below:

<input type="..." ... onchange="checkIt(this,<num>,<id>)">

function checkIt(field, maxVal, btnID) {
var btn = field.form.elements[btnID];
// ...
}

If you do insist on using document.getElementById, at least save the
resulting references instead of calling the method repeatedly.

if (document.getElementById(fldID).value > maxValue)

Assuming that the element represented by fldID should contain a number
(the comparison wouldn't make much sense, otherwise), it would be best to
check that the value actually *is* a number, otherwise you might get
strange results.

{alert('Invalid Lane Number');
document.getElementById(btnID).disabled=true;
document.getElementById(fldID).focus;}

You actually need to call the method!

else
document.getElementById(btnID).disabled=false;

I hope that the button isn't disabled by default. It'll be quite a problem
for users without Javascript.

}

Mike

 

[Randy Webb]

I have the following function in the onchange event of several text
boxes. If the user enters an invalid number the alert displays. I
would like to return the user to that same field after he closes the
alert but setting the focus as I'm doing here doesn't do it (instead,
the focus goes to the next field).

Any suggestions as to hwo I can make this work?

Thanks.

function checkIt(fldID,maxValue,btnID){
if (document.getElementById(fldID).value > maxValue)
{alert('Invalid Lane Number');
document.getElementById(btnID).disabled=true;
document.getElementById(fldID).focus;}

focus(), not focus.

 

[Martin]

If you do insist on using document.getElementById, at least save the
resulting references instead of calling the method repeatedly.

OK, I changed that.

You actually need to call the method!

I thought I was doing that. If you're referring to the missing
parentheses (as Randy pointed out) then I added them. But it still
doesn't set the focus to the original field.

I hope that the button isn't disabled by default. It'll be quite a problem
for users without Javascript.

Yes the button is disabled by default. The button enables the user to
continue with the process after verifying that the changed value is
valid - I don't want them to continue if that's not the case.

As far as "users without Javascript enabled" is concerned, there won't
be any such thing. This is not what one would call a "normal" web site
that just anybody can use. It's the user interface to an industrial
process. It will be used by a limited number of people on an intranet.
By definition they must have Javascript enabled. And, a number of the
pages are useable only in IE (because I'm using a lot of VML
graphics). They have to log in with a userid and password to even view
any of the pages. There are some other restrictions, too.

Back to my original question. Any thoughts as to how I can get the
focus to go back to the original field?

Thanks.

 

[Martin]

Any suggestions as to how I can make this work?

Thanks.

function checkIt(fldID,maxValue,btnID){
if (document.getElementById(fldID).value > maxValue)
{alert('Invalid Lane Number');
document.getElementById(btnID).disabled=true;
document.getElementById(fldID).focus;}
else
document.getElementById(btnID).disabled=false;
}

After clearing up the syntax error as noted by Michael & Randy, this
function still did not work - or so I thought. Some further messing
around with it revealed that apparently the focus IS being set to the
input field (fldID) but then (I'm guessing) the TabKey keystroke
executes and moves the cursor to the next field!

I found that, if I mouse away from the field then the cursor will go
back to the field and stay there. But keying away (with either the tab
or Enter keys) results in the focus ending up somewhere else. (in
fact, hitting <Enter> clicks an enabled button on the form AFTER
closing the alert box!)

I also found that, if I call this function from the onblur event
(instead of onchange), it works perfectly. No matter which key is used
the focus goes to the specified field and stays there. Apparently,
onchange and onblur occur at different points relative to the
keystroke itself.

Since I don't want to use onblur, my question now becomes: how can I
(in the function script) cancel the keystroke that occurred. (I'm
coming from a Visual basic perspective here - in VB cancelling a
keystroke is trivial). Is this possible in Javascript?

Thanks.

 

[Randy Webb]

After clearing up the syntax error as noted by Michael & Randy, this
function still did not work - or so I thought. Some further messing
around with it revealed that apparently the focus IS being set to the
input field (fldID) but then (I'm guessing) the TabKey keystroke
executes and moves the cursor to the next field!

I found that, if I mouse away from the field then the cursor will go
back to the field and stay there. But keying away (with either the tab
or Enter keys) results in the focus ending up somewhere else. (in
fact, hitting <Enter> clicks an enabled button on the form AFTER
closing the alert box!)

I also found that, if I call this function from the onblur event
(instead of onchange), it works perfectly. No matter which key is used
the focus goes to the specified field and stays there. Apparently,
onchange and onblur occur at different points relative to the
keystroke itself.

Since I don't want to use onblur, my question now becomes: how can I
(in the function script) cancel the keystroke that occurred. (I'm
coming from a Visual basic perspective here - in VB cancelling a
keystroke is trivial). Is this possible in Javascript?

Instead of trying to cancel the keystroke, put a setTimeout call on your
focus(). That way, it has time to move to the next field, then the
script will set focus where you want it.

Instead of:
document.getElementById(fldID).focus();

Use something like this:

var myVar = null;

And then inside your function, set myVar = to the fieldID:

myVar = fldID;

And then:
myVar = setTimeout(setFocus,1000)


And then:

function setFocus(){
document.getElementById(fldID).focus();
}