Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need a simple script for phone number form

    I am new to javascript and need a simple script to combine 3 form data into one formatted phone number. I want a phone number to be 111-111-1111, and will have 3 input boxes:
    <input type="text" name="p1" class="input3" size="2" maxlength="3">
    <input type="text" name="p2" class="input3" size="2" maxlength="3">
    <input type="text" name="p3" class="input3" size="3" maxlength="4">

    Any help including a working script will be helpful. Thank you in advance.

  • #2
    Regular Coder
    Join Date
    Jul 2007
    Location
    United Kingdom
    Posts
    159
    Thanks
    2
    Thanked 15 Times in 15 Posts
    Simple (With Validation):

    Code:
    <script type="text/javascript">
    function ValidateForm()
    {
     
    	var p1 = document.telephone.p1.value;
    	var p2 = document.telephone.p2.value;
    	var p3 = document.telephone.p3.value;
    
       	if(IsEmpty(document.telephone.p1) || IsEmpty(document.telephone.p2) || IsEmpty(document.telephone.p3)) 
       	{ 
          	alert('You have not entered a valid telephone number!') 
          	document.telephone.p1.focus(); 
          	return false; 
       	} 
     
     
       	else if (!IsNumeric(p1) || !IsNumeric(p2) || !IsNumeric(p3)) 
       	{ 
          	alert('Please enter only numbers!') 
          	document.telephone.p1.focus(); 
          	return false; 
    	}
    	
    	else
    	{
    		createTel()
    	}
    	
    }
    
    
    function IsNumeric(sText)
    
    {
    	var ValidChars = "0123456789";
    	var IsNumber=true;
    	var Char;
     
       	for (i = 0; i < sText.length && IsNumber == true; i++)
    	{ 
          	Char = sText.charAt(i); 
          	if (ValidChars.indexOf(Char) == -1) 
        	{
             	IsNumber = false;
            }
        }
        
       	return IsNumber;
       
    }
    
    
    function IsEmpty(aTextField) {
       if ((aTextField.value.length==0) ||
       (aTextField.value==null)) {
          return true;
       }
       else { return false; }
    }	
    
    function createTel(){
    var p1 = document.telephone.p1.value;
    var p2 = document.telephone.p2.value;
    var p3 = document.telephone.p3.value;
    
    var phonenumber = p1+"-"+p2+"-"+p3;
    alert (phonenumber);
    }
    </script>
    <form name="telephone">
    <input type="text" name="p1" class="input3" size="2" maxlength="3">
    <input type="text" name="p2" class="input3" size="2" maxlength="3">
    <input type="text" name="p3" class="input3" size="3" maxlength="4">
    <input type="button" onClick="ValidateForm()" value="Format Telephone Number">
    </form>
    Last edited by JordanW; 12-13-2007 at 07:47 PM.
    Remember The Thank You Button Is Your Friend =]

    [ PHP / Javascript / VisualBasic / HTML / DHTML / CSS / .NET / MySQL ]

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,622
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Of course most phone numbers will not fit that format as that format is only used in one tiny insignificant country and the rest of the world uses a variety of other formats. Of course if you are targetting that specific country by usung a .us domain then that will be fine but you shouldn't use it on an international domain such as .com, .net, or .org.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    New Coder
    Join Date
    Dec 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much. I am going to try to implement this with our proprietary engine tags.
    Last edited by javajeff; 12-14-2007 at 09:44 PM.

  • #5
    New Coder
    Join Date
    Dec 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    In the spirit of contribution, I added this code to progress fields:

    function NextBox(ctrl,nextField){
    if (ctrl.value.length == ctrl.maxLength){
    eval(nextField+".focus();");
    }
    }

    <input type="text" name="p1" class="autotab" tabindex="0" size="2" maxlength="3" onkeyup="NextBox(this,'document.telephone.p2')">
    <input type="text" name="p2" class="autotab" tabindex="1" size="2" maxlength="3" onkeyup="NextBox(this,'document.telephone.p3')">
    <input type="text" name="p3" class="autotab" tabindex="2" size="3" maxlength="4" onkeyup="NextBox(this,'document.telephone.p1')">
    Last edited by javajeff; 12-20-2007 at 04:22 PM.

  • #6
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,622
    Thanks
    0
    Thanked 645 Times in 635 Posts
    I'd suggest resizing the fields so that phone numbers will actually fit in them. Only a few countries use numbers with that particular format.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by felgall View Post
    I'd suggest resizing the fields so that phone numbers will actually fit in them. Only a few countries use numbers with that particular format.
    Most telephone number validation is a waste of time (as here - there is nothing to require that the full number of digits is entered into each box).

    The really is that the greatest risk is that the phone number as entered is simply wrong (mis-typed). In fact I refuse to give out my phone number, and where this is required field invariably put down some made-up rubbish.

    And as felgall says, requiring a format valid only in certain countries prevents users from other countries from completing the form (correctly).

  • #8
    New Coder
    Join Date
    Dec 2007
    Posts
    13
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The next thing I did was to reverse this process to populate the value fields of inputs on another checkout page. Everything is working and I thank everyone for their help...especially JordanW for the code example.
    Last edited by javajeff; 12-21-2007 at 04:20 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •