HTML, JS random code generator is not working [duplicate] - javascript

This question already has answers here:
JavaScript code to stop form submission
(14 answers)
Stop form submit with native javascript
(3 answers)
prevent form submission (javascript)
(3 answers)
Closed 4 years ago.
So I have this code for this class project that I am doing I have my random number generator attach to the current flow submit button and the results of the random number generator are supposed to go in the water main information placeholder. The numbers do pop up for a split second but then they disappear. What am I doing wrong?
function refreshPage() {
document.getElementById("ref").value = Math.floor(Math.random() * 70000) + 10000;
}
body {
background: #87CEEB;
color: #fff;
}
.header {
font-size: 20px;
text-align: center;
}
<form name="" class="">
<fieldset>
<div style="text-align:center; padding:.5em; margin-bottom:2em;">
<span style="border:1px solid #ccc;text-align:center; font-size:2em;background:#0099FF;padding:.5em; clear:both;">
National Water Company</span><br/>
</br><span style="border:1px solid #ccc;text-align:center; font-size:20px;background:#0099FF; padding:.5em; clear:both;">
System Damage Tracking, Water Loss Reporting. Leakage and Pipes Damage Reporting</span>
</div>
<div style="text-align:left; padding:.5em; margin-bottom:2em; width:40%; float:left;">
<span style="width:1em; font-size:1.5em;">Water Main Information</span>
<input id="ref" type="text" name="" style=" font-size:1.5em; width:160px;" /><br/>
<input type="submit" name="" style="font-size:1.5em;background:#0099FF" Value="current flow" onClick="refreshPage()" />
</div>
<div style="text-align:left; padding:.5em; margin-bottom:2em;">
<span style="width:10px; font-size:1.5em;">Customer Consumption </span>
<input type="text" name="" placeholder="Name" style=" font-size:1.5em; width:160px;" />
<input type="text" name="" placeholder="Address" style=" font-size:1.5em; width:160px;" />
<input type="text" name="" placeholder="Location" style=" font-size:1.5em; width:160px;" /><br/>
<input type="submit" name="" placeholder="" style="font-size:1.5em;background:#0099FF" Value="History" />
</div>
<div style="text-align:left; padding:.5em; margin-bottom:2em; width:50%; float:left;">
<span style="width:1em; font-size:1.5em;">Request Incident</span>
<input type="text" name="" placeholder="Name" style=" font-size:1.5em; width:150px;" />
<input type="text" name="" placeholder="Phone" style=" font-size:1.5em; width:150px;" />
<input type="text" name="" placeholder="Location" style=" font-size:1.5em; width:150px;" /><br/>
<input type="submit" name="" placeholder="" style="font-size:1.5em;background:#0099FF" Value="History" />
</div>
<div style="text-align:left; padding:.5em; margin-bottom:2em;">
<span style="width:1em; font-size:1.5em;">Differencing Data</span>
<input type="text" name="" placeholder="00,000 l" style=" font-size:1.5em; width:160px;" /><br/>
<input type="submit" name="" style="font-size:1.5em;background:#0099FF" Value="History" />
</div>
</fieldset>
</form>

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

Exposing Additional Form Fields via Checked Radio Buttons in html and css

I have two radio button one for credit card and one for debit card. If i press any one of my radio button, I should get a form which comes under credit and for debit.
Current Code
<div class="forcredit">
<label>Card no:</label>
<input type="text" name="cardno" required=""><span style="color: red;">*</span>
<label>CVV no:</label>
<input type="text" name="cvvno" required=""><span style="color: red;">*</span>
<label>Expiration MM/YYYY</label>
<input type="month" name="expire" required=""><span style="color: red;">*</span>
</div>
but the problem is, I'm not able to expose additional form when I press radio button.
my whole code:
<!DOCTYPE html>
<html>
<head>
<title>form</title>
</head>
<body>
<form method="post" action="#">
<h4>Payment type:</h4>
<div>
<div>
<input type="radio" name="credit" id="credit" required>
<label>Credit card</label>
<div class="forcredit">
<label>Card no:</label>
<input type="text" name="cardno" required=""><span style="color: red;">*</span><br>
<label>CVV no:</label>
<input type="text" name="cvvno" required=""><span style="color: red;">*</span><br>
<label>Expiration MM/YYYY</label>
<input type="month" name="expire" required=""><span style="color: red;">*</span><br>
</div>
</div>
<div>
<input type="radio" name="debit" id="debit">
<label>Debit card</label>
<div class="fordebit">
<label>Card no:</label>
<input type="text" name="cardno" required=""><span style="color: red;">*</span><br>
<label>CVV no:</label>
<input type="text" name="cvvno" required=""><span style="color: red;">*</span><br>
<label>Expiration MM/YYYY</label>
<input type="month" name="expire" required=""><span style="color: red;">*</span><br>
</div>
</div>
</div>
<div>
<input type="submit" value="Pay">
</div>
</form>
</body>
</html>
Can anyone reform the CSS file so that when ever I press the radio button a similar type of form should be displayed?
Basically you need to add :checked status in your css to display next sibling
input[type=radio] + .fordebit,
input[type=radio] + .forcredit{
display:none;
}
input[type=radio]:checked + .fordebit{
display:block;
}
input[type=radio]:checked + .forcredit{
display:block;
}
UPDATE
Ok here is an update. there were some issues with your html too. if you want to use radio buttons for multiple choice items, they should have same name. See the full working code below
input[type=radio] + .details{
display: none;
}
input[type=radio]:checked + .fordebit {
display: block;
}
input[type=radio]:checked + .forcredit {
display: block;
}
input[type=radio] {
float:left;
}
<form method="post" action="#">
<h4>Payment type:</h4>
<div>
<div>
<label>Credit card</label>
<input type="radio" name="payment_type" id="credit" required>
<div class="forcredit details">
<label>Card no:</label>
<input type="text" name="cardno" required=""><span style="color: red;">*</span>
<br>
<label>CVV no:</label>
<input type="text" name="cvvno" required=""><span style="color: red;">*</span>
<br>
<label>Expiration MM/YYYY</label>
<input type="month" name="expire" required=""><span style="color: red;">*</span>
<br>
</div>
</div>
<div>
<label>Debit card</label>
<input type="radio" name="payment_type" id="debit">
<div class="fordebit details">
<label>Card no:</label>
<input type="text" name="cardno" required=""><span style="color: red;">*</span>
<br>
<label>CVV no:</label>
<input type="text" name="cvvno" required=""><span style="color: red;">*</span>
<br>
<label>Expiration MM/YYYY</label>
<input type="month" name="expire" required=""><span style="color: red;">*</span>
<br>
</div>
</div>
</div>
<div>
<input type="submit" value="Pay">
</div>
CSS can't do this. Javascript is required for event capturing. Using a library like jquery, you'll need to attach a click event handler to the card selector radio button. Double check your radio button names, then you'll need something like:
$('.card').click(function() {
$('.forcredit').show();
});

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

Failed to Produce Result in Html5 and CSS?

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

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

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>

Categories

Resources