Is it possible to make the area code box tab over to the next box after 3 #s are entered?

  • Profile Image
    pauljmiller
    Asked on February 19, 2011 at 04:53 PM

    My email is paul@webscience101.com  thank you in advance

    Also how can I change my account details.  The email address that I

    login with is and old one and I would like to change it.  thanks  PM

  • Profile Image
    abajan
    Answered on February 20, 2011 at 01:58 PM

    You're talking about utilizing an aspect of "input masks" which I've occasionally come across but presently JotForm does not have that feature built in (at least not that I know of). That's not to say that it can't be done. It's just that it will require the use of some extra JavaScript. I'll have to do some research and see how best it can be implemented.

    In the meantime, have a look at input masking at work. I know none of these examples show tabbing from one field to another but some of them basically achieve the same goal (kind of).

    Here's another example (still without the auto tabbing, though).

    SOLUTION: This works but you will need to get the full (preferably compressed and refined) source, edit and upload it (along with an extra JavaScript file mentioned below) and then edit the embed code on your page that contains the current form.

    Let's get started:

    Go to your "My Forms" page, click on the form in question and then click its Edit link. While on the Setup & Share tab, click Embed Form. (If the Embed Form Wizard opens too high such that a good portion of it is hidden beyond the top of the screen - this has happened to me a few times - close and re-open it.)

    Now click Source as indicated:

    Continue...

    After downloading the file, unzip it with WinZip, 7-Zip or whatever program you normally use to decompress such files and you should see two folders and an HTML file.

    Open the HTML file in your favorite editor, then do the following. (In each instance below, you will need to replace the braces "{ }" with angled brackets. This was necessary as this forum does not have CODE tags and angled brackets cause problems.)

    Line 31: Put this code on the previously empty line.

    Line 279: Change size="3"} to size="3" maxlength="3" onkeyup="moveOnMax(this,'input_45_phone')" /} 

    Line 281: Change size="8"} to size="8" maxlength="7" onkeyup="moveOnMax(this,'input_13_area')" /} 

    Line 287: Change size="3"} to size="3" maxlength="3" onkeyup="moveOnMax(this,'input_13_phone')" /} 

    Line 289: Change size="8"} to size="8" maxlength="7" onkeyup="moveOnMax(this,'input_12')" /} 

    Line 332: Change size="3"} to size="3" maxlength="3" onkeyup="moveOnMax(this,'input_20_phone')" /} 

    Line 334: Change size="8"} to size="8" maxlength="7" onkeyup="moveOnMax(this,'input_21')" /} 

    Type the following code as is (do NOT change the braces below into angled brackets!) into a new file, name it autoTabToNext.js and save it to the js folder you just downloaded:

    At this point you can test how the phone number fields are functioning. Just double-click the HTML file to open it. If everything is working correctly, upload all of the files and folders to your site, taking care to preserve the relationships between them. For example, don't upload CSS folder to the JS folder!

    Now all that is needed is to replace the old embed code on your page with an iFrame that points to your form. If the folders and files were uploaded to the same directory as the page on which the form is intended to be embedded, your iFrame should be similar, if not identical, to this: (screenshot coming up...)