Javascript function to focus() on next form element not working - javascript

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>

Related

Trying to POST Information to a Locally Created MySQL Database

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

How to automatically uncheck a checkbox if the textbox is clicked

I'm building a donation form.
If a checkbox with a fixed amount is checked by the user, I would like it to automatically uncheck if next the user clicks the textbox to insert a custom amount.
It would be important that the textbox would also clear if after inserting a custom amount the user opted to check a checkbox with a fixed amount.
I know nothing of JavaScript. Will someone help me achieve this?
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="louzanimalespaypal#gmail.com">
<input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€05.00</span>
<input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€10.00</span>
<input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€15.00</span>
<input type="checkbox" name="amount" class="checkbutton" value="5.00"><span>€20.00</span>
<br>
<strong>Other Amount</strong><br>
$ <input type="text" class="TextBox" name="amount">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="PT">
<input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
<input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">
<br /><br />
<input type="submit" value="Pay with PayPal!">
</form>
[UPDATE]
I've put together the flowing which does exactly what I need.
If anyone thinks this can be improved, I would appreciate it:
$('input.checkbutton').on('change', function() {
$('input.checkbutton').not(this).prop('checked', false);
});
$(".textBox").focus(function() {
$(".checkbutton").prop("checked", false );
});
$(document).ready(function() {
$(".checkbutton").change(function() {
if ($(this).not(":checked")) {
$('.textBox').val("");
}
});
});
Fiddle
Looking at you're updated answer I would do the follow:
$('input.checkbutton').on('change', function() {
$('input.checkbutton').not(this).prop('checked', false);
if ($("input.checkbutton-other").val()) {
$("input.checkbutton-other").val("");
}
});
$("input.checkbutton-other").on("focus click", function() {
$("input.checkbutton").prop("checked", false);
});
body {
font-family: sans-serif;
box-sizing: border-box;
}
.form-group {
margin-top: 15px;
}
label.cb-label {
margin: 5px;
float: left;
background: #ccc;
}
label.cb-label:hover {
background: grey;
color: #fff;
}
label.cb-label span {
text-align: center;
box-sizing: border-box;
padding: 10px 15px;
display: block;
}
label.cb-label input {
position: absolute;
visibility: hidden;
}
label.cb-label input:checked + span {
background-color: black;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form action="#" method="post" target="_blank">
<div class="form-group" style="display: inline-block;">
<label for="cb5" class="cb-label">
<input type="checkbox" name="amount" id="cb5" class="checkbutton" value="5.00">
<span>€05.00</span>
</label>
<label for="cb10" class="cb-label">
<input type="checkbox" name="amount" id="cb10" class="checkbutton" value="10.00">
<span>€10.00</span>
</label>
<label for="cb15" class="cb-label">
<input type="checkbox" name="amount" id="cb15" class="checkbutton" value="15.00">
<span>€15.00</span>
</label>
<label for="cb20" class="cb-label">
<input type="checkbox" name="amount" id="cb20" class="checkbutton" value="20.00">
<span>€20.00</span>
</label>
</div>
<div class="form-group">
<label for="cbOther"><strong>Any Amount</strong> $</label>
<input type="number" name="amount" id="cbOther" class="checkbutton-other">
</div>
<div class="form-group">
<input type="hidden" name="cmd" value="_donations">
<input type="hidden" name="business" value="test#email.com">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="item_number" value="Donation">
<input type="hidden" name="currency_code" value="EUR">
<input type="hidden" name="lc" value="PT">
<input type="hidden" name="bn" value="WPS_PT">
<input type="hidden" name="return" value="#">
</div>
<div class="form-group">
<input type="submit" value="Pay with PayPal!">
</div>
</form>
I started by removing this JavaScript code
$(document).ready(function() {
$(".checkbutton").change(function() {
if ($(this).not(":checked")) {
$('.textBox').val("");
}
});
});
And replacing this code with:
$('input.checkbutton').on('change', function() {
$('input.checkbutton').not(this).prop('checked', false);
if ($("input.checkbutton-other").val()) {
$("input.checkbutton-other").val("");
}
});
After changing the JavaScript I would update your HTML (codes like € are found on Character-Code.com):
<div class="form-group" style="display: inline-block;"></div> // this html around the check boxes so their float don't affect other elements of page
<label for="cb5" class="cb-label"> // add `for` to the labels which can be tied to a `id` of the input it is related too and added a `class` for the css to be attached too
After the HTML update their was some CSS updates required. I'd remove the padding from the body and added this class instead:
.form-group {
margin-top: 15px;
}
This class would be added to a div which would wrap your inputs. Also on your fancy checkbox css I added the class .cb-label so it won't effect other labels.
You can do something like this, pure javascript
<input type='checkbox' id='my-check' />
<input type='text' id='my-text' onfocus='uncheck()' />
<script>
function uncheck() {
document.getElementById('my-check').checked = false;
}
</script>

displaying divs inside form fields in same line

can you tell me how to how to make divs inside form to align
providing code below
display: table-cell not working
http://codepen.io/anon/pen/EKwOKa
<div class="form-fields">
<label>Name:</label>
<input type="text" name="name" id="name" class="stored" value="" /><br>
<label>Email:</label>
<input type="email" name="email" id="email" class="stored" value="" /><br>
<label>Message:</label>
<textarea name="message" id="message" class="stored"></textarea><br>
</div>
<div class="upload-image">
<div class="upload-image-preview"></div>
<input type="file" name="file" value="Upload Image" />
</div>
vertical-align: top; will help top alignment.
.form-fields {
display: table-cell;
vertical-align: top;
}

JQuery Mobile CSS Text Input

Here is a JSFiddle:
http://jsfiddle.net/5Lz3zd9y/7/
HTML:
<div class="ui-bar ui-bar-a ui-widget-content">dog</div>
<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">
<input class="givenLettersMobile" type="text" value="e" disabled>
<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">
<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">
<input class="blankLettersMobile" type="text" value="" size="1" maxlength="1">
<input type="text" value="sign in">
CSS:
.givenLettersMobile {
width: 40px;
height: 40px;
text-align:center;
font-style:italic;
font-weight:bold;
text-decoration:underline;
line-height: 50%;
}
.blankLettersMobile {
width: 40px;
height: 40px;
text-align:center;
font-style:italic;
line-height: 50%;
}
In regards to the JSFiddle using JQuery Mobile, I'm trying to figure out how to get all the text input boxes aligned left to right instead of stacked top to bottom while also trying to reduce the width of the text input boxes (without affecting the width of other input boxes like username, password, etc...). Something more like how these text input boxes behave from the desktop version of the website:
Any thoughts on how to accomplish this?
input[type='text'].givenLettersMobile
{
width: 40px !important;
height: 40px !important;
text-align:center !important;
}
Here is what worked for me:
http://jsfiddle.net/5Lz3zd9y/43/
html:
<div class="ui-bar ui-bar-a ui-widget-content">dog</div>
<ul class="letters">
<li>
<input type="text" value="" size="1" maxlength="1">
</li>
<li>
<input type="text" value="e" size="1" disabled>
</li>
<li>
<input type="text" value="" size="1" maxlength="1">
</li>
<li>
<input type="text" value="" size="1" maxlength="1">
</li>
<li>
<input type="text" value="" size="1" maxlength="1">
</li>
</ul>
<input type="text" value="sign in">
CSS:
.letters li {
display: inline-block;
}

How to disable all checkboxes on load, and enable them one by one as file is selected to upload?

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');
});

Categories

Resources