How do I submit user-input data and reflect it in a vertical table?
Question
I am a beginner and I am trying to write a simple program that calculates a late fee based on a given previous invoice amount/payments. I am stumped in the early portion of this project and basically where I am trying to start is by taking the user inputted values and having them show in my table below, for some reason I cannot figure this out. You can check out what I have so far here: http://176.32.230.9/testingnicoledelarosa.com/
This is the code I have thus far:
<!doctype html>
<html>
<head>
<title>Late Fee Calculator</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function addRow() {
var table= document.getElementByID("results");
var row= document.createElement("tr");
var td1= document.createElement("td");
var td2= document.createElement("td");
var td3= document.createElement("td");
td1.innerHTML = document.getElementByID("invoiceAmount").value;
td2.innerHTML = document.getElementByID("previousBalance").value;
td3.innerHTML = document.getElementByID("paymentAdjustments").value;
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
table.children[0].appendChild(row);
}
</script>
</head>
<body>
<div>
<form>
Invoice Amount:<br>
<input type="number" id="invoiceAmount">
<br>
<br>
Previous Balance:<br>
<input type="number" id="previousBalance">
<br>
<br>
Payments/Adjustments:<br>
<input type="number" id="paymentAdjustments">
<br>
<br>
<input type="submit" value="Submit" onclick="addRow()">
</form>
</div>
<br>
<div>
<table border="1" id="results">
<tr>
<th>Total Invoice Amount</th>
<td>data</td>
</tr>
<tr>
<th>Previous Balance</th>
<td>data</td>
</tr>
<tr>
<th>Payments/Adjustments</th>
<td>data</td>
</tr>
<tr>
<th>Late Fee</th>
<td>data</td>
</tr>
<tr>
<th>Balance (Amount Due)</th>
<td>data</td>
</tr>
</table>
</div>
</body>
</html>
1 answers
solution1
0 ACCPTED 2015-03-16 18:39:52
Well, there are two reasons.
First, the "document.getElementByID" calls should be "document.getElementById" (lower-case d).
But, to prevent your form from actually submitting and reloading the page (and in your case clearing out the data in the table), you could add a 'return false;' at the end of your addRow() function. So it would look like this:
function addRow() {
var table= document.getElementById("results");
var row= document.createElement("tr");
var td1= document.createElement("td");
var td2= document.createElement("td");
var td3= document.createElement("td");
td1.innerHTML = document.getElementById("invoiceAmount").value;
td2.innerHTML = document.getElementById("previousBalance").value;
td3.innerHTML = document.getElementById("paymentAdjustments").value;
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
table.children[0].appendChild(row);
return false;
}
And your input tag would then look like this:
<input type="submit" value="Submit" onclick="return addRow();">
Hope that helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.