Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Move to next input field

Posted on 2003-11-10
24
Medium Priority
?
272 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
Ransomware-A Revenue Bonanza for Service Providers

Ransomware – malware that gets on your customers’ computers, encrypts their data, and extorts a hefty ransom for the decryption keys – is a surging new threat.  The purpose of this eBook is to educate the reader about ransomware attacks.

 

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 1000 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

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

In our day to day coding, how many times have we come across a necessity to check whether a URL is a broken link or not? For those of you that answered countless and are using ColdFusion like myself, then this article is for you.  It will show yo…
Lease-to-own eliminates the expenditure of hardware replacement and allows you to pay off the server over time. Usually, this is much cheaper than leasing servers. Think of lease-to-own as credit without interest.
In this brief tutorial Pawel from AdRem Software explains how you can quickly find out which services are running on your network, or what are the IP addresses of servers responsible for each service. Software used is freeware NetCrunch Tools (https…
Do you want to know how to make a graph with Microsoft Access? First, create a query with the data for the chart. Then make a blank form and add a chart control. This video also shows how to change what data is displayed on the graph as well as form…

722 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