...

View Full Version : Need a simple script for phone number form



javajeff
12-13-2007, 03:42 PM
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.

JordanW
12-13-2007, 07:35 PM
Simple (With Validation):


<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>

felgall
12-13-2007, 08:35 PM
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.

javajeff
12-14-2007, 03:36 PM
Thank you very much. I am going to try to implement this with our proprietary engine tags.

javajeff
12-20-2007, 03:14 PM
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')">

felgall
12-20-2007, 07:41 PM
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.

Philip M
12-20-2007, 08:03 PM
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).

javajeff
12-20-2007, 09:53 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum