Home > > Coreg

Automatically go to the Next Field (8)

09-17-2011 09:16 AM #1 keen (Member)
Automatically go to the Next Field

I was listening to the coreg webinar when Dan mentioned that he couldn't figure out how to make it go to the next field when typing in with more than one field. This is useful for things like phone numbers.

I did a little search and found it, so I've decided to share it with everyone here:

You want this between your <head> Tags:

Code:

<script language="JavaScript" type="text/javascript">

function moveOnMax(field,nextFieldID){
  if(field.value.length >= field.maxLength){
    document.getElementById(nextFieldID).focus();
  }
}
</script>

And put this somewhere in your form:

Code:

<input type="text" id="phone1" maxlength=3 size=3 onkeyup="moveOnMax(this,'phone2')"/>
<input type="text" id="phone2" maxlength=3 size=3 onkeyup="moveOnMax(this,'phone3')"/>
<input type="text" id="phone3" maxlength=4 size=4 />

Make sure you have onkeyup set to the next input box's ID.

Here is a little example of what it looks like:

http://screencast.com/t/82vRZB10

Hope people find this useful, I'm gonna use this for my coreg paths for sure.

09-17-2011 10:09 AM #2 shanktank (Member)

I think he said he couldn't make it work together with livevalidation.

09-17-2011 04:16 PM #3 pancakes (Member)

Originally Posted by shanktank

I think he said he couldn't make it work together with livevalidation.

It works with livevalidation, I just tested it.

Thanks keen!

09-17-2011 06:43 PM #4 keen (Member)

Glad it could help some people =) This should help with conversions a bit

09-17-2011 06:53 PM #5 polarbacon (Moderator)

Ya would be curious to see data of how much dif this makes.....in regards to forms in general......not just co-reg

09-17-2011 07:25 PM #6 pancakes (Member)

Hm, seems like it doesn't work with livevalidation in IE. Works fine in Chrome/Firefox.

09-29-2011 07:15 AM #7 shanktank (Member)

OK. Found one that's easy to use and works in IE!

http://www.mathachew.com/sandbox/jquery-autotab/

1. Include the JS in your page

Code:

<script type="text/javascript" src="jquery.autotab.js"></script>

2. Add id's to your input fields

Code:

<input type="text" name="inputid1" id="inputid1" maxlength="3" size="3" />
<input type="text" name="inputid2" id="inputid2" maxlength="3" size="3" />
<input type="text" name="inputid3" id="inputid3" maxlength="4" size="5" />

3. Replace #inputid1 & so on with the input ids that you want to auto-tab

Code:

<script type="text/javascript">
$(document).ready(function() {
	$(':input').autotab_magic();
	// OR
	$('#inputid1, #inputid2, #inputid3').autotab_magic();
});
</script>

09-29-2011 10:16 AM #8 pancakes (Member)

You the man, shanktank!

Home > > Coreg