I have an HTML Form that a user needs to fill out. It is information about a Student (Name, Email, Grade, Math, English, Social Studies). What I am trying to do is when the user fills out the Form and clicks the Submit button. It creates a JavaScript Object and adds it into another JS Object. I want the information input in the Form to display at the bottom of the webpage. I am purposely not using a database. I just want the information to exist while the page is up.
This is the HTML Form:
<!DOCTYPE html>
<html lang="en">
<head>
<!--Required Meta Tag-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
.center {
text-align: center;
border: 3px solid green;
}
body {
font-family: Arial;
margin: 0;
}
/* Header/Logo Title */
.header {
padding: 10px;
text-align: center;
background: #1abc9c;
color: white;
font-size: 20px;
}
</style>
<title>Student Report Card</title>
</head>
<body>
<div class="header">
<br>
<h2>Student & Grade Input Form</h2>
<br>
</div>
<br>
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<input type="text" placeholder="Enter name" name="name" id="name" required><br>
<br>
<input type="email" placeholder="Enter Email" name="email" id="email" required><br>
<br>
<input type="number" placeholder="Enter Math Grade" name="math" id="math" required><br>
<br>
<input type="number" placeholder="Enter English Grade" name="eng" id="eng" required><br>
<br>
<input type="number" placeholder="Enter Math Grade" name="math" id="math" required><br>
<br>
<input type="number" placeholder="Enter Social Studies Grade" name="sstd" id="sstd" required><br>
<br>
<button type="submit" id="btn1">Submit</button>
<ul id="myList">
</ul>
</div>
<script src="scripts.js"></script>
</body>
</html>
This is the Javascript Code:
document.getElementById("btn1").addEventListener("click", inputFunc)
var studentList = new Object()
function inputFunc(){
var fname = document.getElementById("name").value
var email = document.getElementById("email").value
var math = document.getElementById("math").value
var eng = document.getElementById("eng").value
var sstd = document.getElementById("sstd").value
var x = Math.floor((Math.random() * 100) + 1);
var y = x.toString();
studentID = "student".concat(y)
var studentID = new Object();
studentID.name = fname
studentID.email = email
studentID.math = math
studentID.eng = eng
studentID.sstd = sstd
studentList[studentID] = studentID
console.log(studentList)
var obj = JSON.parse(JSON.stringify(studentList))
var information = document.getElementById("demo").innerHTML = obj.fname + ", " + obj.email + ", " + obj.math;
var node = document.createElement("LI");
var textnode = document.createTextNode(information);
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
I am using the Random() method in JavaScript to create a random number that I am concatenating to the the "student" so it give it a unique ID. This is working correctly. I just can't display the information at the bottom of the page.
The Goal is after the user inputs information in the form it will display the content of the object below like so:
- Name, Email, Grade, English, Math, Social Studies
- Name, Email, Grade, English, Math, Social Studies
- Name, Email, Grade, English, Math, Social Studies
I have been able to solve this. I was able to create an html table and dynamically fill it as a user inputs information. The javascript will add the information dynamically to the first row and continue to do so as more information is added.
Updated HTML below:
<!DOCTYPE html>
<html lang="en">
<head>
<!--Required Meta Tag-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<style>
.center {
text-align: center;
border: 3px solid green;
}
body {
font-family: Arial;
margin: 0;
}
/* Header/Logo Title */
.header {
padding: 10px;
text-align: center;
background: #1abc9c;
color: white;
font-size: 20px;
}
table, td {
border: 1px solid black;
padding: 8px;
}
</style>
<title>Student Report Card</title>
</head>
<body>
<div class="header">
<br>
<h2>Student & Grade Input Form</h2>
<br>
</div>
<br>
<div class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<input type="text" placeholder="Enter name" name="name" id="name" required><br>
<br>
<input type="email" placeholder="Enter Email" name="email" id="email" required><br>
<br>
<input type="number" placeholder="Enter Math Grade" name="math" id="math" required><br>
<br>
<input type="number" placeholder="Enter English Grade" name="eng" id="eng" required><br>
<br>
<input type="number" placeholder="Enter Social Studies Grade" name="sstd" id="sstd" required><br>
<br>
<button type="submit" id="btn1">Submit</button>
<br><br>
<table id="myTable">
<tr>
<td>Name</td>
<td>Email</td>
<td>Math Grade</td>
<td>English Grade</td>
<td>Social Studies Grade</td>
</tr>
</table>
</div>
<script src="scripts.js"></script>
</body>
</html>
Updated Javascript below:
var studentList = new Object()
function inputFunc(){
var fname = document.getElementById("name").value
var email = document.getElementById("email").value
var math = document.getElementById("math").value
var eng = document.getElementById("eng").value
var sstd = document.getElementById("sstd").value
var x = Math.floor((Math.random() * 100) + 1);
var y = x.toString();
studentID = "student".concat(y)
studentNumber = "student".concat(y)
var studentID = new Object();
studentID.name = fname
studentID.email = email
studentID.math = math
studentID.eng = eng
studentID.sstd = sstd
studentList[studentNumber] = studentID
// variable of javascript object, place each element in a variable with stringfy
var studentInformation = studentList[studentNumber]
console.log(typeof studentInformation)
var obj = String(studentInformation.name)
var obj1 = String(studentInformation.email)
var obj2 = String(studentInformation.math)
var obj3 = String(studentInformation.eng)
var obj4 = String(studentInformation.sstd)
var table = document.getElementById("myTable");
var row = table.insertRow(1);
var cell1 = row.insertCell(0)
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
cell1.innerHTML = obj;
cell2.innerHTML = obj1;
cell3.innerHTML = obj2;
cell4.innerHTML = obj3;
cell5.innerHTML = obj4;
}
I think this is just an issue of adding items to objects. Here is an example
let studentInfo;
studentInfo.push({ name: "John", email: "john#gmail.com" });
This answer in incorrect.
Related
I am trying to get my code to check if the value submitted in "username" already exist in "usernames" list. If it does, would like to have the message displayed and if it does not, add that value to the "usernames" list and submit form.
Don't understand why my code doesn't work. Please see below:
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Validating Form Data</title>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
<h3>Register your account:</h3>
<p id="errors"></p>
<form id="registration-form" method="POST" action="https://formdump.codeinstitute.net/">
<div class="username">
<label for="username">Username:</label>
<input id="username" name="username" type="text" required>
</div>
<div class="password">
<label for="password">Password:</label>
<input id="password" name="password" type="password" required>
</div>
<input type="submit">
</form>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
CSS
label {
display: block;
}
input {
margin-bottom: 1rem;
}
p {
color: red;
font-weight: bold;
}
JS
let usernames = ["Harry", "Daisy", "Michael", "Sarah", "Sally"];
// Write your code here
let form = document.getElementById("registration-form");
form.addEventListener("submit", handleSubmit);
let errorMsg = document.getElementById("errors");
let uName = form.elements["username"].value;
let abc = usernames.includes(uName);
function handleSubmit(event) {
event.preventDefault();
if (abc) {
errorMsg.innerHTML = `<p>Sorry, the username ${uName} is already in use. Please choose another username.</p>
`;
} else {
usernames.push(uName);
form.submit();
console.log(usernames);
}
}
I tried replacing includes() with indexOf(), but still doesn't work.
As I said in the comment,you need to get the input value correctly each time it submit,so needs to put below code inside handleSubmit,otherwise uName will be null and abc will always be false(due to it execute before submiting)
let uName = form.elements["username"].value;
let abc = usernames.includes(uName);
let usernames = ["Harry", "Daisy", "Michael", "Sarah", "Sally"];
// Write your code here
let form = document.getElementById("registration-form");
form.addEventListener("submit", handleSubmit);
let errorMsg = document.getElementById("errors");
function handleSubmit(event) {
event.preventDefault();
let uName = form.elements["username"].value;
let abc = usernames.includes(uName);
if (abc) {
errorMsg.innerHTML = `<p>Sorry, the username ${uName} is already in use. Please choose another username.</p>
`;
} else {
usernames.push(uName);
form.submit();
console.log(usernames);
}
}
label {
display: block;
}
input {
margin-bottom: 1rem;
}
p {
color: red;
font-weight: bold;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Validating Form Data</title>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
<body>
<h3>Register your account:</h3>
<p id="errors"></p>
<form id="registration-form" method="POST" action="https://formdump.codeinstitute.net/">
<div class="username">
<label for="username">Username:</label>
<input id="username" name="username" type="text" required>
</div>
<div class="password">
<label for="password">Password:</label>
<input id="password" name="password" type="password" required>
</div>
<input type="submit">
</form>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="index.js"></script>
</body>
</html>
I have this code where I take the submissions from a form and append it to a HTML.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
* {
box-sizing: border-box;
}
div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}
input[type=text],
textarea,
select {
font: 17px Calibri;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=button] {
font: 17px Calibri;
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
</style>
</head>
<body>
<div>
<div>
<input type="text" id="txtName" placeholder="Enter your name" />
</div>
<div>
<input type="text" id="txtAge" placeholder="Enter your age" />
</div>
<div>
<input type="text" id="txtEmail" placeholder="Enter your email address" />
</div>
<div>
<select id="selCountry">
<option selected value="">-- Choose the country --</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
</div>
<div>
<input type="button" id="bt" value="Write" onclick="writeFile()" />
</div>
</div>
<p>Submission Number: <a id="clicks">1</a>
<div class="output-area">
<h4>Output</h4>
<div id="output" class="inner">
</div>
</div>
<span></span>
</body>
<script>
var clicks = 1;
let writeFile = () => {
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
const submissions = document.getElementById('clicks');
let data = [
`<p>Name: ${name.value}</p>`,
`<p>Age: ${age.value}</p>`,
`<p>Email: ${email.value}</p>`,
`<p>Country: ${country.value}</p>`,
`<p>Message: ${msg.value}</p>`,
`<p>Submission No: ${submissions.value}</p>`];
$('#output').append("<br />" + "<br />");
data.forEach(line => $('#output').append(line));
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
</script>
</html>
In this code, I wanted to print the users' current submission number. So I made a click counter.
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
And then I tried to put it into a constant and append it.
const submissions = document.getElementById('clicks');
But issue I'm facing here is, when appended my submission field comes out as Submission No: undefined. Any help would be much appreciated.
Your submissions element is an anchor (<a>) element. These HTML elements do not have a value field.
You can read the value the same way you are writing it, via innerHTML.
E.g.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
* {
box-sizing: border-box;
}
div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}
input[type=text],
textarea,
select {
font: 17px Calibri;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=button] {
font: 17px Calibri;
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
</style>
</head>
<body>
<div>
<div>
<input type="text" id="txtName" placeholder="Enter your name" />
</div>
<div>
<input type="text" id="txtAge" placeholder="Enter your age" />
</div>
<div>
<input type="text" id="txtEmail" placeholder="Enter your email address" />
</div>
<div>
<select id="selCountry">
<option selected value="">-- Choose the country --</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
</div>
<div>
<input type="button" id="bt" value="Write" onclick="writeFile()" />
</div>
</div>
<p>Submission Number: <a id="clicks">1</a>
<div class="output-area">
<h4>Output</h4>
<div id="output" class="inner">
</div>
</div>
<span></span>
</body>
<script>
var clicks = 1;
let writeFile = () => {
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
const submissions = document.getElementById('clicks');
let data = [
`<p>Name: ${name.value}</p>`,
`<p>Age: ${age.value}</p>`,
`<p>Email: ${email.value}</p>`,
`<p>Country: ${country.value}</p>`,
`<p>Message: ${msg.value}</p>`,
`<p>Submission No: ${submissions.innerHTML}</p>`]; // Use innerHTML here
$('#output').append("<br />" + "<br />");
data.forEach(line => $('#output').append(line));
clicks += 1;
document.getElementById("clicks").innerHTML = clicks;
}
</script>
</html>
Generally you could of course also insert the clicks variable directly (instead of the contents of the a element).
Note
It is highly insecure to render user-input into your HTML. It creates all sorts of vulnerabilities for malicious users so DON'T do this in production.
<a> tags don't have a value attribute. You'll have to use textContent or innerText to get the count.
console.log(document.getElementById('clicks').textContent);
<a id="clicks">2</a>
Ok, so submissions is not a input element and so it does not have the value method.
Instead of using submissions.value use submissions.innerHTML.
Also, rearrange the last few lines to make sure the clicks counter is updated before outputting all the data.
Edit: I did not realize your clicks counter was initially let clicks = 1; and not let clicks = 0;. The rearranging in the below JS will only work if clicks is initially set to 0.
I would generally advise to use let clicks = 0; because it makes more sense to potentially yourself and another person reading your code. If you think about it - when you make your counter (clicks), there have not been any clicks yet and so it would make more sense to have it initially set to 0.
let clicks = 0;
const writeFile = () => {
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
const submissions = document.getElementById('clicks');
// ++ is same thing as += 1
clicks++;
submissions.innerHTML = clicks;
let data = [
`<p>Name: ${name.value}</p>`,
`<p>Age: ${age.value}</p>`,
`<p>Email: ${email.value}</p>`,
`<p>Country: ${country.value}</p>`,
`<p>Message: ${msg.value}</p>`,
`<p>Submission No: ${submissions.innerHTML}</p>`
];
$('#output').append("<br />" + "<br />");
data.forEach(line => $('#output').append(line));
}
How can i add a content to html table with input fields.
For example here is html code:
function add(){
var name = document.getElementById("name");
var surname = document.getElementById("surname");
var output = document.getElementById("output");
output.innerHTML = "<tr><td>"+name+"</td><td>"+surname+"</td></tr>"
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
<style>
table,td{
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<form action="">
<div>
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div>
<label for="name">Surname</label>
<input type="text" id="surname">
</div>
</form>
<input type="button" onclick="add();" value="Add">
<div>
<table id="output">
<thead><td>Name</td><td>Surname</td></thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
I want to output my input fields in the table like rows.. but it does not work i dont know where is my problem i get [object HTMLInputElement].
And how can i make it work for entering more values because like this i can only enter one row
How about using this code?
It adds surname and name below the thead.
function add(){
var name = document.getElementById("name");
var surname = document.getElementById("surname");
var output = document.querySelector("#output tbody");
output.innerHTML += "<tr><td>"+name.value+"</td><td>"+surname.value+"</td></tr>"
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Document</title>
<style>
table,td{
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<form action="">
<div>
<label for="name">Name</label>
<input type="text" id="name">
</div>
<div>
<label for="name">Surname</label>
<input type="text" id="surname">
</div>
</form>
<input type="button" onclick="add();" value="Add">
<div>
<table id="output">
<thead><td>Name</td><td>Surname</td></thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
you should assign the value of the input fields like below.
function add(){
var name = document.getElementById("name");
var surname = document.getElementById("surname");
var output = document.getElementById("output");
output.innerHTML = "<tr><td>"+name.value+"</td><td>"+surname.value+"</td></tr>"
}
Try:
Give tbody an id to avoid removing thead
<tbody id="output2"></tbody>
function add(){
var name = document.getElementById("name");
var surname = document.getElementById("surname");
var output = document.getElementById("output2");
output.innerHTML = "<tr><td>" + name.value + "</td><td>" + surname.value + "</td></tr>";
}
You are trying to insert an HTML input element instead of the value of the element.
To make multiple entries possible try the last line of the function to:
output.innerHTML += "<tr><td>" + name.value + "</td><td>" + surname.value + "</td></tr>";
I want to dynamically add a <br> element after a dynamically added <div>. Even though the <br> is added in the code (I saw it under Elements in Chrome), the line doesnt appear on the screen. This is my code:
let guests = document.createDocumentFragment();
let k = 0;
let name = [];
for(let j = 0; j < compositions[i].guests.length; j++){
var br = document.createElement("br");
let divElement = document.createElement("div");
if(compositions[i].guests[k] != ";"){
name.push(compositions[i].guests[k]);
k++;
}
else {
k = k + 2;
divElement.innerHTML = name.join('');
divElement.setAttribute("class", "guestsDiv");
divElement.setAttribute("id", "guestsDiv");
divElement.setAttribute("style", "color:" + compositions[i].textColor);
guests.appendChild(br);
guests.appendChild(divElement);
//$('#guests').append('New Line<br>');
name = [];
}
}
This is the css:
.guestsDiv{
position: absolute;
display: none;
top: 16.5vw;
left: 59.5vw;
max-width: 2px;
font-size: 2vw;
line-height: 98%;
word-wrap: normal;
font-family: 'Quicksand', sans-serif;
}
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/config.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/config.js" defer></script>
<script src="js/main.js" defer></script>
</head>
<body>
<input type="text" class="config" id="backgroundImage" name="lname" placeholder="Background Image">
<br>
<input type="text" class="config" id="animation" name="lname" placeholder="Animation">
<br>
<input type="text" class="config" id="textColor" name="lname" placeholder="Text Color">
<br>
<input type="text" class="config" id="overlay" name="lname" placeholder="Overlay">
<br>
<input type="text" class="config" id="startDate" name="lname" placeholder="Start Date">
<br>
<input type="text" class="config" id="endDate" name="lname" placeholder="End Date">
<br>
<input id="clickMe" type="button" value="Enter values" onclick="configComp();"/>
<img id="setBackground">
<img id="logo">
<div id="rectangle"></div>
<div id="smallRectangle"></div>
<div id="welcomeFirstLine" style="position:absolute"></div>
<div id="welcomeSecondLine" style="position:absolute"></div>
<div id="emptyText" style="position:absolute"></div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/2/velocity.ui.min.js'></script>
</html>
It has to be something easy, but I cant see what. What am I doing wrong? Thanks!
P.S.: If you also have some other suggestions about my code I'm open to it. So please feel free to give me any feedback.
Edit: For clarification: all elements are shown, but one on top of eachother and not one under eachother as I want.
Edit2: More code added.
I guess it's an issue with the creation of br element. The thing is you are using the same br element each time in the loop, which means each time the dom paints it at different positions throughout the loop (which here is before the new div).
So you can either clone the br element or create a new one each time like :
let guests = document.createDocumentFragment();
let k = 0;
let name = [];
var br = document.createElement("br"); //<-- Outside, to avoid redeclaration.
for(let j = 0; j < compositions[i].guests.length; j++){
let divElement = document.createElement("div");
if(compositions[i].guests[k] != ";"){
name.push(compositions[i].guests[k]);
k++;
}
else {
k = k + 2;
divElement.innerHTML = name.join('');
divElement.setAttribute("class", "guestsDiv");
divElement.setAttribute("id", "guestsDiv");
divElement.setAttribute("style", "color:" + compositions[i].textColor);
guests.appendChild(br.cloneNode()); // <-- Here cloneNode() creates a new clone of br each time.
guests.appendChild(divElement);
//$('#guests').append('New Line<br>');
name = [];
}
}
I'm rather new to javascript and i'm trying to make a calculator that instantly calculates a total price of selected products.
The calculator works fine but right now the checkbox gets calculated alongside the rest of the products even when unchecked.
I'm trying to make it so that when it is unchecked the value is 0 and when it is checked it is 0.50.
This is what I have so far:
<head>
<style type="text/css">
.right{
margin-top: 10px;
width: 150px;
height: 45px;
background-color: #66CCFF;
}
p{
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
<!--
function calculate() {
var A1 = document.getElementById('Amount1').value
var A2 = document.getElementById('Amount2').value
var A3 = document.getElementById('Amount3').value
var PStart = 0;
var P1 = A1*1.50;
var P2 = A2*1.00;
var P3 = A3*1.00;
var PTotal = P1+P2+P3;
var Insert = document.getElementById("TotalPrice");
TotalPrice.innerHTML= PTotal;
}
-->
</script>
</head>
<body onload="calculate()">
<form>
<fieldset>
<legend>Price</legend>
<div class="FormRow">
<label for="Amount2">Console $1,50</label>
<input type="text" min=0 id="Amount1" name="Amount1" oninput="calculate()" />
</div>
<div class="FormRow">
<label for="Amount2">Controller $1,00</label>
<input type="text" min=0 id="Amount2" name="Amount2" oninput="calculate()" />
</div>
<div class="FormRow">
<label for="Amount3">Batteries? $0,50</label>
<input type="checkbox" value="0.50" id="Amount3" name="Amount3" onchange="calculate()"/>
</div>
<div class="right" >
<p><b>Total price:</b></p>
<p id="TotalPrice">
</p>
</div>
</fieldset>
</form>
</body>
Try this:
var A1 = document.getElementById('Amount1').value
var A2 = document.getElementById('Amount2').value
var A3 = document.getElementById('Amount3').checked ?
document.getElementById('Amount3').value : 0;
Demo
You can use document.getElementById('Amount1').checked to verify if the checkbox is checked. So your code would look like
var A1 = document.getElementById('Amount1').checked ?
parseFloat(document.getElementById('Amount1').value) :
0;
var A2 = document.getElementById('Amount1').checked ?
parseFloat(document.getElementById('Amount1').value) :
0;
var Total = A1 + A2;