How to Change Focus to given Form Field

Giganews Newsgroups
Subject: How to Change Focus to given Form Field
Posted by:  fish (noSpamPlea…@noSpam.com)
Date: Thu, 10 Jul 2003

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 + "].

Valid chars
for a number field are :
      '0', '1', .., '9'  and '.', '+', '-'
";
          }

          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>

Replies