I am working on a project where I need connect a MySQL database to code I have written. The structure of the database itself is going to be very simple. However, before I even approach trying to setup my planned database, I have decided to create a database that I will use temporarily just to see if I can correctly send a POST request to it. Based on my attempts, I am clearly unable to do so. I get the following error via the Firefox Inspector:
NetworkError: A network error occurred. shipviewer.js:38
sendAJAX file:///C:/Users/laymmi/Documents/Ship%20Viewer/shipviewer.js:38:5
updateDatabase file:///C:/Users/laymmi/Documents/Ship%20Viewer/shipviewer.js:12:2
onclick file:///C:/Users/laymmi/Documents/Ship%20Viewer/shipviewer.html:1:1
I really do not understand the very generic network error from Firefox; which makes it difficult to diagnosis the error. However, I can reasonably discern that my issue comes from trying to send data via my POST request in shipviewer.js to the test MySQL database located on my laptop. Now whether this because I am sending data in an incorrect format, using the wrong URL (in this case it is just pointing to localhost:3306 rather than a server located on the Internet), or a combination of the two, I do not know. My server is definitely up and running on port 3306.
Does anyone have an idea of what the issue(s) may be? I am sure it is a beginner’s mistake as I am just starting to get my feet wet regarding databases.
shipviewer.html:
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Ship Viewer v0.0.6</title>
<link rel="stylesheet" type="text/css" href="shipviewer.css">
</head>
<body>
<h1>Ship Viewer</h1>
<!-- All software and build information regarding the ships will displayed here-->
<div id="main">
<div id="ship0" class="shipContainer" >
<div class="shipName"><h3>Name of Ship!</h3></div>
<div class="shipHeader" >
<span class="version">Version</span>
<span class="build">Build</span>
</div>
<div class="holder flex">
<!-- The name of the pieces of software will be on the left half of a shipContainer -->
<div class="leftColumn flex">
<div class="alignRight">
<p class="columnFormatting">INFO_1</p>
<p class="columnFormatting">INFO_2</p>
<p class="columnFormatting">INFO_3</p>
<p class="columnFormatting">INFO_4</p>
<p class="columnFormatting">INFO_5</p>
<p class="columnFormatting">INFO_6</p>
<p class="columnFormatting">INFO_7</p>
<p class="columnFormatting">INFO_8</p>
<p class="columnFormatting">INFO_9</p>
<p class="columnFormatting">INFO_10</p>
</div>
</div>
<!-- The version and build numbers for each piece of software will be on the right half of a shipContainer -->
<div class="rightColumn flex">
<div class="versionName">
<div class="addMarginLeft">
<div id="versionName0Ship0">50.87.1</div> <input type="text" id="versionName0Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName1Ship0">50.87.1</div> <input type="text" id="versionName1Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName2Ship0">50.87.1</div> <input type="text" id="versionName2Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName3Ship0">50.87.1</div> <input type="text" id="versionName3Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName4Ship0">50.87.1</div> <input type="text" id="versionName4Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName5Ship0">50.87.1</div> <input type="text" id="versionName5Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName6Ship0">50.87.1</div> <input type="text" id="versionName6Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName7Ship0">50.87.1</div> <input type="text" id="versionName7Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName8Ship0">50.87.1</div> <input type="text" id="versionName8Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName9Ship0">50.87.1</div> <input type="text" id="versionName9Ship0Textbox" class="invisible" maxlength="10" size="10" value="test...">
</div>
</div>
<div class="buildName">
<div class="addMarginLeft">
<div id="buildName0Ship0">1204</div> <input type="text" id="buildName0Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName1Ship0">1204</div> <input type="text" id="buildName1Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName2Ship0">1204</div> <input type="text" id="buildName2Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName3Ship0">1204</div> <input type="text" id="buildName3Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName4Ship0">1204</div> <input type="text" id="buildName4Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName5Ship0">1204</div> <input type="text" id="buildName5Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName6Ship0">1204</div> <input type="text" id="buildName6Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName7Ship0">1204</div> <input type="text" id="buildName7Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName8Ship0">1204</div> <input type="text" id="buildName8Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName9Ship0">1204</div> <input type="text" id="buildName9Ship0Textbox" class="invisible" maxlength="4" size="4" value="test">
</div>
</div>
</div>
<span id="returnedTestInfo" >Information...?</span>
</div>
<button class="mainButton" id="editButton0" onclick="toggleShipViewerInformation('editButton0', 'updateButton0', 'cancelButton0', 0)">Edit</button>
<button class="mainButton invisible" id="updateButton0" onclick="updateDatabase('Can you see this?')">Update</button>
<button class="mainButton invisible" id="cancelButton0" onclick="toggleShipViewerInformation('editButton0', 'updateButton0', 'cancelButton0', 0)">Cancel</button>
</div>
<div id="ship1" class="shipContainer" >
<div class="shipName"><h3>Name of Ship!</h3></div>
<div class="shipHeader" >
<span class="version">Version</span>
<span class="build">Build</span>
</div>
<div class="holder flex">
<!-- The name of the pieces of software will be on the left half of a shipContainer -->
<div class="leftColumn flex">
<div class="alignRight">
<p class="columnFormatting">INFO_1</p>
<p class="columnFormatting">INFO_2</p>
<p class="columnFormatting">INFO_3</p>
<p class="columnFormatting">INFO_4</p>
<p class="columnFormatting">INFO_5</p>
<p class="columnFormatting">INFO_6</p>
<p class="columnFormatting">INFO_7</p>
<p class="columnFormatting">INFO_8</p>
<p class="columnFormatting">INFO_9</p>
<p class="columnFormatting">INFO_10</p>
</div>
</div>
<!-- The version and build numbers for each piece of software will be on the right half of a shipContainer -->
<div class="rightColumn flex">
<div class="versionName">
<div class="addMarginLeft">
<div id="versionName0Ship1">50.87.1</div> <input type="text" id="versionName0Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName1Ship1">50.87.1</div> <input type="text" id="versionName1Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName2Ship1">50.87.1</div> <input type="text" id="versionName2Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName3Ship1">50.87.1</div> <input type="text" id="versionName3Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName4Ship1">50.87.1</div> <input type="text" id="versionName4Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName5Ship1">50.87.1</div> <input type="text" id="versionName5Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName6Ship1">50.87.1</div> <input type="text" id="versionName6Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName7Ship1">50.87.1</div> <input type="text" id="versionName7Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName8Ship1">50.87.1</div> <input type="text" id="versionName8Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName9Ship1">50.87.1</div> <input type="text" id="versionName9Ship1Textbox" class="invisible" maxlength="10" size="10" value="test...">
</div>
</div>
<div class="buildName">
<div class="addMarginLeft">
<div id="buildName0Ship1">1204</div> <input type="text" id="buildName0Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName1Ship1">1204</div> <input type="text" id="buildName1Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName2Ship1">1204</div> <input type="text" id="buildName2Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName3Ship1">1204</div> <input type="text" id="buildName3Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName4Ship1">1204</div> <input type="text" id="buildName4Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName5Ship1">1204</div> <input type="text" id="buildName5Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName6Ship1">1204</div> <input type="text" id="buildName6Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName7Ship1">1204</div> <input type="text" id="buildName7Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName8Ship1">1204</div> <input type="text" id="buildName8Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName9Ship1">1204</div> <input type="text" id="buildName9Ship1Textbox" class="invisible" maxlength="4" size="4" value="test">
</div>
</div>
</div>
</div>
<button class="mainButton" id="editButton1" onclick="toggleShipViewerInformation('editButton1', 'updateButton1', 'cancelButton1', 1)">Edit</button>
<button class="mainButton invisible" id="updateButton1">Update</button>
<button class="mainButton invisible" id="cancelButton1" onclick="toggleShipViewerInformation('editButton1', 'updateButton1', 'cancelButton1', 1)">Cancel</button>
</div>
<div id="ship2" class="shipContainer" >
<div class="shipName"><h3>Name of Ship!</h3></div>
<div class="shipHeader" >
<span class="version">Version</span>
<span class="build">Build</span>
</div>
<div class="holder flex">
<!-- The name of the pieces of software will be on the left half of a shipContainer -->
<div class="leftColumn flex">
<div class="alignRight">
<p class="columnFormatting">INFO_1</p>
<p class="columnFormatting">INFO_2</p>
<p class="columnFormatting">INFO_3</p>
<p class="columnFormatting">INFO_4</p>
<p class="columnFormatting">INFO_5</p>
<p class="columnFormatting">INFO_6</p>
<p class="columnFormatting">INFO_7</p>
<p class="columnFormatting">INFO_8</p>
<p class="columnFormatting">INFO_9</p>
<p class="columnFormatting">INFO_10</p>
</div>
</div>
<!-- The version and build numbers for each piece of software will be on the right half of a shipContainer -->
<div class="rightColumn flex">
<div class="versionName">
<div class="addMarginLeft">
<div id="versionName0Ship2">50.87.1</div> <input type="text" id="versionName0Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName1Ship2">50.87.1</div> <input type="text" id="versionName1Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName2Ship2">50.87.1</div> <input type="text" id="versionName2Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName3Ship2">50.87.1</div> <input type="text" id="versionName3Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName4Ship2">50.87.1</div> <input type="text" id="versionName4Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName5Ship2">50.87.1</div> <input type="text" id="versionName5Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName6Ship2">50.87.1</div> <input type="text" id="versionName6Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName7Ship2">50.87.1</div> <input type="text" id="versionName7Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName8Ship2">50.87.1</div> <input type="text" id="versionName8Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
<div id="versionName9Ship2">50.87.1</div> <input type="text" id="versionName9Ship2Textbox" class="invisible" maxlength="10" size="10" value="test...">
</div>
</div>
<div class="buildName">
<div class="addMarginLeft">
<div id="buildName0Ship2">1204</div> <input type="text" id="buildName0Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName1Ship2">1204</div> <input type="text" id="buildName1Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName2Ship2">1204</div> <input type="text" id="buildName2Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName3Ship2">1204</div> <input type="text" id="buildName3Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName4Ship2">1204</div> <input type="text" id="buildName4Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName5Ship2">1204</div> <input type="text" id="buildName5Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName6Ship2">1204</div> <input type="text" id="buildName6Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName7Ship2">1204</div> <input type="text" id="buildName7Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName8Ship2">1204</div> <input type="text" id="buildName8Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
<div id="buildName9Ship2">1204</div> <input type="text" id="buildName9Ship2Textbox" class="invisible" maxlength="4" size="4" value="test">
</div>
</div>
</div>
</div>
<button class="mainButton" id="editButton2" onclick="toggleShipViewerInformation('editButton2', 'updateButton2', 'cancelButton2', 2)">Edit</button>
<button class="mainButton invisible" id="updateButton2">Update</button>
<button class="mainButton invisible" id="cancelButton2" onclick="toggleShipViewerInformation('editButton2', 'updateButton2', 'cancelButton2', 2)">Cancel</button>
</div>
</div>
<script src="shipviewer.js"></script>
</body>
<footer>
</footer>
</html>
shipviewer.js:
/*********************************************************************************************************************
This function will POST user given information to the database; thereby updating it.
Parameters:
url - the server (file) location
data - the information being sent/requested
*********************************************************************************************************************/
function updateDatabase(data){
var url = "localhost:3306"; //the URL for sending info?
sendAJAX("POST", url, data);
}
/*********************************************************************************************************************
This function sends AJAX requests
Parameters:
requestType - a string that is a SQL request type (GET, POST, etc.)
url - the server (file) location
data - the information being sent/requested
*********************************************************************************************************************/
function sendAJAX(requestType, url, data) {
var req = new XMLHttpRequest(); //XMLHttpRequest object is required for AJAX requests
// req.addEventListener('error', function(err) {
// alert(err.message);
//}, false);
req.open(requestType, url, true); //Initializes the asynchronous request
req.onreadystatechange = function() { //Defines a function to be called when the readyState property changes
if(this.readyState === 4 && this.status === 200) { //XMLHttpRequest code 4 == request finished and response is ready; HTTP status code 200 == OK
document.getElementById("returnedTestInfo").innerHTML = this.responseText; //Returns the response data (from the server) as a string
}//else if(this.readyState === 4) { //request finished and response is ready, but some error has occurred
//alert(this.responseText);
//}
};
req.send(data); //Sends the request
}
/*
function sendAJAX(requestType, url, data, contentType,onSuccess) {
var req = new XMLHttpRequest(); //XMLHttpRequest object is required for AJAX requests
req.addEventListener('error', function(err) {
alert(err.message);
}, false);
req.open(requestType, url); //Initializes the request
req.onreadystatechange = function() { //Defines a function to be called when the readyState property changes
if(this.readyState === 4 && this.status === 200) { //XMLHttpRequest code 4 == request finished and response is ready; HTTP status code 200 == OK
onSuccess(this.responseText); //Returns the response data (from the server) as a string
} else if(this.readyState === 4) {
alert(this.responseText);
}
};
if(contentType) {
req.setRequestHeader("Content-type", contentType);
}
req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
req.send(data); //Sends the request
}
*/
//req.open("POST", the_server_(file)_location, true);
//req.send();
/*********************************************************************************************************************
This function toggles between displaying information and allowing the user to edit the information via the Edit or
Cancel buttons.
Parameters:
elementIdEdit - element ID of the Edit button
elementIdUpdate - element ID of the Update button
elementIdCancel - element ID of the Cancel button
shipNum - an int that corresponds to a particular ship. Ex: "ship0" == 0
*********************************************************************************************************************/
function toggleShipViewerInformation(elementIdEdit, elementIdUpdate, elementIdCancel, shipNum){
var versionName = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
var buildName = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
var versionNameTextbox = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
var buildNameTextbox = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0"];
//Assigning the vars in the array with element DOM information.
for(var count = 0; count < versionName.length; count++){
versionName[count] = document.getElementById("versionName"+count+"Ship"+shipNum);
buildName[count] = document.getElementById("buildName"+count+"Ship"+shipNum);
versionNameTextbox[count] = document.getElementById("versionName"+count+"Ship"+shipNum+"Textbox");
buildNameTextbox[count] = document.getElementById("buildName"+count+"Ship"+shipNum+"Textbox");
}
//Toggling the version and build information from read-only text to editable textboxes
for(var count = 0; count < versionName.length; count++){
toggleClass(versionName[count], "invisible");
toggleClass(buildName[count], "invisible");
toggleClass(versionNameTextbox[count], "invisible");
toggleClass(buildNameTextbox[count], "invisible");
}
toggleButtons(elementIdEdit, elementIdUpdate, elementIdCancel);
}
/*********************************************************************************************************************
This function calls toggleClass() to show/hide the appropriate set of buttons when the user clicks on Edit or Cancel
*********************************************************************************************************************/
function toggleButtons(elementIdEdit, elementIdUpdate, elementIdCancel) {
var edit = document.getElementById(elementIdEdit);
var update = document.getElementById(elementIdUpdate);
var cancel = document.getElementById(elementIdCancel);
//Hiding/Showing the Edit button
toggleClass(edit, "invisible");
//Showing/Hiding the Update and Cancel buttons
toggleClass(update, "invisible");
toggleClass(cancel, "invisible");
}
/*********************************************************************************************************************
This function toggles whatever class is passed as a parameter. Example: the invisible class which is placed or removed
on the buttons.
*********************************************************************************************************************/
function toggleClass(element, className) {
if(element.classList.contains(className)) {
element.classList.remove(className);
} else {
element.classList.add(className);
}
}
shipviewer.css:
/*
header{
background-color: #F9F0D7;
color: #A3916A;
font-family: "Source Sans Pro", "Lucida Grande", sans-serif;
}
*/
body {
background-color: white;
font-family: "Lato", sans-serif;
text-align: center;
color: black;
/*font-weight: 400;*/
/*background: linear-gradient(#27A7DE, #19173C) fixed;*/
background-repeat: no-repeat;
}
footer {
background-color: #272562; /* imperial purple */
font-family: "Lato", sans-serif;
text-align: center;
width: 100%;
height: 50px;
color: white;
/*display: flex;*/
justify-content: center;
align-items: center;
}
#main {
display: flex;
justify-content: center;
}
.shipContainer {
background-color: #272562; /* imperial purple */
color: white;
width: 33%;
height: 600px;
width: 400px;
margin: 5px;
}
.shareContainer {
width: 33%;
/*align-content: flex-start;*/
margin: 0px;
}
.softwareName {
text-align: right;
}
.flex {
display: flex;
}
.marginForDisplay {
margin: 10px;
}
.alignRight {
text-align: right;
}
.addMarginLeft {
margin-left: 40px;
}
.invisible {
display: none;
}
.shipHeader {
text-align: center;
}
.version {
margin-right: 40px;
margin-left: 40px;
}
.build {
//margin-right: 80px;
}
.leftColumn {
/*max-width: 150px;*/
margin-left: 10px;
margin-right: 10px;
}
.columnFormatting {
margin: 0px;
min-width: 95px;
}
#listOfInfo {
display: inline-block;
width: 33%;
width: 100px;
min-height: 100px;
}
Related
I'm a newbie, I'm having trouble understanding why the placeholder is not working, I tried using LABEL tag but it won't disappear as I start typing into the text input.
I am serving the HTML with express to heroku.
here's the code:
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
edit:
I am using bootstrap for styling and Express and NodeJs for serving files to the frontend.
here is the overall code for signup page:
<link href="../css/styles.css" rel="stylesheet" />
</head>
<body class="text-center">
<main class="form-signin">
<form method="post" action="/">
<img
class="mb-4"
src="../images/example.png"
alt=""
width="72"
height="57"
/>
<h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>
<div class="form-floating">
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
</form>
</main>
</body>
and minimal styling used in stylesheet:
html,
body {
height: 100%;
}
body {
display: flex;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
}
.form-signin .form-floating:focus-within {
z-index: 2;
}
.form-signin #firstName {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin #lastName {
margin-bottom: -1px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.form-signin input[type="email"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
This is how it is displayed on the web app
can you share some more info, looks like the above is simple HTML, The placeholder will disappear when you edit the input.
Not sure why it wouldn't, perhaps share your code online.
Like this,
<!-- <label for="firstname">FirstName</label> -->
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-floating">
<!-- <label for="lastname">LastName</label> -->
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-floating">
<!-- <label for="email">example#gmail.com</label> -->
<input type="email" class="form-control" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
where we can inspect and debug it.
As of now, your question is too generic to find the issue. And by looks of class names, you are using some sort of library to style your page. share that info too
you have to replace form-floating by form-group
<body class="text-center">
<main class="form-signin">
<form method="post" action="/">
<img class="mb-4" src="../images/example.png" alt="" width="72" height="57" />
<h1 class="h3 mb-3 fw-normal">Sign up to my newsletter</h1>
<div class="form-group">
<input type="text" class="form-control" id="firstName" name="firstname" placeholder="FirstName" required autofocus/>
</div>
<div class="form-group">
<input type="text" class="form-control" id="lastName" name="lastname" placeholder="LastName" required/>
</div>
<div class="form-group">
<input type="email" class="form-control" id="email" name="email" placeholder="example#gmail.com" required/>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">
Sign Up
</button>
<p class="mt-5 mb-3 text-muted">© Example Inc.</p>
</form>
</main>
</body>
How would I make it so that when the "Same as shipping address" checkbox is clicked, the billing address section will be hidden? I've been stuck on this for awhile now and decided to come here for help. Thank you very much in advance!
(posting some words here since I can't post due to having more code than text so ignore this part)
I attached a snipped below of my code so hopefully this helps:
.checkbox-custom, .radio-custom {
margin: 0 auto;
width: 40%;
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 1px solid #717171;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
font-size: 20px;
color: #a1cdad;
}
<form class="form1">
<h6>Shipping Address</h6>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
<form class="form2">
<h6>Billing Address</h6>
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name"/>
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="last-name" placeholder="Smith" data-type="name"/>
<label for="last-name"><p>Last Name</p></label>
</div>
<div class="input-box">
<input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
<label for="phone-number"><p>Phone Number</p></label>
</div>
<div class="input-box">
<input type="text" id="company" placeholder="Company" data-type="name"/>
<label for="company"><p>Company Name</p></label>
</div>
<div class="input-box">
<input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
<label for="address" data-type="name"><p>Address</p></label>
</div>
<div class="input-box">
<input type="text" id="city" placeholder="Everytown" data-type="text"/>
<label for="city" data-type="name"><p>City</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>Texas</p></option>
<option><p>Louisiana</p></option>
<option><p>New Mexico</p></option>
<option><p>Oklahoma</p></option>
</select>
<label for="card-type"><p>State</p></label>
</div>
<div class="input-box">
<input type="text" id="zip" placeholder="12345" data-type="text"/>
<label for="zip" data-type="text"><p>Address</p></label>
</div>
<div class="input-box">
<select id="card-type">
<option><p>United States</p></option>
</select>
<label for="card-type"><p>Country</p></label>
</div>
<div class="input-box">
<input type="text" id="email" placeholder="johnsmith#gmail.com" data-type="email"/>
<label for="email"><p>Email Address</p></label>
</div>
</form>
I would recommend removing the div you have around the checkbox in the billing address. After this, you should be able to target .input-box when the checkbox has been checked. I have added a small example to help. You can add display: none or take the route I have depending on your accessibility needs. If you are wondering the ~ you see in the example it targets all siblings following the checkbox. I hope this helps :)
.checkbox-custom:checked ~.input-box {
visibility: hidden;
opacity: 0;
}
<form class="form2">
<h6>Billing Address</h6>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name" />
<label for="first-name"><p>First Name</p></label>
</div>
<div class="input-box">
<input type="text" id="first-name" placeholder="John" data-type="name" />
<label for="first-name"><p>First Name</p></label>
</div>
</form>
1.the dom 'Same as shipping address' isn't inside 'form2',it should between 'form1' and 'form2',like this,'....'same as shipping adress''.otherwise ,u can not toggle show the content.
2. add onChange event on the 'same as shipping address' checkbox, if the value is checked,u can add class on the '' ,the class content is 'display:none'
I have a form which is using CSS to "reveal" some additional options if a radio button is selected.
This works fine but on mobile, the additional options cover the submit button and the text is hard to read.
the HTML form:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>MooWoos Stall Booking</title>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:400,800">
<link rel='stylesheet' href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!--build:css css/styles.min.css-->
<link rel="stylesheet" href="/css/bootstrap.css">
<link rel="stylesheet" href="/css/style.css">
<!--endbuild-->
</head>
<body>
<div class="container">
<nav class="navbar navbar-toggleable-md navbar-light">
<a class="logo"><img src="assets/logo_opt.png"></a>
</nav>
<hr>
<div class="modal fade" id="redirect_page" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="form-horizontal">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div id="user_msg" align="left">Booking successful! Redirecting to PayPal... </div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3 bookingform">
<h1>Stall Booking Form</h1>
<p class="lead">
Fill out the form to book and pay for your stall!
</p>
<form id="bookingForm">
<div class="form-group">
<label for="name">Name </label>
<input type="text" name="name" class="form-control" placeholder="Your Name" value="" title="Please enter your name" required/>
</div>
<div class="form-group">
<label for="address">Address </label>
<textarea name="address" class="form-control" placeholder="Your Address" value="" title="Please enter your address" required></textarea>
</div>
<div class="form-group">
<label for="phone">Telephone Number </label>
<input type="text" name="phone" class="form-control" placeholder="Your Telephone Number" value="" title="Please enter the best telephone number to contact you on" required/>
</div>
<div class="form-group">
<label for="email">Email </label>
<input type="text" name="email" class="form-control" placeholder="Your Email" value="" title="Please enter your Email address" required/>
</div>
<div class="form-group">
<label for="date">Which date would you like to book? </label>
<p><input type="radio" name="date" value="13th September" required/> Sunday 13th September</p>
<p><input type="radio" name="date" value="6th February" /> Saturday 6th February</p>
</div>
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail? </label>
<input type="radio" id=c-rail-yes name="c-rail" value="Yes" /> Yes
<input type="radio" id=c-rail-no name="c-rail" value="No" /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance-yes" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance-no" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
<input type="submit" id="submit-form" class="btn btn-success btn-lg" value="Book & Pay" />
</form>
<p></p>
</div>
</div>
<hr>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © MooWoos 2018. Booking Form by Luke Brewerton</p>
</div>
</div>
</footer>
</div>
<!--build:js js/mwbookings-min.js -->
<script src="js/jquery.min.js"></script>
<script src="js/tether.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.serialize-object.min.js"></script>
<script src="js/main.js"></script>
<!-- endbuild -->
</body>
</html>
The radio buttons stallType group are the ones, using the CSS class reveal-if-active on the labels and require-if-active on the form inputs.
CSS:
.reveal-if-active {
opacity: 0;
max-height: 0;
overflow: hidden;
transform: scale(0.8);
transition: 0.5s;
input[type="radio"]:checked ~ &,
input[type="checkbox"]:checked ~ & {
opacity: 1;
max-height: 100px;
overflow: visible;
padding: 10px 20px;
transform: scale(1);
}
}
My JS file:
var $form = $('form#bookingForm'),
url = 'https://script.google.com/macros/s/AKfycbwaEsXX1iK8nNkkvL57WCYHJCtMAbXlfSpSn3rsJj2spRi-41Y/exec'
function disableAll() {
$('#c-rail-yes').attr('required', false).attr('disabled', true);
$('#c-rail-no').attr('required', false).attr('disabled', true);
$('#craftName').attr('required', false).attr('disabled', true);
$('#bizName').attr('required', false).attr('disabled', true);
$('#insurance-yes').attr('required', false).attr('disabled', true);
$('#insurance-no').attr('required', false).attr('disabled', true);
}
$('#stallType-Preloved').change(function () {
if(this.checked) {
disableAll();
$('#c-rail-yes').attr('required', true).attr('disabled', false);
$('#c-rail-no').attr('required', true).attr('disabled', false);
}
});
$('#stallType-Craft').change(function () {
if(this.checked) {
disableAll();
$('#craftName').attr('required', true).attr('disabled', false);
}
});
$('#stallType-Business').change(function () {
if(this.checked) {
disableAll();
$('#bizName').attr('required', true).attr('disabled', false);
$('#insurance-yes').attr('required', true).attr('disabled', false);
$('#insurance-no').attr('required', true).attr('disabled', false);
}
});
$('#submit-form').on('click', function(e) {
var valid = this.form.checkValidity();
if (valid) {
e.preventDefault();
var jqxhr = $.ajax({
url: url,
method: "GET",
dataType: "json",
dataType: "json",
data: $form.serializeObject(),
success: function () {
$('#redirect_page').modal('show');
window.setTimeout(function () {
location.reload()
}, 3000);
}
});
}
});
Would this be better done via jQuery? If so, how?
Replace those nonsensical max-height declarations for height:0 and height:auto.
.reveal-if-active {
opacity: 0;
height:0;
overflow: hidden;
transform: scale(0.8);
transition: 0.5s;
input[type="radio"]:checked ~ &,
input[type="checkbox"]:checked ~ & {
opacity: 1;
height:auto;
overflow: visible;
padding: 10px 20px;
transform: scale(1);
}
}
The jquery function required is as follows
HTML
<div class="form-group">
<label>What type of stall do you require?</label>
<div>
<input type="radio" name="stallType" id="stallType-Preloved" value="Preloved" required>
<label for="stallType-Preloved">Preloved</label>
<div class="reveal-if-active">
<label for="c-rail">Will you be bringing a clothes rail? </label>
<input type="radio" id=c-rail-yes name="c-rail" value="Yes" /> Yes
<input type="radio" id=c-rail-no name="c-rail" value="No" /> No
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Craft" value="Craft">
<label for="stallType-Craft">Craft</label>
<div class="reveal-if-active">
<label for="craftName">What name do you use?</label>
<input type="text" id="craftName" name="craftName" class="require-if-active" placeholder="Craft Name" title="Please provide us with your Craft name" value="" />
</div>
</div>
<div>
<input type="radio" name="stallType" id="stallType-Business" value="Business">
<label for="stallType-Business">Business</label>
<div class="reveal-if-active">
<label for="bizName">What is your business name?</label>
<input type="text" id="bizName" name="bizName" class="require-if-active" placeholder="Business Name" title="Please provide us with your Business name" value="" />
<label for="insurance">Do you have Public Liability Insurance?</label>
<input type="radio" id="insurance-yes" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="We will require proof of this prior to market day" value="Yes"/> Yes
<input type="radio" id="insurance-no" name="insurance" class="require-if-active" data-require-pair="#stallType-Business" title="Our insurance does not cover other businesses. Please ensure you have adequate cover and provide us with proof prior to market day" value="No"/> No
</div>
</div>
</div>
jQuery
$(document ).ready(function() {
$("input:radio[name='stallType']").change(function (e) {
$(".reveal-if-active").hide();
$(e.currentTarget).parent().find(".reveal-if-active").show();
});
});
Codepen link for reference
https://codepen.io/YasirKamdar/pen/vpMayq
So, I am fairly new to JavaScript and I want to create a box for the user to input matrix mxn then parse the input to JS. I know how to create row and column in html, but I have no idea with the JS.
This is what I have so far.
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3">
<input type="text" name="field01" size="3">
<input type="text" name="field02" size="3">
<input type="text" name="field03" size="3">
<br>
<input type="text" name="field10" size="3">
<input type="text" name="field11" size="3">
<input type="text" name="field12" size="3">
<input type="text" name="field13" size="3">
<br>
<input type="text" name="field20" size="3">
<input type="text" name="field21" size="3">
<input type="text" name="field22" size="3">
<input type="text" name="field23" size="3">
<br>
<input type="submit" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info">
</form>
<div id="resultField">
</div>
</div>
</div>
<script type="text/javascript">
function calcJacobian(){
var myArr = document.forms.inputField;
var myControls = myArr.elements['p_id'];
for(var i =0; i<myControls.length; i++){
var aControl = myControls[i];
document.getElementById("resultField").append=aControl;
}
}
</script>
After a few adjustments, the code is displayed below. Note that the variable name_value_array holds a map which store all values from the table, having as the key the input name and as stored value the input value.
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3">
<input type="text" name="field01" size="3">
<input type="text" name="field02" size="3">
<input type="text" name="field03" size="3">
<br>
<input type="text" name="field10" size="3">
<input type="text" name="field11" size="3">
<input type="text" name="field12" size="3">
<input type="text" name="field13" size="3">
<br>
<input type="text" name="field20" size="3">
<input type="text" name="field21" size="3">
<input type="text" name="field22" size="3">
<input type="text" name="field23" size="3">
<br>
<input type="button" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info">
</form>
<div id="resultField">
</div>
</div>
</div>
<script type="text/javascript">
function calcJacobian() {
var myArr = document.forms.inputField;
var myControls = myArr;
var name_value_array = [];
for (var i = 0; i < myControls.length; i++) {
var aControl = myControls[i];
// don't print the button value
if (aControl.type != "button") {
// store value in a map
name_value_array.push(aControl.value, aControl.name);
document.getElementById("resultField").appendChild(document.createTextNode(aControl.value + " "));
}
}
// show map values as a popup
alert(JSON.stringify(name_value_array));
}
</script>
Try the CSS selector string for 'starts with' aka ^= to grab all values with names starting with field, perhaps make it an array so as to save the name value numbers at the same time:
window.calcJacobian = function() {
var myArr = document.querySelectorAll('input[name^="field"]')
for (var i = 0; i < myArr.length; i++) {
var results = "\nfield: " + myArr[i].name.substring(5) + ", value: " + myArr[i].value;
var text = document.createTextNode(results);
document.querySelector('#resultField').appendChild(text);
}
}
#resultField {
white-space: pre-line;
}
<div class="container">
<div class="well well-lg">
<h1 class="text-center">Jacobian Method</h1>
<p>Masukkan matrik</p>
<form id="inputField" role="form">
<input type="text" name="field00" size="3" />
<input type="text" name="field01" size="3" />
<input type="text" name="field02" size="3" />
<input type="text" name="field03" size="3" />
<br>
<input type="text" name="field10" size="3" />
<input type="text" name="field11" size="3" />
<input type="text" name="field12" size="3" />
<input type="text" name="field13" size="3" />
<br>
<input type="text" name="field20" size="3" />
<input type="text" name="field21" size="3" />
<input type="text" name="field22" size="3" />
<input type="text" name="field23" size="3" />
<br>
<input type="button" onclick="calcJacobian()" value="calculate" name="calculate" class="btn btn-info" />
</form>
<div id="resultField"></div>
</div>
</div>
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>