I am required to complete an assignment that shows basic Javascript form processing. The objective is to have a "details.html" page which checks that all input fields are valid (e.g. Names are all text). I have tried to complete both documents but they just don't seem to be linking correctly:
Nothing is triggering the "validateForm()" function, and any input just passes through on submission, what have I done wrong?
function validateForm() {
var firstname = document.getElementById("fName").value;
var lastname = document.getElementById("lName").value;
var email = document.getElementById("email").value;
var address = document.getElementById("address").value;
var postCode = document.getElementById("pCode").value;
var accepted = document.getElementById("accept").checked;
var allLetters = /^[a-zA-z]+$/i;
var allNumbers = /^[0-9]+$/;
var validEmail = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
var validAddress = new RegExp(allNumbers.source + "|" + allLetters.source);
if (address.match(validAddress) && firstname.match(allLetters) && lastname.match(allLetters) && email.match(validEmail) && address != "" && postCode.match(allNumbers) && accepted) {
return true;
} else {
window.alert("Error! Invalid input in form. Please try again.");
return false;
}
}
.header {
background-color: tomato;
color: white;
padding: 2px;
}
.focusPage {
width: 70%;
margin-left: auto;
margin-right: auto;
background-color: lightgrey;
min-height: 600px;
height: 600px;
height: auto !important;
}
.userDetails {
width: 90%;
margin-left: auto;
margin-right: auto;
background-color: white;
border: 2px solid black;
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
padding-top: 20px;
padding-bottom: 20px;
}
.inputs {
float: right;
direction: ltr;
margin-right: 5px;
}
.acceptTerms {
font-size: 15px;
font-family: "Times New Roman", Times, serif;
}
p {
font-size: 20px;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.thePage {
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="someName" content="someContent">
<title> Home </title>
<script type="text/javascript" src="myScripts.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body class="thePage">
<div>
<div class="focusPage">
<div class="header">
<h1>Welcome user!</h1>
</div>
<p>This form will allow you to enter your personal details for storage in our database.</p>
<p>Be sure to read our User Agreement before submitting your details</p>
<ul class="userDetails">
<form class="userForm" onsubmit="validateForm()" method="post">
<li><label for="inputNames" required>First Name - </label>
<label for="inputs"><input type="text" class="inputs" id="fname" name="fname"></label></li>
<li><label for="inputNames">Last Name - </label>
<label for="inputs" required><input type="text" class="inputs" id="lname" name="lname"></li>
<li><label for="inputNames">Email - </label>
<label for="inputs" required><input type="email" class="inputs" id="email" name="email"></li>
<li><label for="inputNames">Address number - </label>
<label for="inputs" required><input type="text" class="inputs" id="address" name="address"></li>
<li><label for="inputNames">Post code - </label>
<label for="inputs" required><input type="text" class="inputs" id="pCode" name="pCode"></li>
<li><label for="inputNames">Additional Detail - </label></li>
<textarea rows="5" cols="50" class="textfield" placeholder="Add detail here..."></textarea>
<div class="agreement">
<input type="checkbox"> <label class="acceptTerms" id="accept">I Accept the User Agreement</label>
</div>
<input type="submit" value="Submit">
</form>
</ul>
</div>
</div>
</body>
</html>
JS: you have mentioned wrong IDs, remember they are case sensitive.
var firstname = document.getElementById("fname").value;
var lastname = document.getElementById("lname").value;
HTML: You have mentioned required in label tag which won't work, add it to input tag.
<form class="userForm" onsubmit="validateForm()">
<li><label for="inputNames" >First Name - </label>
<label for="inputs"><input type="text" class="inputs" id="fname" name="fname" required></label></li>
<li><label for="inputNames">Last Name - </label>
<label for="inputs" ><input type="text" class="inputs" id="lname" name="lname" required></li>
<li><label for="inputNames">Email - </label>
<label for="inputs" ><input type="email" class="inputs" id="email" name="email" required></li>
<li><label for="inputNames">Address number - </label>
<label for="inputs" ><input type="text" class="inputs" id="address" name="address" required></li>
<li><label for="inputNames">Post code - </label>
<label for="inputs" ><input type="text" class="inputs" id="pCode" name="pCode" required></li>
<li><label for="inputNames">Additional Detail - </label></li>
<textarea rows="5" cols="50" class="textfield" placeholder="Add detail here..."></textarea>
<div class="agreement">
<input type="checkbox" required> <label class="acceptTerms" id="accept">I Accept the User Agreement</label>
</div>
<input type="submit" value="Submit">
</form>
Related
<style>
label.heading {
font-weight: 600;
}
.payment-form {
width: 300px;
margin-left: auto;
margin-right: auto;
padding: 10px;
border: 1px #333 solid;
}
</style>
</head>
<body style="text-align: center; margin-top: 100px;">
<form action="payment.php" method="post" class="payment-form">
<label for="packgprice" class="heading">$80 </label><br>
Qunatity :<input type="text" name="bikes1" id="bikes1"><br><br>
<label for="packgprice" class="heading">$90 </label><br>
Qunatity :<input type="text" name="bikes2" id="bikes2"><br><br>
<label for="packgprice" class="heading">$100</label><br>
Qunatity :<input type="text" name="bikes3" id="bikes3"><br><br>
<label for="packgprice" class="heading">$110</label><br>
Qunatity :<input type="text" name="bikes4" id="bikes4"><br><br>
<label for="firstName" class="heading">First Name</label><br>
<input type="text" name="firstName" id="firstName"><br><br>
<label for="lastName" class="heading">Last Name</label><br>
<input type="text" name="lastName" id="lastName"><br><br>
<label for="amount" class="heading">Amount (USD)</label><br>
<input type="text" name="amount" id="amount"><br><br>
<label for="email" class="heading">Email Id</label><br>
<input type="text" name="email" id="email"><br><br>
<div id="dropin-container"></div>
<br><br>
<button type="submit">Pay with BrainTree</button>
</form>
</body>
I need to show amount filed as
(quntity1*price1)+(quntity2*price2)+(quntity3*price3)+(quntity4*price4)
by javascript or jquery withot page refresh
Please someone help for this issue
Replace this code
<label for="packgprice" class="heading">$80 </label><br>
Qunatity :<input type="text" name="bikes1" id="bikes1"><br><br>
<label for="packgprice" class="heading">$90 </label><br>
Qunatity :<input type="text" name="bikes2" id="bikes2"><br><br>
<label for="packgprice" class="heading">$100</label><br>
Qunatity :<input type="text" name="bikes3" id="bikes3"><br><br>
<label for="packgprice" class="heading">$110</label><br>
Qunatity :<input type="text" name="bikes4" id="bikes4"><br><br>
with:
<label for="packgprice" class="heading price-1" data-price="80">$80 </label><br>
Qunatity :<input type="text" class="trigger" name="bikes1" id="bikes1"><br><br>
<label for="packgprice" class="heading price-2" data-price="90">$90 </label><br>
Qunatity :<input type="text" class="trigger" name="bikes2" id="bikes2"><br><br>
<label for="packgprice" class="heading price-3" data-price="100">$100</label><br>
Qunatity :<input type="text" class="trigger" name="bikes3" id="bikes3"><br><br>
<label for="packgprice" class="heading price-4" data-price="110">$110</label><br>
Qunatity :<input type="text" class="trigger" name="bikes4" id="bikes4"><br><br>
and javascript for your task:
<script>
$(document).ready(function(){
$(".trigger").on("keyup", function(){
var amount_price = 0;
for(var i = 1; i <= 4; i++){
if(parseInt($("#bikes" + i).val()) > 0){
amount_price = parseInt(amount_price) + parseInt($(".price-" + i).attr("data-price")) * parseInt($("#bikes" + i).val());
}
}
$("#amount").val(amount_price);
});
});
</script>
Validate the radio button list by adding a for loop???
I cannot figure out how to create a for loop to validate my subscriptions for the HTML radio buttons; Free, Basic, Premium.
Line 39 for JS problem.
Line 128 for HTML reference.
See snippet below:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>javascript form validation</title>
<script type="text/javascript">
function checkme() {
//alert("function fires");
var error = "";
if(document.getElementById('myname').value == "") {
error = "Please enter your name.\n";
}
if(document.getElementById('state').selectedIndex==0) {
error += "Please choose a state.\n";
}
if(document.getElementById('address').value== "") {
error += "Please complete address.\n";
}
if(document.getElementById('city').value== "") {
error += "Please complete city.\n";
}
if(document.getElementById('zip').value== "") {
error += "Please complete address.\n";
}
if(document.getElementById('phone').value== "") {
error += "Please enter phone number.\n";
}
if(document.getElementById('email').value== "") {
error += "Please enter email.\n";
}
if(document.getElementById('comments').value== "") {
error += "Please enter comments.\n";
}
if(!document.getElementById('radio')!=null){
error += "Please select subscription.\n";
// ????
}
if(!document.getElementById('terms')!=null){
error += "Please accept terms.\n";
}
// Do not add logic below this comment
if(error=="") {
return true;
}
else {
alert(error);
return false;
}
}
</script>
<!-- styles for form -->
<style type="text/css">
fieldset {width: 400px;}
/* zero ul and li */
fieldset ul, fieldset li{
border:0; margin:0; padding:0; list-style-type:none;
}
/* li is a block level element. give margin bottom for spacing. */
fieldset li
{
margin-bottom: 10px;
}
/* label is a inline element. convert to inline block to prevent wrapping to next line but still apply width. */
fieldset label{
width:140px;
display: inline-block;
}
/* set radio button labels back to default */
label.radios
{
width:100%;
display: inline;
}
/* take lblnotes out of document flow, aligns to top */
#lblnotes {float: left;}
</style>
</head>
<body>
<fieldset>
<legend>Sign-up Form</legend>
<form id="the_form" name="the_form" action="FormProcessor.html" method="get" onsubmit="return checkme();">
<ul>
<li><label for="myname">Name</label>
<input type="text" name="myname" id="myname" size="30" />
</li>
<li><label for="address">Street Address</label>
<input type="text" name="address" id="address" size="30" />
</li>
<li><label for="city">City</label>
<input type="text" name="city" id="city" size="30" />
</li>
<li><label for="state">State</label>
<select name="state" id="state">
<option value="none">choose a state</option>
<option value="MN">Minnesota</option>
<option value="WI">Wisconsin</option>
</select>
</li>
<li><label for="zip">Zip</label>
<input type="text" name="zip" id="zip" size="30" />
</li>
<li><label for="phone">Phone Number</label>
<input type="text" name="phone" id="phone" size="30" />
</li>
<li><label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</li>
<li><label for="comments" id="lblnotes">Commments</label>
<textarea name="comments" id="comments" cols="20" rows="5"></textarea>
</li>
<li><label>Subscription</label> <label for="free" class="radios">Free</label>
<input type="radio" name="subscription" id="free"/>
<label for="basic" class="radios">Basic</label>
<input type="radio" name="subscription" id="basic"/>
<label for="premium" class="radios">Premium</label>
<input type="radio" name="subscription" id="premium"/>
</li>
<li>
<label for="terms">Do you agree to terms?</label>
<input type="checkbox" name="terms" id="terms"/>
</li>
<li><label for="submit"> </label>
<button type="submit" id="submit">Send</button> </li>
</ul>
</form>
</fieldset>
</body>
</html>
You may use the name of the radio button instead:
var radiobuttons = document.getElementsByName(radioButtonName);
for(var opt in radiobuttons ) {
//validate...
}
Simplest approach would be to set required attribute at input, textarea, select elements
var elems = document.forms["the_form"]
.querySelectorAll("input:not([type=submit]), select, textarea");
for (var i = 0; i < elems.length; i++) {
elems[i].setAttribute("required", true)
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>javascript form validation</title>
<script type="text/javascript">
</script>
<!-- styles for form -->
<style type="text/css">
fieldset {width: 400px;}
/* zero ul and li */
fieldset ul, fieldset li{
border:0; margin:0; padding:0; list-style-type:none;
}
/* li is a block level element. give margin bottom for spacing. */
fieldset li
{
margin-bottom: 10px;
}
/* label is a inline element. convert to inline block to prevent wrapping to next line but still apply width. */
fieldset label{
width:140px;
display: inline-block;
}
/* set radio button labels back to default */
label.radios
{
width:100%;
display: inline;
}
/* take lblnotes out of document flow, aligns to top */
#lblnotes {float: left;}
</style>
</head>
<body>
<fieldset>
<legend>Sign-up Form</legend>
<form id="the_form" name="the_form" action="FormProcessor.html" method="get" onsubmit="return checkme();">
<ul>
<li><label for="myname">Name</label>
<input type="text" name="myname" id="myname" size="30" />
</li>
<li><label for="address">Street Address</label>
<input type="text" name="address" id="address" size="30" />
</li>
<li><label for="city">City</label>
<input type="text" name="city" id="city" size="30" />
</li>
<li><label for="state">State</label>
<select name="state" id="state">
<option value="none">choose a state</option>
<option value="MN">Minnesota</option>
<option value="WI">Wisconsin</option>
</select>
</li>
<li><label for="zip">Zip</label>
<input type="text" name="zip" id="zip" size="30" />
</li>
<li><label for="phone">Phone Number</label>
<input type="text" name="phone" id="phone" size="30" />
</li>
<li><label for="email">Email</label>
<input type="text" name="email" id="email" size="30" />
</li>
<li><label for="comments" id="lblnotes">Commments</label>
<textarea name="comments" id="comments" cols="20" rows="5"></textarea>
</li>
<li><label>Subscription</label> <label for="free" class="radios">Free</label>
<input type="radio" name="subscription" id="free"/>
<label for="basic" class="radios">Basic</label>
<input type="radio" name="subscription" id="basic"/>
<label for="premium" class="radios">Premium</label>
<input type="radio" name="subscription" id="premium"/>
</li>
<li>
<label for="terms">Do you agree to terms?</label>
<input type="checkbox" name="terms" id="terms"/>
</li>
<li><label for="submit"> </label>
<button type="submit" id="submit">Send</button> </li>
</ul>
</form>
</fieldset>
</body>
</html>
You can iterate over the radio buttons with the name subscriptions to find which if any is checked. Check the sample here (getRadioVal function): http://www.dyn-web.com/tutorials/forms/radio/get-selected.php
Here is my html code and css code but i am failed to format this code all textboxes should align vertically but its not giving me proper result.Can someone please help me to correct this code:
<div id="wrapper" class="wrapperClass">
<fieldset>
<legend class="regLagendClass">Registration Form</legend>
<form id="registrationForm" method="Post" action="https://www.google.com.pk/">
<div class="divClass">
<label for="firstName" class="labelClass">First Name:</label>
<input type="text" name="fName" class="textboxClass" id="firstName" placeholder="Your First Name"/>
</div>
<div class="divClass">
<label for="lastName" class="labelClass">Last Name:</label>
<input type="text" name="lName" id="lastName" class="textboxClass" placeholder="Your Last Name"/><br>
</div>
<div class="divClass">
<label for="userName" class="labelClass">User Name:</label><br>
<input type="text" name="userName" id="userName" class="textboxClass" placeholder="Your User Name" required/><br>
</div>
<div class="divClass">
<label for="password" class="labelClass">Password:</label><br>
<input type="password" id="password" name="password" class="textboxClass" placeholder="Type Password" required/><br>
</div>
<div class="divClass">
<label for="cPassword" class="labelClass">Confirm Password:</label><br>
<input type="password" id="cPassword" name="cPassword" class="textboxClass" placeholder="Retype Password"/><br>
</div>
<div class="divClass">
<label for="gender" class="labelClass">Choose Gender:</label>
<select name="gender" class="textboxClass">
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="divClass">
<label class="labelClass" for="dob">Date of Birth:</label><br>
<input type="datetime" id="dob" class="textboxClass" placeholder="Your Date of Birth"/><br>
</div>
<div class="divClass">
<label for="country" class="labelClass">Country:</label><br>
<input type="text" id="country" class="textboxClass"/><br>
</div>
<div class="divClass">
<input type="submit" value="Sign Up">
</div>
</form>
</fieldset>
</div>
CSS:
.wrapperClass
{
width:650px;
height: 700px;
margin-left: 300px;
margin-right: 300px;
}
.divClass
{
margin-top: 10px;
margin-left: 5px;
margin-right: 5px;
}
.labelClass
{
width: 75px;
display: inline;
}
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
margin-left: 100px;
display: inline;
}
My code should work as this image :
Check this out http://jsfiddle.net/kabeer182010/gd4Xe/.
If you just replace 'display: inline' with 'display: inline-block' and remove all <br> tags this works fine.
display: inline
causes your element to become wrappable. The width and height properties are disregarded in this context. If you do want to use them, you basically want a boxed display. You can either use block (which can not flow next to eachother) or inline-block (which can).
So basically change your last 2 CSS classes to:
.labelClass
{
width: 75px;
display: inline-block;
}
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
margin-left: 100px;
display: inline-block;
}
Give .textboxClass a float right
.textboxClass
{
padding-left: 3px;
width:300px;
height:20px;
display: inline;
float:right;
}
Should do the trick
just need to disable the checkboxes on page load and enable them as the user selects a file to upload. For example, image is selected by user to upload for desktop so the sizes for desktop get enabled. Probably with javascript.
<html>
<head>
<title>Wallpaper Uploading Script</title>
<style type="text/css">
.formatting{
font-family: Arial;
font-size: .8em;
}
label{
display: block;
float: left;
width: 150px;
padding: 0 0px;
margin: 0 0px 0;
text-align: right;
}
form input, form textarea{
margin: 2px 0 2px 2px;
}
.checkbox{
text-align: left;
display: block;
padding: 2px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body class="formatting">
<p>Select a file to Upload: </p>
<form action="../php/get_uploaded_wall.php" method="POST" enctype="multipart/form-data">
<fieldset>
<label for="wall_name">Wall Name:</label>
<input type="text" name="wall_name" size="50" /><br />
<label for="thumbnail_path">Thumbnail path:</label>
<input type="file" name="thumbnail_path" size="100" /><br />
<label for="desktop_path">Desktop path:</label>
<input id="desktop_path" type="file" name="desktop_path" size="100" /><br />
<label for="phone_path">Phone path:</label>
<input type="file" name="phone_path" size="100" /><br />
<label for="tablet_path">Tablet path:</label>
<input type="file" name="tablet_path" size="100" /><br />
<label for="desktop_dimension_id">Desktop dimensions:</label>
<label class="checkbox" id="desktop_checkbox">
<input type="checkbox" name="1366x768"> 1366x768<br />
<input type="checkbox" name="1280x800"> 1280x800<br />
<input type="checkbox" name="1920x1080"> 1920x1080<br />
<span></span>
</label>
<label for="phone_dimensions_id">Phone dimensions:</label>
<label class="checkbox" id="phone_checkbox">
<input type="checkbox" name="640x960"> 640x960<br />
<input type="checkbox" name="640x1136"> 640x1136<br />
<input type="checkbox" name="960x720"> 960x720<br />
</label>
<label for="tablet_dimensions_id" id="tablet_checkbox">Tablet dimensions:</label>
<label class="checkbox">
<input type="checkbox" name="1024x768"> 1024x768<br />
<input type="checkbox" name="2048x1536"> 2048x1536<br />
</label>
</fieldset>
<br />
<fieldset>
<input type="submit" value="Upload Wall" />
<input type="reset" value="Clear" />
</fieldset>
</form>
</body>
</html>
Here is my solution. You can view it here in Jfiddle.
The javascript I used relies on jQuery. You can see it below:
$(window).ready( function () {
$('.desktopCB').attr('disabled', '');
$('.phoneD').attr('disabled', '');
$('.tabletD').attr('disabled', '');
});
$('#desktop_path').on('change', function () {
$('.desktopCB').removeAttr('disabled');
});
$('input[name=phone_path]').on('change', function () {
$('.phoneD').removeAttr('disabled');
});
$('input[name=tablet_path]').on('change', function () {
$('.tabletD').removeAttr('disabled');
});
Aaargh. I've written a simple HTML page with a form on it to take in a phone number. I put in a Javascript function that makes the focus jump to the next form box once it's full. Everything seems perfect.
However, for some reason it is not working. I can't see why since I've created a nearly identical file with only the form and the function and it works! So something in this particular file is blocking it but after 30 minutes of tinkering I can't figure out what.
<html>
<head>
<script type="text/javascript">
function moveToNext(curr, next) {
if(curr.value.length == curr.getAttribute("maxlength"))
next.focus();
}
</script>
<title> Enter Phone Number </title>
<style type="text/css">
#content {
background:url(images/content-bg-rpt.gif) repeat;
margin: 0 auto;
height: 300px;
width: 500px;
}
#formArea {
margin-top: 50px;
width: 250px;
margin-left: auto;
margin-right: auto;
}
#submit {
position: relative;
}
.formInput { /* These are the input styles used in forms */
background: #f7f7f7 url(../img/input.gif) repeat-x;
border: 1px solid #d0d0d0;
margin-bottom: 6px;
color: #5f6c70;
font-size: 16px;
font-weight: bold;
padding-top: 11px;
padding-bottom: 11px;
padding-left: 11px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<div id="formArea">
<form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET">
<input onkeyup="moveToNext(this, document.enterPhone.d345.formInput))" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.enterPhone.d345))" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input>
<input type="text" class="formInput" maxlength="4" size="4" name="d6789"></input>
<input id="submit" value="Enter" type="submit"></input>
</form>
</div>
</div>
</div>
</body>
</html>
Two things:
For each opening parenthesis, you need exactly one closing parenthesis. The onkeyup attribute of your inputs has two closing parentheses and one opening one.
Pass the HTML element directly, not .formInput.
This solves both issues for me:
<input onkeyup="moveToNext(this, document.enterPhone.d345)" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.enterPhone.d6789)" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input>
Fixed your code with this jsFiddle example
HTML
<div id="container">
<div id="content">
<div id="formArea">
<form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET">
<input onkeyup="moveToNext(this, document.getElementsByName('d345'))" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.getElementsByName('d6789'))" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input>
<input type="text" class="formInput" maxlength="4" size="4" name="d6789"></input>
<input id="submit" value="Enter" type="submit"></input>
</form>
</div>
</div>
</div>
JavaScript
function moveToNext(curr, next) {
if (curr.value.length == parseInt(curr.getAttribute("maxlength"), 10)) next[0].focus();
}
In your JS you were making a comparison between an integer and a string (curr.value.length == curr.getAttribute("maxlength")). In your HTML you weren't selecting the element properly with document.enterPhone.d345.formInput.
Try giving this a shot:
JS
function moveToNext(curr, next) {
if (curr.value.length >= curr.maxLength) {
document.getElementById(next).focus();
}
}
HTML
<form name="enterPhone" id="enterPhone" action="phoneresult.php" method="GET">
<input onkeyup="moveToNext(this, 'd345')" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"/>
<input onkeyup="moveToNext(this, 'd6789')" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"/>
<input type="text" class="formInput" maxlength="4" size="4" name="d6789" id="d6789"/>
<input id="submit" value="Enter" type="submit"/>
</form>
http://jsfiddle.net/JZxPR/
try this, replace three input tags with the code below:
<input onkeyup="moveToNext(this, document.enterPhone.d345)" type="text" class="formInput" maxlength="3" size="3" name="d012" id="d012"></input>
<input onkeyup="moveToNext(this, document.enterPhone.d6789)" type="text" name="d345" class="formInput" maxlength="3" size="3" id="d345"></input>
<input type="text" class="formInput" maxlength="4" size="4" name="d6789" id="d6789"></input>