How can I make it so that when a field asking for a phone number automatically moves onto the next field after typing the area code?

  • Profile Image
    joshbrown
    Asked on August 18, 2011 at 10:16 AM

    Right now I have to tab over to the next field after entering the area code.

  • Profile Image
    NeilVicente
    Answered on August 18, 2011 at 11:48 AM

    Hi,

    Please try this solution:

    1.  Insert this script in your form codes:

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

    For easier reference, place it right before the <form> tag starts

    2.  Find the input tag for your area code:

    <input type="tel" size="3" id="input_6_area" name="q6_businessPhone[area]" class="form-textbox validate[required]">

    3.  Copy the codes below inside your area code input tags:

    maxlength="3" onkeyup="moveOnMax(this,'input_6_phone')"

    (Note that input_6_phone is the input id of the phone number field)

    so it becomes:

    <input type="tel" size="3" id="input_6_area" name="q6_businessPhone[area]" class="form-textbox validate[required]" maxlength="3" onkeyup="moveOnMax(this,'input_6_phone')">

    Hope this works for you. Let us know if you encounter any problems while implementing this. Thanks!


    Neil

  • Profile Image
    joshbrown
    Answered on August 18, 2011 at 05:37 PM

    Worked great!

    Thanks, Neil!