Solved

Move to next input field

Posted on 2003-11-10
24
264 Views
Last Modified: 2013-12-24
I have an input field with a maxlength of 3, I would like the cursor to move to the next input field after the user inputs the 3 numbers.  How do I do this?
0
Comment
Question by:swartout
  • 10
  • 8
  • 5
  • +1
24 Comments
 
LVL 12

Expert Comment

by:jyokum
ID: 9716087
<script>
function checkSize(fld,target){
      var frm = fld.form;
      var tgt = eval('frm.'+target);
      if(fld.value.length >= 3) tgt.focus();
}
</script>

<form name="frmData">
input 3 characters <input type="text" name="fieldA" maxlength="3" onKeyUp="checkSize(this,'fieldB');"><br>
<input type="text" name="fieldB"><br>
</form>
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9716107
try this, where textField2 is the field you want to set the focus to.

<input type="text" onKeyUp="if(this.length==3) {textField2.focus()}">
0
 
LVL 17

Expert Comment

by:anandkp
ID: 9720060
try this !

<FORM NAME="frm" ACTION="" METHOD="post">
      <INPUT TYPE="text" NAME="num3" MAXLENGTH="3" ONKEYUP="if(this.value.length==3) {nextfield.focus()}">
      <INPUT TYPE="text" NAME="nextfield">
</FORM>

K'Rgds
Anand
0
Portable, direct connect server access

The ATEN CV211 connects a laptop directly to any server allowing you instant access to perform data maintenance and local operations, for quick troubleshooting, updating, service and repair.

 

Author Comment

by:swartout
ID: 9722952
I tried the posts from anandkp and jester_48 and I could not get to work.  this is what I have, what did I do wrong?

          <td><input type="text" value="#contactareacode#" name="contactareacode" size="3" maxlength="3" onKeyUp="if(this.length==3) {contactprefix.focus()}">-</td>
          <td><input type="text" value="#contactprefix#" name="contactprefix" size="3" maxlength="3">-</td>
          <td><input type="text" value="#contactnumber#" name="contactnumber" size="4" maxlength="4"></td>
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9723095
try this
         <td><input type="text" value="#contactareacode#" name="contactareacode" size="3" maxlength="3" onKeyUp="if(this.length==3) {document.getElementByid('contactprefix').focus()}">-</td>
<td><input type="text" value="#contactprefix#" id="contactprefix" name="contactprefix" size="3" maxlength="3">-</td>
         <td><input type="text" value="#contactnumber#" name="contactnumber" size="4" maxlength="4"></td>


0
 
LVL 12

Expert Comment

by:jyokum
ID: 9723219
this.length should be this.value.length

<td><input type="text" value="#contactareacode#" name="contactareacode" size="3" maxlength="3" onKeyUp="if(this.value.length==3) this.form.contactprefix.focus()">-</td>
<td><input type="text" value="#contactprefix#" id="contactprefix" name="contactprefix" size="3" maxlength="3">-</td>
<td><input type="text" value="#contactnumber#" name="contactnumber" size="4" maxlength="4"></td>

0
 

Author Comment

by:swartout
ID: 9723395
I tried both of those and still does not move to the next field after you enter the data in the contactareacode field.
0
 
LVL 12

Expert Comment

by:jyokum
ID: 9723411
what type of browser are you using? works fine for me in IE 6 and NS 4.75
0
 

Author Comment

by:swartout
ID: 9723553
I am using IE6, so what am I doing wrong?
0
 

Author Comment

by:swartout
ID: 9723614
In the lower left hand corner of my browser it says error on page, when I am in that field.  How do I found out what that error is?
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9723761
double click on the error icon it will tell you the error
0
 

Author Comment

by:swartout
ID: 9723895
The error is telling me that this.accountform.contactprefix is null or not an object
0
 
LVL 12

Expert Comment

by:jyokum
ID: 9724509
post your code again.
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9724654
did you change this line to include the id attribute?

<input type="text" value="#contactprefix#" id="contactprefix" name="contactprefix" size="3" maxlength="3">
0
 

Author Comment

by:swartout
ID: 9731114
Here is my code

          <td><input type="text" value="#contactareacode#" name="contactareacode" size="3" maxlength="3" onKeyUp="if(this.value.length==3) this.accountform.contactprefix.focus()">-</td>
          <td><input type="text" value="#contactprefix#" name="contactprefix" id="contactprefix" size="3" maxlength="3">-</td>
          <td><input type="text" value="#contactnumber#" name="contactnumber" size="4" maxlength="4"></td>

0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9731133
please paste the whole form/page
0
 
LVL 25

Accepted Solution

by:
James Rodgers earned 250 total points
ID: 9731160
change what you have to either

this.form.contactprefix.focus()

 <td><input type="text" value="" name="contactareacode" size="3" maxlength="3" onKeyUp="if(this.value.length==3) this.form.contactprefix.focus()">-</td>


         <td><input type="text" value="" name="contactprefix" id="contactprefix" size="3" maxlength="3">-</td>
         <td><input type="text" value="" name="contactnumber" size="4" maxlength="4"></td>

or
document.accountform.contactprefix.focus()

<td><input type="text" value="#contactareacode#" name="contactareacode" size="3" maxlength="3" onKeyUp="if(this.value.length==3) document.accountform.contactprefix.focus()">-</td>
         <td><input type="text" value="#contactprefix#" name="contactprefix" id="contactprefix" size="3" maxlength="3">-</td>
         <td><input type="text" value="#contactnumber#" name="contactnumber" size="4" maxlength="4"></td>
0
 
LVL 12

Expert Comment

by:jyokum
ID: 9731165
this.accountform.contactprefix.focus()
SHOULD BE
this.form.contactprefix.focus()
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9731173
when usign the keyword 'this' this refers to the current object so

this.accountform.contactprefix.focus() is looking for accountform to be a part of the inputbox

where as

this.form.contactprefix.focus is llokinf for contactprefix as a part of the form that the input box is also a part
0
 

Author Comment

by:swartout
ID: 9731220
Now I get the cursor to move, however, it does not stay on that field so the user can edit.
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9731248
well the box contains three characters, if it contains 3 characters it moves to the next box, you could include a click event that clears the box

onClick="this.value='';"

or

onDblClick="this.value='';"

thsi will allow the edit of the box by clearing the contents
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9731262
but since 'nexttext' the event is triggered on key up how does that stop you from editing the content?
0
 

Author Comment

by:swartout
ID: 9731305
this is what i am looking for.  thanks for all of the help.  I increased the points to 250.
0
 
LVL 25

Expert Comment

by:James Rodgers
ID: 9731332
glad i could help

thanks for the points and the bonus!!
0

Featured Post

Enterprise Mobility and BYOD For Dummies

Like “For Dummies” books, you can read this in whatever order you choose and learn about mobility and BYOD; and how to put a competitive mobile infrastructure in place. Developed for SMBs and large enterprises alike, you will find helpful use cases, planning, and implementation.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

If you don't have the right permissions set for your WordPress location in IIS, you won't be able to perform automatic updates. Here's how to fix the problem.
What You Need to Know when Searching for a Webhost Provider
Exchange organizations may use the Journaling Agent of the Transport Service to archive messages going through Exchange. However, if the Transport Service is integrated with some email content management application (such as an antispam), the admini…
Attackers love to prey on accounts that have privileges. Reducing privileged accounts and protecting privileged accounts therefore is paramount. Users, groups, and service accounts need to be protected to help protect the entire Active Directory …

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question