can I add script to my form that will automatically add hyphens in between the 3 digit area code and also the 3 digit prefix?

  • Profile Image
    pauljmiller
    Asked on February 27, 2011 at 12:28 PM

     

    I would be happy to use either the quick tools phone number box or a plain text box added from the form tools.

    my email is paul@webscience101.com     thank you very much

  • Profile Image
    liyam
    Answered on February 28, 2011 at 09:10 AM

    Yes, you can add script to your form but not within the options of JotForm.  You can copy the HTML source of your form and put it in your website. Or download the zip file.

    On the "Share Form" wizard, click on "Advanced Options" and then click on "Download Zip".

    Add this javascript to your webpage:

    <SCRIPT LANGUAGE="JavaScript">
    function addDashes(f)
    {
    f.value = f.value.slice(0,3)+"-"+f.value.slice(3,6);
    }
    </SCRIPT>

    While in the textbox that you wish to use this script, add: onBlur='addDashes(this)'

    example of textbox:
    <input id="input_4" class="form-textbox" maxlength="10" name="zipcode" size="15" onBlur='addDashes(this)' />

    What this will do is for every 6 numbers you enter in the textbox, it will insert a dash in between the 3rd and 4th number.

    Note: just make sure that in your JotForm, there should be no numeric validations in it, otherwise jotform will return an error on your textbox.

     

    Javascript credits: http://www.tek-tips.com/viewthread.cfm?qid=437438&page=996

  • Profile Image
    guest_23112251586043
    Answered on November 07, 2012 at 06:16 AM

    EXACTLY what I needed! Short and sweet. Thank you!

  • Profile Image
    josh 
    Answered on June 23, 2016 at 01:02 PM

    for me this puts a dash after the first three numbers and deletes the last four numbers. giving me  for example " 123-456 " but i had typed in 1234567890

  • Profile Image
    liyam
    Answered on June 23, 2016 at 01:46 PM

    Hello josh,

    This is an old thread. But for the purpose of updating everyone, there is an easier way to do this now -- On the form builder (editing your form), simply select the text box and click on the Input Mask icon, and set your desired input

     

    Another update is on the input mask on the phone number field itself. You can set the 2-textboxes phone number field to become a single phone number field by enabling the Input Mask and then you can also fix your own prefern mask value.

    Thanks.

  • Profile Image
    Rob 
    Answered on July 20, 2016 at 02:13 PM

    There is a bug in this.

     

    If you click in the box where you require the phone number, without typing anything, it will add 2 dashs automatically. And continue adding dashs if you keep clicking in the input box.

  • Profile Image
    Jim_R
    Answered on July 20, 2016 at 02:38 PM

    Hello Rob, I've created a separate thread for you here https://www.jotform.com/answers/887056 We'll have your question answered there shortly