Move to next input field

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?
swartoutAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jyokumCommented:
<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
James RodgersWeb Applications DeveloperCommented:
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
anandkpCommented:
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
IT Pros Agree: AI and Machine Learning Key

We’d all like to think our company’s data is well protected, but when you ask IT professionals they admit the data probably is not as safe as it could be.

swartoutAuthor Commented:
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
James RodgersWeb Applications DeveloperCommented:
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
jyokumCommented:
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
swartoutAuthor Commented:
I tried both of those and still does not move to the next field after you enter the data in the contactareacode field.
0
jyokumCommented:
what type of browser are you using? works fine for me in IE 6 and NS 4.75
0
swartoutAuthor Commented:
I am using IE6, so what am I doing wrong?
0
swartoutAuthor Commented:
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
James RodgersWeb Applications DeveloperCommented:
double click on the error icon it will tell you the error
0
swartoutAuthor Commented:
The error is telling me that this.accountform.contactprefix is null or not an object
0
jyokumCommented:
post your code again.
0
James RodgersWeb Applications DeveloperCommented:
did you change this line to include the id attribute?

<input type="text" value="#contactprefix#" id="contactprefix" name="contactprefix" size="3" maxlength="3">
0
swartoutAuthor Commented:
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
James RodgersWeb Applications DeveloperCommented:
please paste the whole form/page
0
James RodgersWeb Applications DeveloperCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jyokumCommented:
this.accountform.contactprefix.focus()
SHOULD BE
this.form.contactprefix.focus()
0
James RodgersWeb Applications DeveloperCommented:
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
swartoutAuthor Commented:
Now I get the cursor to move, however, it does not stay on that field so the user can edit.
0
James RodgersWeb Applications DeveloperCommented:
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
James RodgersWeb Applications DeveloperCommented:
but since 'nexttext' the event is triggered on key up how does that stop you from editing the content?
0
swartoutAuthor Commented:
this is what i am looking for.  thanks for all of the help.  I increased the points to 250.
0
James RodgersWeb Applications DeveloperCommented:
glad i could help

thanks for the points and the bonus!!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Servers

From novice to tech pro — start learning today.