Solved

Move to next input field

Posted on 2003-11-10
24
265 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Migrating Your Company's PCs

To keep pace with competitors, businesses must keep employees productive, and that means providing them with the latest technology. This document provides the tips and tricks you need to help you migrate an outdated PC fleet to new desktops, laptops, and tablets.

 

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

Why You Need a DevOps Toolchain

IT needs to deliver services with more agility and velocity. IT must roll out application features and innovations faster to keep up with customer demands, which is where a DevOps toolchain steps in. View the infographic to see why you need a DevOps toolchain.

Question has a verified solution.

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

Suggested Solutions

Have you ever sent email via ColdFusion and thought of tracking this mail to capture the exact date and time when the message was opened ?  If yes, then this article is for you ! First we need a table user_email with columns user_id , email , sub…
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…
Suggested Courses

734 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