Set focus after showing an alert?

Discussion in 'Javascript' started by Martin, Sep 3, 2004.

  1. Martin

    Martin Guest

    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;
    }
     
    Martin, Sep 3, 2004
    #1
    1. Advertising

  2. On Fri, 03 Sep 2004 09:36:57 -0700, Martin <>
    wrote:

    > 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

    --
    Michael Winter
    Replace ".invalid" with ".uk" to reply by e-mail.
     
    Michael Winter, Sep 3, 2004
    #2
    1. Advertising

  3. Martin

    Randy Webb Guest

    Martin wrote:

    > 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.

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



    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Randy Webb, Sep 3, 2004
    #3
  4. Martin

    Martin Guest

    On Fri, 03 Sep 2004 17:00:21 GMT, "Michael Winter"
    <> wrote:


    >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, Sep 3, 2004
    #4
  5. Martin

    Martin Guest


    >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.
     
    Martin, Sep 4, 2004
    #5
  6. Martin

    Randy Webb Guest

    Martin wrote:

    >>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?


    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();
    }

    --
    Randy
    comp.lang.javascript FAQ - http://jibbering.com/faq
     
    Randy Webb, Sep 5, 2004
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mersh
    Replies:
    0
    Views:
    492
    Mersh
    Mar 13, 2007
  2. Ganesh
    Replies:
    0
    Views:
    555
    Ganesh
    Jun 29, 2007
  3. Paresh Shah

    HTML Window Focus alert

    Paresh Shah, Nov 2, 2004, in forum: Javascript
    Replies:
    3
    Views:
    177
    McKirahan
    Nov 3, 2004
  4. Replies:
    2
    Views:
    343
    Thomas 'PointedEars' Lahn
    Jun 6, 2005
  5. Roger
    Replies:
    3
    Views:
    331
Loading...

Share This Page