Solved

Move to next input field

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

 

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

Simplifying Server Workload Migrations

This use case outlines the migration challenges that organizations face and how the Acronis AnyData Engine supports physical-to-physical (P2P), physical-to-virtual (P2V), virtual to physical (V2P), and cross-virtual (V2V) migration scenarios to address these challenges.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Htaccess - if subdomain "dev." 2 80
how can I backup my incomplete website from hostgator? 3 69
Problem to get function 52 111
Connect to MS-SQL server from Linux/PHP 8 89
This is a guide to setting up a new WHM/cPanel Server to be used for web hosting accounts. It is intended for web hosting company administrators and dedicated server owners. For under $99 per month (considering normal rate of Big Data Cetnters like …
Most ColdFusion developers get confused between the CFSet, Duplicate, and Structcopy methods of copying a Structure, especially which one to use when. This Article will explain the differences in the approaches with examples; therefore, after readin…
This video shows how to quickly and easily add an email signature for all users on Exchange 2016. The resulting signature is applied on a server level by Exchange Online. The email signature template has been downloaded from: www.mail-signatures…

792 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