Solved

Move to next input field

Posted on 2003-11-10
24
260 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
 

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
U.S. Department of Agriculture and Acronis Access

With the new era of mobile computing, smartphones and tablets, wireless communications and cloud services, the USDA sought to take advantage of a mobilized workforce and the blurring lines between personal and corporate computing resources.

 
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

Network it in WD Red

There's an industry-leading WD Red drive for every compatible NAS system to help fulfill your data storage needs. With drives up to 8TB, WD Red offers a wide array of solutions for customers looking to build the biggest, best-performing NAS storage solution.  

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
website does not load without www 12 71
Script 12 137
WEB Farm 6 66
Having trouble setting Apache to recognise 2 vitual sites (on different drive). 3 61
One of the typical problems I have experienced is when you have to move a web server from one hosting site to another. You normally prepare all on the new host, transfer the site, change DNS and cross your fingers hoping all will be ok on new server…
Periodically we have to update or add SSL certificates for customers. Depending upon your hosting plan you may be responsible for the installation and/or key generation. In the wake of Heartbleed many sites were forced to re-key. We will concen…
This Micro Tutorial will teach you how to censor certain areas of your screen. The example in this video will show a little boy's face being blurred. This will be demonstrated using Adobe Premiere Pro CS6.
Many functions in Excel can make decisions. The most simple of these is the IF function: it returns a value depending on whether a condition you describe is true or false. Once you get the hang of using the IF function, you will find it easier to us…

863 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now