JavaScript: Move focus on keypress if textfield is finished

[semomaniz]

I have a form where users will input phone numbers. The way it is set up is with three text boxes. First for phone prefix( 314) then second for the middle number (546) and finally third for last four digits (4563). What i am being asked to do is the cursor need to jump to second text box as soon as user inputs 3 digits on the first text box. and so on. Is there a way to accomplish this. Please help!!

Thank you in advance.

[Plater]

You can but you need to be pretty carefull about it.
You need to watch the keypress events for the textboxes (javascript event)
Then you have to watch to see if:
A) the maximum allowed characters are already in the box (for the first box it would be 3)
B) that the key being pressed is a character key and not a control key (like arrow keys, backspace, delete, etc, etc) so that you don't keep jumping to another textbox when someone presses the arrow key.
Then if the end is reached, set focus to your next control.

The folks over in the javascript section might be able to explain it a bit better.

[semomaniz]

Thanks ,

This means that i will have to use AJAX for this. I know how to do this in classic asp but i am new to AJAX so way confused . Isnt there any other simple solution ??

[Plater]

Well, you don't HAVE to use ajax for this. I don't think you need to have it keep coming back to the server for anything?

[semomaniz]

can you provide me with example on how can it be done? please

[Plater]

I will do you one better and move the question over to the section where people could give you a good example.

MODERATOR

[acoder]

Here's a good example.

[semomaniz]

The posting is for simple html form. Can you please provide me with the example on how to do this with asp.net form.

thank you in advance.

[Plater]

The posting is for simple html form. Can you please provide me with the example on how to do this with asp.net form.

thank you in advance.

Same thing. ASP.NET still just makes a regular HTML form.
And you're going to be doing this with javascript anyway.

[acoder]

Yes, that's right. When the server-side code gets to the browser it's been translated/converted into client-side HTML markup. View source in your browser and you'll see.