How to Change Focus to given Form Field

Discussion in 'Javascript' started by fish, Jul 10, 2003.

  1. fish

    fish Guest

    Hi,

    I have an HTML page with a FORM and some input fields.
    On the fields I wish to do validation as the punters change the field
    values.

    If they get it wrong, then I tell them and then wish to put
    the focus back to the offending field.

    ( It works if a use an 'onblur' event but not an 'onchange' )
    What mean is that the changing focus happens.


    The 'onblur' is a pain because if a minimise the window and then bring
    it back up, the validation function is called for each box during the
    loading.
    In practice I may have a form with up to 60 boxes and this would be a bit
    of a drag.

    eg:
    Try the following file and enter an invalid number in either of the
    number boxes then use the mouse ( or TAB key )
    to move to a new box.


    <html>
    <head>
    <link rel='stylesheet' href='/ripple-order/common/rip.css' />
    <title>Submit a Ripple Order</title>

    <script language="Javascript">

    function validate_generic_numberField( dataRootDetails )
    {
    alert( "Entered 'validate_generic_numberField' field_name=["
    + dataRootDetails.name + "]" );
    // expect dataRootDetails to be either the value of
    // document.productDetails or document.serviceDetails
    var v = dataRootDetails.value;
    var fname = dataRootDetails.name;

    var err = 0;
    var errtext = "";
    if( v.search(/[^0-9\.]/g) != -1 )
    { err = 1;
    errtext = "Problem with field [" + fname + "]. \n\nValid chars
    for a number field are :\n '0', '1', .., '9' and '.', '+', '-'\n";
    }

    if( err )
    {
    alert( errtext );
    dataRootDetails.focus();
    }
    }
    </script>
    </head>
    <body bgcolor="#FFFFFF">

    <form>
    <table>
    <tr>
    <td valign="top" class="fdesc">A text field in here</td>
    <td><textarea name="TextField1" rows="4"
    cols="40"></textarea></td>
    <td valign="top" class="ftype">Text</td>
    </tr>

    <tr>
    <td valign="top" class="fdesc">A string field in here</td>
    <td><input type="text" name="StringField1" value=""></td>
    <td valign="top" class="ftype">String</td>
    </tr>


    <tr bgcolor="cyan">
    <td valign="top" class="fdesc">Try alpha char here then move to
    another box ( onblur event )</td>
    <Comment>Note. Using the onblur event because the onchange event does not
    seem to allow the focus to be re-set back offending field
    </Comment>
    <td><input type="text" name="numberField1"
    onblur="validate_generic_numberField(this)" value="">
    </td>

    <td valign="top" class="ftype">Number [ ]</td>
    </tr>


    <tr>
    <td valign="top" class="fdesc">Try alpha char here then move to
    another box ( onchange event )</td>
    <Comment>Note. Using the onblur event because the onchange event does not
    seem to allow the focus to be re-set back offending field
    </Comment>
    <td><input type="text" name="numberField2"
    onchange="validate_generic_numberField(this)" value="">
    </td>

    <td valign="top" class="ftype">Number [ ]</td>
    </tr>

    </table>
    </body>
    </html>
     
    fish, Jul 10, 2003
    #1
    1. Advertising

  2. fish wrote:

    > On the fields I wish to do validation as the punters change the field
    > values.


    > If they get it wrong, then I tell them and then wish to put
    > the focus back to the offending field.


    I strongly suggest you reconsider. If you try this you'll find a lot of
    people type something in to the field, hit tab, then start typing what they
    want in the next field. If you hijack the cursor back to the previous field
    they'll type over whatever they put.

    This means they waste time typing in the wrong box (lots of time if they
    don't notice!) and find it much harder to edit whatever they had initially
    (e.g. if it was only a minor error, but the zapping forces them to retype
    the entire field).

    --
    David Dorward http://david.us-lot.org/
    Redesign in progress: http://stone.thecoreworlds.net/
    Microsoft announces IE is dead (so upgrade):
    http://minutillo.com/steve/weblog/2003/5/30/microsoft-announces-ie-is-dead
     
    David Dorward, Jul 10, 2003
    #2
    1. Advertising

  3. fish

    Philip Ronan Guest

    On 03.7.10 9:35 AM, fish wrote:

    > I have an HTML page with a FORM and some input fields.
    > On the fields I wish to do validation as the punters change the field
    > values.
    >
    > If they get it wrong, then I tell them and then wish to put
    > the focus back to the offending field.


    Would you like it if your bank manager asked you to fill in a form and then
    looked over your shoulder the whole time pointing out every tiny mistake you
    made?

    Of course not.

    Just wait until the user presses the submit button.

    Phil
    --
    Philip Ronan

    (Please remove the "z"s if replying by email)
     
    Philip Ronan, Jul 10, 2003
    #3
    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. Lord0
    Replies:
    1
    Views:
    574
    Thomas Weidenfeller
    Apr 19, 2006
  2. chiara
    Replies:
    6
    Views:
    483
    Barry Schwarz
    Oct 6, 2005
  3. 2Barter.net
    Replies:
    0
    Views:
    372
    2Barter.net
    Dec 13, 2006
  4. Casey Hawthorne
    Replies:
    385
    Views:
    5,730
    ng2010
    Apr 4, 2010
  5. Roger
    Replies:
    3
    Views:
    338
Loading...

Share This Page