I'm trying to pass the first name and cars names to the other page, and I tried everything but doesn't work for me
once the user clicks on submit it's supposed to redirect to success.html page and show a message with their name and the cars they chose to test
this is page#1
h1 {
text-align: center;
color: #4A4A67;
font-weight: bold;
font-style: 'Amatic SC';
font-size: 55px; }
h3 {
font-size: 28px;
}
body { background-image: url("car.jpg");
text-align: center;
border-style: inset;
border-color: #8CA7B3;
font-family: 'Amatic SC';
font-weight: bold;
color: #6F6F9B;
border-radius: 25px;}
#fname:focus{
border-color: green;
background-color: lightgreen}
#Pnum:focus{
border-color: green;
background-color: lightgreen}
span {
color:darkred;
}
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Amatic SC' rel='stylesheet'>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
<script>
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
if (x == "") {
document.getElementById("fname").style.borderColor = "red";
error1.textContent = "*Name must not be empty!"
return false;}
document.getElementById("fname").style.borderColor = "";
error1.textContent = ""
var y = document.forms["myForm"]["Pnum"].value;
if ( y == "" || isNaN(y) || (y.toString()).length>10 ){
document.getElementById("Pnum").style.borderColor = "red";
error2.textContent ="*Phone number invalid."
return false;}
document.getElementById("Pnum").style.borderColor = "";
error2.textContent = ""
var radios = document.getElementsByName("Age");
var formValid = false;
var i = 0;
while ( !formValid && i < radios.length) {
if (radios[i].checked) formValid = true;
i++; }
if (!formValid){
error3.textContent = "Must check at least one option!"
return false;}
error3.textContent = ""
var checkbox = document.getElementsByName("cars");
var formValid = false;
var i = 0, x = 0;
while ( i < checkbox.length ) {
if (checkbox[i].checked) { x++; formValid = true; }
i++; }
if (!formValid) error4.textContent = "must check at least 1 option!"
if ( x > 3 ) { error4.textContent = "must check at most 3!"
return false; }
// Getting the value of your text input
var fname = document.getElementById("fname").value;
// Storing the value above into localStorage
localStorage.setItem("fname", fname);
return formValid;
}
</script>
</head>
<body>
<h1>Car Test Request</h1>
<h3>please fill in the form to make your car test request.</h3>
<form name="myForm" onsubmit="return validateForm()" action="file:///C:/Users/s/Desktop/457/assignment%202/success.html" method="GET">
<label for="FirstName">please enter your name:</label>
<input type="text" id="fname" name="fname" value=""><span id="error1"></span><br><br>
<label for="PhoneNumber">please enter your phone number:</label>
<input type="text" id="Pnum" name="Pnum" value=""><span id="error2"></span><br><br>
How old are you? <span id="error3"></span><br>
<input type="radio" name="Age" id="18-23">18-23<br>
<input type="radio" name="Age" id="23-30">23-30<br>
<input type="radio" name="Age" id="31-39">31-39<br>
<input type="radio" name="Age" id="40+">40+<br><br>
<h>choose the wanted car(s) for the test drive:</h> <span id="error4"></span><br>
<input type="checkbox" id="cars" name="cars" value="Bentley">
<label for="cars">Bentley</label>
<input type="checkbox" id="cars" name="cars" value="BMW">
<label for="cars">BMW</label>
<input type="checkbox" id="cars" name="cars" value="Cadillac">
<label for="cars">Cadillac</label><br>
<input type="checkbox" id="cars" name="cars" value="Dodge">
<label for="cars">Dodge</label>
<input type="checkbox" id="cars" name="cars" value="Fiat">
<label for="cars">Fiat</label>
<input type="checkbox" id="cars" name="cars" value="Ford">
<label for="cars">Ford</label><br>
<input type="checkbox" id="cars" name="cars" value="Jaguar">
<label for="cars">Jaguar</label>
<input type="checkbox" id="cars" name="cars" value="Mazda">
<label for="cars">Mazda</label><br><br><br><br><br><br><br><br>
<input type="submit">
<input type="reset">
<br><br>
</form>
</body> </html>
this is page#2 (success.html)
h1 {
text-align: center;
color: #4A4A67;
font-weight: bold;
font-style: 'Amatic SC';
font-size: 55px; }
h3 {
font-size: 28px;
}
body { background-image: url("car.jpg");
text-align: center;
border-style: inset;
border-color: #8CA7B3;
font-family: 'Amatic SC';
font-weight: bold;
color: #6F6F9B;
border-radius: 25px;}
#fname:focus{
border-color: green;
background-color: lightgreen}
#Pnum:focus{
border-color: green;
background-color: lightgreen}
span {
color:darkred;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" media="screen">
<script>
// var fname = document.forms["myForm"]["fname"].value;
function init() {
// Retrieving the text input's value which was stored into localStorage
var fname = localStorage.getItem("fname");
}
</script>
</head>
<body>
<p>
<span id='fname'></span>, thanks for your request! <br>
we will call you soon to schedule a test drive for: <br>
</p>
<img src="bye.gif" alt="bye bye" width="200" height="200">
</body>
</html>
Instead of using method="GET" try using method="POST" and the proper URL inside the action=" second page URL " so that the data that you submit will be posted to the second page.Now use the localStorage.getItem() method on second page to get the data and show the data by using DOM like document.getElementId("").innerHTML = fname;
Related
I have a chess form with six fields. Two are drop down menus to select names (whiteplayername and blackplayername) and the other four can be used to add a custom name instead (firstnamewhite, lastnamewhite, firstnameblack, lastnameblack). Currently, I want my javascript to disable the custom fields if a name has been selected from the drop down menu (this is working). I also want the submit button to be disabled if neither the whiteplayername or firstnamewhite and blackplayername of firstnameblack is selected. Currently, the submit-button becomes enabled if a name is selected from both the blackplayername and whiteplayname menus but then does not become disabled again if an empty field is selected in either.
Edit
The full html is below, though I have taken out a section just made up of text and rows from the table in order to cut down on the space used.
<!DOCTYPE html>
<html lang="en"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>chessopenings3</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
body {
style: "background-color: #FF0000;
}
.topnav {
position: relative;
overflow: hidden;
background-color: #333;
border: 2px;
width: max-content;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
border: 2px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
border: 2px;
}
.formformat {
color: white;
padding: 50px;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
.instructions-text {
position: absolute;
color: white;
align: center;
left: 750px;
top: 150px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
.warning {
position: absolute;
color: white;
text-align: left;
left: 150px;
top: 50px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
select {
width: 120px;
}
select:focus {
min-width: 120px;
width: auto;
}
#media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
let isformvalid = false;
document.getElementById("submit-button").disabled = !isformvalid;
document.getElementById("whiteplayername").addEventListener("change", function () {
let blackplayername =
document.getElementById("blackplayername");
let firstnameblack =
document.getElementById("firstnameblack");
let firstnamewhite =
document.getElementById("firstnamewhite");
let lastnamewhite =
document.getElementById("lastnamewhite");
let lastnameblack =
document.getElementById("lastnameblack");
disablewhenmandatorynamemissingwhitename(this.value, blackplayername, firstnameblack, firstnamewhite, lastnameblack, lastnamewhite);
isformvalid = checkeitherfirstorfullnamepopulated (this.value, firstnamewhite, blackplayername, firstnameblack, isformvalid);
document.getElementById("submit-button").disabled = !isformvalid;
});
});
function disablewhenmandatorynamemissingwhitename(whiteplayername, blackplayername, firstnameblack, firstnamewhite, lastnameblack, lastnamewhite) {
if (whiteplayername !== "") {
firstnamewhite.disabled = true;
lastnamewhite.disabled = true;
} else {
firstnamewhite.disabled = false;
lastnamewhite.disabled = false;
}
}
function disablewhenmandatorynamemissingblackname(whiteplayername, blackplayername, firstnameblack, firstnamewhite, lastnameblack, lastnamewhite) {
if (blackplayername !== "") {
firstnameblack.disabled = true;
lastnameblack.disabled = true;
} else {
firstnameblack.disabled = false;
lastnameblack.disabled = false;
}
};
function checkeitherfirstorfullnamepopulated(whiteplayername, firstnamewhite, blackplayername, firstnameblack, isformvalid) {
if ((whiteplayername === "" || whiteplayername === null) && (firstnamewhite.trim() === "")) {
return false;
}
else if ((blackplayername === "" || blackplayername === null) && (firstnameblack.trim() === "")) {
return false;
}
return true;
};
</script>
<body style="background-color:rgb(68, 57, 57);">
<div class="warning">
<p id="warningtext"></p><br>
</div>
<div class="topnav">
<a th:href="#{main.html}"><i class="material-icons"
style="border:2px;font-size:60px;color:rgb(0, 0, 0);">arrow_back</i></a>
</div>
<div class="formformat">
<form th:object="${game}" th:action="#{/addgame}" th:method="post">
<label for="whiteplayername">Select white player:</label>
<select name="whiteplayername" id="whiteplayername" th:object="${names}" th:field="${game.whitePlayerName}">
<option th:value="null" th:selected="${game.name == null}"></option>
<th:block th:each="name : ${names}">
<option th:value="${name.name}"
th:text="${name.name}"></option>
</th:block>
</select>
<label for="blackplayername">Select black player:</label>
<select name="blackplayername" id="blackplayername" th:object="${names}" th:field="${game.blackPlayerName}">
<option th:value="null" th:selected="${game.name == null}"></option>
<th:block th:each="name : ${names}">
<option th:value="${name.name}"
th:text="${name.name}"></option>
</th:block>
</select><br><br>
<label for="firstnamewhite">First name white:</label>
<input type="text" id="firstnamewhite" th:field="*{firstNameWhite}"/>
<label for="firstnameblack">First name black:</label>
<input type="text" id="firstnameblack" th:field="*{firstNameBlack}"/><br><br>
<label for="lastnamewhite">Last name white:</label>
<input type="text" id="lastnamewhite" th:field="*{lastNameWhite}"/>
<label for="lastnameblack">Last name black:</label>
<input type="text" id="lastnameblack" th:field="*{lastNameBlack}"/><br><br>
<label for="date">Date:</label><br>
<input type="date" id="date" th:field="*{date}">
<table>
<tr>
<th>Move</th>
<th>White</th>
<th>Black</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" id="white1" th:field="*{moves}"></td>
<td><input type="text" id="black1" th:field="*{moves}"></td>
</tr>
</table>
<input type="submit" value="Submit" id="submit-button">
</form>
</div>
<br><br>
</body>
</html>
Here's a solution that should meet all your requirements:
<script type="module">
const form = document.getElementById("form");
const submitButton = document.getElementById("submitbutton");
const whitePlayerName = document.getElementById("whiteplayername");
const blackPlayerName = document.getElementById("blackplayername");
const firstNameBlack = document.getElementById("firstnameblack");
const firstNameWhite = document.getElementById("firstnamewhite");
const lastNameWhite = document.getElementById("lastnamewhite");
const lastNameBlack = document.getElementById("lastnameblack");
form.addEventListener('change', () => {
const whiteNameSelected = whitePlayerName.value;
// Disable white name inputs if white name is selected in the dropdown
firstNameWhite.disabled = whiteNameSelected;
lastNameWhite.disabled = whiteNameSelected;
// Determine if the white name is either selected or typed in the inputs
const validWhiteName = whiteNameSelected || (firstNameWhite.value && lastNameWhite.value);
const blackNameSelected = blackPlayerName.value;
// Disable black name inputs if black name is selected in the dropdown
firstNameBlack.disabled = blackNameSelected;
lastNameBlack.disabled = blackNameSelected;
// Determine if the black name is either selected or typed in the inputs
const validBlackName = blackNameSelected || (firstNameBlack.value && lastNameBlack.value);
const submitAvailable = validWhiteName && validBlackName;
submitButton.disabled = !submitAvailable;
});
</script>
<form th:object="${game}" th:action="#{/addgame}" th:method="post" id="form">
<label for="whiteplayername">Select white player:</label>
<select name="whiteplayername" id="whiteplayername" th:object="${names}" th:field="${game.whitePlayerName}">
<option th:value="null" th:selected="${game.name == null}"></option>
<option value="name1">Name 1</option>
<option value="name2">Name 2</option>
</select>
<label for="blackplayername">Select black player:</label>
<select name="blackplayername" id="blackplayername" th:object="${names}" th:field="${game.blackPlayerName}">
<option th:value="null" th:selected="${game.name == null}"></option>
<option value="name1">Name 1</option>
<option value="name2">Name 2</option>
</select><br><br>
<label for="firstnamewhite">First name white:</label>
<input type="text" id="firstnamewhite" th:field="*{firstNameWhite}"/>
<label for="firstnameblack">First name black:</label>
<input type="text" id="firstnameblack" th:field="*{firstNameBlack}"/><br><br>
<label for="lastnamewhite">Last name white:</label>
<input type="text" id="lastnamewhite" th:field="*{lastNameWhite}"/>
<label for="lastnameblack">Last name black:</label>
<input type="text" id="lastnameblack" th:field="*{lastNameBlack}"/><br><br>
<label for="date">Date:</label><br>
<input type="date" id="date" th:field="*{date}">
<button id="submitbutton" disabled>Submit</button>
</form>
It works by combining all the logic into a single handler for the entire form change. Then, if a name is selected in the dropdown, it disables the custom name fields, if not, it leaves them enabled. The code checks to make sure both white and black name are valid and depending on that sets the submit button enabled/disabled state.
You didn't post your whole HTML so I added the button by hand and also your selects are populated dynamically so I had to hardcode some options in them. Please, for Stack Overflow questions, always post examples reproducible by other people to aid them in helping you.
Can you provide the html code too? I also recommend to name properly ur variables and fucntions beacuase are pretty illegibles by the way. Try to type the first letter of each word that compunds the varibale in uppercase at least.
Instead of:
let firstnameblack
Do:
let firstNameBlack
I also recommend to put 2 or 3 letters according to what specifies this varibale, for example if it's a button, do:
let btnFirstNameBlack
Anyways if you can provide the html code maybe I can help you with the button issue.
The idea is for the user to select the options and the best employment
sector would be suggested by the form based on his selection.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
Survey that will will give you suggestion.
</title>
<style>
/* Styling the Body element i.e. Color,
Font, Alignment */
body {
background-color: #05c46b;
font-family: Verdana;
text-align: center;
}
/* Styling the Form (Color, Padding, Shadow) */
form {
background-color: #fff;
max-width: 500px;
margin: 50px auto;
padding: 30px 20px;
box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}
/* Styling form-control Class */
.form-control {
text-align: left;
margin-bottom: 25px;
}
/* Styling form-control Label */
.form-control label {
display: block;
margin-bottom: 10px;
}
/* Styling form-control input,
select, textarea */
.form-control input,
.form-control select,
.form-control textarea {
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
padding: 10px;
display: block;
width: 95%;
}
/* Styling form-control Radio
button and Checkbox */
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
display: inline-block;
width: auto;
}
/* Styling Button */
button {
background-color: #05c46b;
border: 1px solid #777;
border-radius: 2px;
font-family: inherit;
font-size: 21px;
display: block;
width: 100%;
margin-top: 50px;
margin-bottom: 20px;
}
</style>
</head>
The form is made with HTML. and for javascript operations i have added
value=1 in the checkbox for generating the different output string.
please view the code below to understand better.
<body>
<h1>Your job type survey suggestion quiz</h1>
<!-- Create Form -->
<form id="form">
<!-- Details -->
<div class="form-control">
<label for="name" id="label-name">
Name
</label>
<!-- Input Type Text -->
<input type="text"
id="name"
placeholder="Enter your name" />
</div>
<div class="form-control">
<label for="email" id="label-email">
Email
</label>
<!-- Input Type Email-->
<input type="email"
id="email"
placeholder="Enter your email" />
</div>
<div class="form-control">
<label for="age" id="label-age">
Age
</label>
<!-- Input Type Text -->
<input type="text"
id="age"
placeholder="Enter your age" />
</div>
<div class="form-control">
<label for="role" id="label-role">
Which option best describes you?
</label>
<!-- Dropdown options -->
<select name="role" id="role">
<option value="student">Student</option>
<option value="intern">Intern</option>
<option value="professional">
Professional
</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-control">
<label>
DO you like studying?
</label>
<!-- Input Type Radio Button -->
<label for="recommed-1">
<input type="radio"
id="recommed-1"
name="recommed">Yes</input>
</label>
<label for="recommed-2">
<input type="radio"
id="recommed-2"
name="recommed">No</input>
</label>
<label for="recommed-3">
<input type="radio"
id="recommed-3"
name="recommed">Maybe</input>
</label>
</div>
<div class="form-control">
<label>Skills that you have
<small>(Check all that apply)</small>
</label>
<!-- Input Type Checkbox -->
<label for="inp-1">
<input type="checkbox" name="inp" id="c" value=1>Coding</input></label>
<label for="inp-2">
<input type="checkbox" name="inp" id="d" value=2>Dancing</input></label>
</div>
<button onclick="checkCheckbox()">
Submit
</button>
</form>
Here as of now only 2 questions are in the form, I want to add more
questions and on based of the selection the form will suggest. In this
the alert or any message i`enter code here`s not shown neither there is any error.
<script>
function checkCheckbox() {
var c = document.getElementById("c");
var d = document.getElementById("d");
var add=0
if (c.checked == true){
var y = document.getElementById("c").value;
var add=y;
return add;
}
else if (d.checked == true){
var n = document.getElementById("d").value;
var add += n;
}
else {
return document.getElementById("error").innerHTML = "*Please mark any of checkbox";
}
if(add==2){
alert('You are multi-talented! become a dancer or a coder');
}
else{
alert('Become a coder');
</script>
</body>
</html>
here on selecting dancing and coding a different output should be
given and on selecting either dancing or either coding a different
output string should be shown. please suggest for any modifications or
if there is a better way to complete this idea.
There are several errors in the script section. You can use Web Developer debugging in your browser to check them out. I can see that you are new to coding in general, so there are a couple of common mistakes we've all made in the beginning.
This is one way of writing the function so it works as I think you intended it:
function checkCheckbox() {
var c = document.getElementById("c");
var d = document.getElementById("d");
var add = 0, val;
if (c.checked == true){
val = "coder";
add += 1;
}
if (d.checked == true){
val = "dancer";
add += 1;
}
if (add == 2) {
alert('You are multi-talented! become a dancer or a coder');
return true;
}
else if (add == 1) {
alert('Become a ' + val);
return true;
}
else {
document.getElementById("error").innerHTML = "*Please mark any of checkbox";
return false;
}
}
Also, you need to add return in the event handler of the button, to avoid it submitting when the form is invalid:
<button onclick="return checkCheckbox()">Submit</button>
And lastly add an element for the error message that is referred to in the script. Something like:
<div id="error"></div>
I am trying to create form with Inputs (majorly expandable textarea). I have created a button with id "create_pdf" when clicked it will generated the whole HTML into one PDF however When I click on the generate PDF button designed to run this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Incident Report</title>
<!-- CSS -->
<style>
.myForm {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.8em;
width: 45em;
padding: 1em;
border: 1px solid #ccc;
}
.myForm * {
box-sizing: border-box;
}
.myForm fieldset {
background-color: #eeeeee;
}
.myForm legend
{
background-color: gray;
color: white;
padding: 5px 10px;
}
.myForm label {
padding: 0;
font-weight: bold;
}
.myForm label.choice {
font-size: 0.9em;
font-weight: normal;
}
.myForm input[type="text"],
.myForm input[type="tel"],
.myForm input[type="email"],
.myForm input[type="datetime-local"],
.myForm select,
.myForm textarea {
float: right;
width: 60%;
border: 1px solid #ccc;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 0.9em;
padding: 0.3em;
}
.myForm textarea {
height: 50px;
width: 550px
}
.myForm button {
padding: 1em;
border-radius: 0.5em;
background: #eee;
border: none;
font-weight: bold;
margin-left: 40%;
margin-top: 1.8em;
}
.myForm button:hover {
background: #ccc;
cursor: pointer;
}
#autoresizing {
display: block;
overflow: hidden;
resize: none;
}
</style>
<script src="jquery-1.12.4.min.js"></script>
<script src="jspdf.min.js"></script>
</head>
<body>
<input type="button" id="create_pdf" value="Generate PDF">
<form class="myForm" method="get" enctype="application/x-www-form-urlencoded" action="/html/codes/html_form_handler.cfm">
<h2>Incident Report</h2>
<fieldset>
<legend>Incident Metrics</legend>
<p><label>Customer Name <input type="text" name="customer_name" required> </label></p>
<p><label>Case <input type="text" name="case" required> </label></p>
<p>
<label>Severity
<select id="Severity" name="Severity">
<option value="" selected="selected">Select One</option>
<option value="Critical" >Critical</option>
<option value="High" >High</option>
</select>
</label>
</p>
<p><label>Incident Reported Time<input type="datetime-local" name="Incident_reported_Time" required></label></p>
<p><label>Incident Resolved Time<input type="datetime-local" name="Incident_resolved_Time" required></label></p>
<p><label>MTTR<input type="text" name="MTTR" required> </label></p>
<p>
<label>SLA Achieved
<select id="SLA" name="SLA">
<option value="" selected="selected">Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</label>
</p>
<p>
<label>Product
<select id="Product" name="Product">
<option value="" selected="selected">Select One</option>
<option value="Command Center">Command Center</option>
<option value="ALM">ALM</option>
<option value="AGA">AGA</option>
</select>
</label>
</p>
<p><label>Teams Involved</label></p>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox4" value = "option1"> L2
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox5" value = "option2"> L3
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox6" value = "option3"> Network
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox6" value = "option3"> SysAdmin
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox6" value = "option3"> DBA
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox6" value = "option3"> Others(Please Mention)
</label>
<textarea id="textarea6">List Other Teams Involved</textarea>
</fieldset>
<br>
<fieldset>
<legend>Problem Statement</legend>
<p><label>Description</label></p>
<textarea id="autoresizing">Add Description</textarea>
<br>
<p><label>Business Impact</label></p>
<textarea id="autoResizing">Add Business Impact</textarea>
</fieldset>
<br>
<fieldset>
<legend>Workaround/Corrective Measures</legend>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Manual WO
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Patch
</label>
<label class = "checkbox-inline">
<input type = "checkbox" id = "inlineCheckbox3" value = "option3"> N/A
</label>
</fieldset>
<br>
<fieldset>
<legend>Investigation Done</legend>
<textarea id="textarea3">Add Investigation Done</textarea>
</fieldset>
<br>
<fieldset>
<legend>Preventive Analysis</legend>
<textarea id="textarea4">Add Preventive Analysis</textarea>
</fieldset>
<br>
<fieldset>
<legend>Root Cause Analysis</legend>
<textarea id="textarea5">Add Root Cause Analysis</textarea>
</fieldset>
<p><input type="file" accept="image/*" name="image" id="file" onchange="loadFile(event)" style="display: none;"></p>
<p><label for="file" style="cursor: pointer;">Upload Image</label></p>
<p><img id="output" width="500" /></p>
</form>
<script>
(function () {
var
form = $('.myForm'),
cache_width = form.width(),
a4 = [595.28, 841.89]; // for a4 size paper width and height
$('#create_pdf').on('click', function () {
$('body').scrollTop(0);
createPDF();
});
//create pdf
function createPDF() {
getCanvas().then(function (canvas) {
var
img = canvas.toDataURL("image/png"),
doc = new jsPDF({
unit: 'px',
format: 'a4'
});
doc.addImage(img, 'JPEG', 20, 20);
doc.save('Incident_Report.pdf');
form.width(cache_width);
});
}
// create canvas object
function getCanvas() {
form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');
return html2canvas(form, {
imageTimeout: 2000,
removeContainer: true
});
}
}());
</script>
<script>
/*
* jQuery helper plugin for examples and tests
*/
(function ($) {
$.fn.html2canvas = function (options) {
var date = new Date(),
$message = null,
timeoutTimer = false,
timer = date.getTime();
html2canvas.logging = options && options.logging;
html2canvas.Preload(this[0], $.extend({
complete: function (images) {
var queue = html2canvas.Parse(this[0], images, options),
$canvas = $(html2canvas.Renderer(queue, options)),
finishTime = new Date();
$canvas.css({ position: 'absolute', left: 0, top: 0 }).appendTo(document.body);
$canvas.siblings().toggle();
$(window).click(function () {
if (!$canvas.is(':visible')) {
$canvas.toggle().siblings().toggle();
throwMessage("Canvas Render visible");
} else {
$canvas.siblings().toggle();
$canvas.toggle();
throwMessage("Canvas Render hidden");
}
});
throwMessage('Screenshot created in ' + ((finishTime.getTime() - timer) / 1000) + " seconds<br />", 4000);
}
}, options));
function throwMessage(msg, duration) {
window.clearTimeout(timeoutTimer);
timeoutTimer = window.setTimeout(function () {
$message.fadeOut(function () {
$message.remove();
});
}, duration || 2000);
if ($message)
$message.remove();
$message = $('<div ></div>').html(msg).css({
margin: 0,
padding: 10,
background: "#000",
opacity: 0.7,
position: "fixed",
top: 10,
right: 10,
fontFamily: 'Tahoma',
color: '#fff',
fontSize: 12,
borderRadius: 12,
width: 'auto',
height: 'auto',
textAlign: 'center',
textDecoration: 'none'
}).hide().fadeIn().appendTo('body');
}
};
})(jQuery);
</script>
<script type="text/javascript">
var textarea = document.querySelectorAll("#autoResizing,#autoresizing,#textarea3,#textarea4,#textarea5,#textarea6");
for (var i = 0; i < textarea.length; i++){
textarea[i].addEventListener('input', autoResize, false);
}
function autoResize() {
this.style.height = 'auto';
this.style.height = this.scrollHeight + 'px';
}
</script>
<script>
var loadFile = function(event) {
var image = document.getElementById('output');
image.src = URL.createObjectURL(event.target.files[0]);
};
</script>
</body>
</html>
It only generates one Page of the whole form as PDF, Basically it is discarding everything beyond that. Can someone help me in correcting this ?
In the below code, after clicking on 'Save Data' I want the page to go to another htm page 'confrim.html'. Instead what is happening is its just showing "localhost:3000/confirm.html" and not opening a new page. Can anyone help to fix this, attaching the code for the reference.
I tried to implement the following through the submitInfo() function
Thanks
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">-->
<style>
* {
box-sizing:border-box;
border-color: teal;
}
html{
background : radial-gradient(rgba(48, 97, 97, 0.5),rgba(255,255,255,0.5))
}
div {
padding: 10px;
overflow: hidden;
color: rgb(16, 8, 32);
font-size: 25px;
font-style: initial;
font-family: 'Times New Roman', Times, serif;
}
.input[type=button]{
font: 25px Calibri;
width: auto;
float: left;
cursor: pointer;
padding: 7px;
color: teal;
font-size: 30px;
}
#bt{
width : 190px;
height: 60px;
font-size: 25px;
font-family: 'Times New Roman', Times, serif;
background-color: #05193d;
color: whitesmoke;
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.5);
margin-top: 10px;
}
input[type=text], textarea, select {
font: 17px Calibri;
width: 100%;
padding: 12px;
border: 1px solid rgb(19, 18, 18);
border-radius: 4px;
color:teal
}
</style>
<title>Save form Data in a Text File using JavaScript</title>
<h1>User Information </h1>
<!--<link rel="stylesheet" href="style.css">-->
</head>
<body>
<div>
<form name="myForm" action="confirm.html" method="POST" >
<!--Add few elements to the form-->
<div>
<label for="Name">Name</label>
<input type="text" id="txtName" placeholder="Enter your name" required />
</div>
<div>
<label for="Email">Email</label>
<input type="text" id="txtEmail" placeholder="Enter your Email Id" />
</div>
<div>
<label for="Controller Type">Controller Type</label>
<select id="selProd">
<option value=""> - Select the Controller - </option>
<option value="RAID">RAID</option>
<option value="JBOD">JBOD</option>
<option value="EBOD">EBOD</option>
<option value="AP">AP</option>
</select>
</div>
<div>
<label for="Test Type">Test Type </label>
<select id="selTest">
<option value=""> - Select The Test - </option>
<option value="BFT">BFT</option>
<option value="Manufacturing">Manufacturing</option>
<option value="Channel">Channel</option>
<option value="DVT" >DVT</option>
</select>
</div>
<div>
<label for="Protocol Type">Protocol Type </label>
<select id="selProto">
<option value=""> - Select The Protocol - </option>
<option value="SAS">SAS</option>
<option value="iSCSI">iSCSI</option>
<option value="FC">FC</option>
</select>
</div>
<div>
<label for="IP Address">IP Address:</label>
<input type="text" id="txtIP" placeholder="Enter your IP address" />
</div>
<div>
<label for="Chasis Input">Number of Chasis Input:</label>
<input type="number" id="txtInputs" placeholder="Enter Number of Chasis" />
</div>
<div>
<input type="button" id="myBtn" value="Save data" onclick="submitInfo()"/>
</div>
<div>
<input type="button" id="bt" value="Save data to file" onclick="saveFile()" />
</div>
</form>
</div>
<script>
let saveFile = () => {
// Get the data from each element on the form.
const name = document.getElementById('txtName');
const email = document.getElementById('txtEmail');
const test = document.getElementById('selTest');
const product = document.getElementById('selProd');
const protocol = document.getElementById('selProto');
const IP = document.getElementById('txtIP');
const Inputs = document.getElementById('txtInputs');
// This variable stores all the data.
let data =
'\rName : ' + name.value + '\r\n' +
'Email ID : ' + email.value + '\r\n' +
'Test Type : ' + test.value + '\r\n' +
'Product Type : ' + product.value + '\r\n' +
'Protocol Type : ' + protocol.value + '\r\n' +
'IP Address : ' + IP.value + '\r\n' +
'Chasis Inputs : ' + Inputs.value;
if(name.value =='' || email.value == '' || test.value =='' || product.value =='' || IP.value == ''|| Inputs.value == ''){
alert("Please fill all the fields!");
return;
}
const reg = /^([A-Za-z0-9_\-\.])+\#([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (reg.test(email.value) == false)
{
alert('Invalid Email Address');
return false;
}
var ipformat = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
if (ipformat.test(IP.value) == false)
{
alert('Invalid IP Address');
return false;
}
if(name.value.length<3){
alert("Name must be having atleast 3 Characters");
return;
}
if(name.value == ''){
alert("Enter the name First");
}
// Convert the text to BLOB.
const textToBLOB = new Blob([data], { type: 'text/plain' });
const sFileName = 'formData.yaml'; // The file to save the data.
let newLink = document.createElement("a");
newLink.download = sFileName;
if (window.webkitURL != null) {
newLink.href = window.webkitURL.createObjectURL(textToBLOB);
}
else {
newLink.href = window.URL.createObjectURL(textToBLOB);
newLink.style.display = "none";
document.body.appendChild(newLink);
}
newLink.click();
}
var disable_options = false;
document.getElementById('selProd').onchange = function () {
//alert("selected value = "+this.value);
if(this.value == "RAID")
{
document.getElementById('selProto').removeAttribute('disabled');
}
else
{
document.getElementById('selProto').setAttribute('disabled', true);
}
}
function submitInfo(){
var test = document.getElementById('selTest').value;
var product = document.getElementById('selProd').value;
if(product == "EBOD" && test== "BFT"){
window.location ="confirm.html";
}
}
</script>
</body>
</html>
You could use the window.open method - like so:
function submitInfo(){
var test = document.getElementById('selTest').value;
var product = document.getElementById('selProd').value;
if( product == "EBOD" && test== "BFT" ){
window.open( "confirm.html", "Confirm", "fullscreen=yes,location=no,menubar=yes,resizable=no,scrollbars=no,status=no,toolbar=no" );
}
}
you have a
<form name="myForm" action="confirm.html" method="POST" >
which, on form submit, your browser will look for confirm.html file. I don't know whether you have file named confirm.html, but I think you do. otherwise it'll show 404 error.
As you instructed in your form, browser'll look for confirm.html, and on redirect, it'll show what's in confirm.html file.
you should remove your js script from this file and put it inside confirm.html file. or just replace action="confirm.html" with action=""
Still weeks into Javascript class it was a short fast pace class and I have this final project that has three class of orders with 3 options to chose from. All are radio type with amounts. There is no quantities listed nor is there tax or subtotal. The Total box should have a running balance and will clear when the Clear button is clicked.
This is what I have so far:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript - Unit 2 Summary</title>
<link href="unit2-summary.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
/*function swap()
{
var left = $('#leftWrapper').html();
var right = $('#rightWrapper').html();
$('#leftwrapper').html(left);
$('#rightWrapper').html(right);
return false;
}*/
function doClear()
{
document.computerForm.totalSystemPrice.value = "";
document.ComputerForm.yourName.value = "";
document.ComputerForm.yourAddress.value = "";
document.ComputerForm.yourAddress2.value = "";
document.ComputerForm.yourCityStateZip.value = "";
document.ComputerForm.yourPhone.value = "";
document.ComputerForm.yourEmail.value = "";
document.ComputerForm.computerCase[0].checked = false;
document.ComputerForm.computerCase[1].checked = false;
document.ComputerForm.computerCase[2].checked = false;
document.ComputerForm.computerMonitor[0].checked = false;
document.ComputerForm.computerMonitor[1].checked = false;
document.ComputerForm.computerMonitor[2].checked = false;
document.ComputerForm.computerPrinter[0].checked = false;
document.ComputerForm.computerPrinter[1].checked = false;
document.ComputerForm.computerPrinter[2].checked = false;
return;
}
function doSubmit()
{
if (validateText() == false)
{
alert("Required Data Missing - Please Complete");
return;
}
if (validateRadio() == false)
{
alert("Required Order Data Missing - Please Complete");
return;
}
alert("Your Order has been placed.");
return;
}
function validateText()
{
var yourName = document.ComputerForm.yourName.value;
if (yourName.length == 0) return false;
var yourAddress = document.computerForm.yourAddress.value;
if (yourAddress.length == 0) return false;
var yourCityStateZip = document.ComputerForm.yourCityStateZip.value;
if (yourCityStateZip.length == 0) return false;
var yourPhone = document.ComputerForm.yourPhone.value;
if (yourPhone == 0) return false;
var yourEmail = document.ComputerForm.yourEmail.value;
if (yourEmail == 0) return false;
return true;
}
function validateRadio()
{
if (document.ComputerForm.computerCase[0].checked) return true;
if (document.ComputerForm.computerCase[1].checked) return true;
if (document.ComputerForm.computerCase[2].checked) return true;
if (document.ComputerForm.computerMonitor[0].checked) return true;
if (document.ComputerForm.computerMonitor[1].checked) return true;
if (document.ComputerForm.computerMonitor[2].checked) return true;
if (document.ComputerForm.computerPrinter[0].checked) return true;
if (document.ComputerForm.computerPrinter[1].checked) return true;
if (document.ComputerForm.computerPrinter[2].checked) return true;
}
function getTotal()
{
var computerPrice()
document.getElementById('totalPrice').value.innerHTML = "Total Computer Price $"
}
function startup()
{
var imgArray = new Array(3);
var index = 0;
imgArray[0] = new Image;
imgArray[0].src = "ComputerCase.jpg";
imgArray[1] = new Image;
imgArray[1].src = "ComputerMonitor.jpg";
imgArray[2] = new Image;
imgArray[2].src = "ComputerPrinter.jpg";
return;
}
</script>
</head>
<body>
<form name="ComputerForm">
<h1 align="center">Comupter System Order Form</h1>
<div id="container" font="courier" size="10">
<div id="left"><div id ="leftWrapper" class="wrapper">
<p><p></p>
<div class="gallery">
<a target="_blank" href="ComputerCase.jpg">
<img src="ComputerCase.jpg">
</a>
</div>
<h4>Computer Case Style:</h4>
<input name="computerCase" type="radio" onClick="calculateTotal()" />Desktop Case ($500.00)<br />
<input name="computerCase" type="radio" onClick="calculateTotal()" />Mini-Tower Case ($600.00)<br />
<input name="computerCase" type="radio" onClick="calculateTotal()" />Full Tower Case ($700.00)<br />
<p></p>
<div class="gallery">
<a target="_blank" href="ComputerMonitor.jpg">
<img src="ComputerMonitor.jpg">
</a>
</div>
<h4>Computer Monitors</h4>
<input name="computerMonitor" type="radio" onClick="calculateTotal()" />17" LCD Flat Screen ($250.00)<br />
<input name="computerMonitor" type="radio" onClick="calculateTotal()" />19" LCD Flat Screen ($300.00)<br />
<input name="computerMonitor" type="radio" onClick="calculateTotal()" />21" LCD Flat Screen ($350.00)<br />
<p></p>
<div class="gallery">
<a target="_blank" href="ComputerPrinter.jpg">
<img src="ComputerPrinter.jpg"></a>
</a>
</div>
<h4>Computer Printers</h4>
<input name="computerPrinter" type="radio" onClick="calculateTotal()" />Inkjet Printer ($100.00)<br />
<input name="computerPrinter" type="radio" onClick="calculateTotal()" />Laser Printer ($250.00)<br />
<input name="computerPrinter" type="radio" onClick="calculateTotal()" />Color Laser Printer ($350.00)<br />
</p><p></p>
</div>
</div>
<div id="right"><div id="rightWrapper" class="wrapper">
<br><br>
<p>Total System Price: $
<input name="totalSystemPrice" size="14px" type="text" id="totalPrice" class="totalPrice" readonly>
</p>
<br><br>
<hr />
<p></p><p></p><p></p>
Name: <input name="yourName" size="50" type="text"><br />
Address: <input name="yourAddress" size="50" type="text"><br />
<input name="yourAddress2" size="50" type="text"><br />
City, State, Zip: <input name="yourCityStateZip" size="50" type="text"><br />
Phone Number: <input name="yourPhone" size="50" type="text"><br />
Email Address: <input name="yourEmail" size="50" type="text"></p>
</p>
<hr />
<br><br><br>
<div align="center">
<input type="button" id="submit" value="Submit Order" onClick="doSubmit()">
<input type="button" id="reset" value="Clear Values" onClick="doClear()">
</div>
<br />
</div></div>
</form>
</body>
</html>
The CSS page is so far:
body
{
color:black;
}
p
{
color:black;
font-size:12px;
font-family: Constantia, Aldhabi, Book Antiqua;
}
h1
{
color:blue;
font-weight:bold;
font-family:"Book Antiqua";
}
h4
{
color:blue;
font-weight:bold;
font-family:"Book Antiqua", Arial;
}
.gallery
{
float:right;
}
div.gallery.hover
{
border: 1px solid orange;
}
div.gallery.img
{
width:110px;
height: 110px;
}
#TotalSystemPrice
{
}
#container
{
display: table;
table-layout: fixed;
width:90%;
height:100%;
border: 1px solid black;
padding: 3px;
}
#left, #right
{
display: table-cell;
}
#left
{
width: 50%;
height: 100%;
background: white;
border: 1px solid blue;
margin:3px 2px;
}
#right
{
width: 50%;
height: 100%;
background-color:ivory;
border: 1px solid blue;
margin: 3px 2px;
}
#computerOrders
{
width:50%;
height:100%;
background-color:white;
}
#orderInfo
{
width:50%;
height:100%;
background-color:white;
}