I am having trouble trying to add the total of a div from an array. I am trying to add the total miles for the input and put it in a table. I want to just add the miles together, not the flight numbers. I would also like to have an id set for it so that I can call on to the total miles in another section.
var FlightNumber = new Array();
var Miles = new Array();
function insert() {
var FlightNumberValue = document.getElementById('FlightNumber').value;
var MilesValue = document.getElementById('Miles').value;
FlightNumber[FlightNumber.length] = FlightNumberValue;
Miles[Miles.length] = MilesValue;
}
function showFlightNumber() {
var content = "<b></b><br>";
for (var i = 0; i < FlightNumber.length; i++) {
content += FlightNumber[i] + "<br>";
}
document.getElementById('display').innerHTML = content;
}
function showMiles() {
var content = "<b></b><br>";
for (var i = 0; i < Miles.length; i++) {
content += Miles[i] + "<br>";
}
document.getElementById('display2').innerHTML = content;
}
table,
th,
td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
<form id="form">
<h1>Find out what Flight Class Member you are!</h1>
<p>To use, please input the flight number and number of miles.
<p>
<br>
<label for="FlightNumber">Flight Number</label> <input id="FlightNumber" type="text" />
<br>
<label for="Miles">Miles</label><input id="Miles" type="text" />
<br>
<br>
<input type="button" value="Save" onclick="insert();">
<input type="button" value="Show flight number" onclick="showFlightNumber();"> <br>
<input type="button" value="Show miles" onclick="showMiles();"> <br>
<hr>
</form>
<table style="width:100%">
<tr>
<th>Flight Number</th>
<th>Miles</th>
</tr>
<tr>
<td>
<div id="display">
</div>
</td>
<td>
<div id="display2">
</div>
</td>
</tr>
<td>Total Miles:</td>
<td></td>
</table>
I was able to get the miles to total by putting an id on the total column. Then I was able to use the Miles array you created and just parse the string value to an int and total those values.
Please note this code is not very clean. When you insert a new flight you should really be inserting a new row, not break lines. There are javascript frameworks out there that make it really easy to iterate over arrays, e.g. AngularJs / Angular / React / Vue.js.
<html>
<head>
<title>Member Info</title>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
</style>
<script type="text/javascript">
var FlightNumber=new Array();
var Miles=new Array();
function insert(){
var FlightNumberValue = document.getElementById('FlightNumber').value;
var MilesValue = document.getElementById('Miles').value;
FlightNumber[FlightNumber.length]=FlightNumberValue;
Miles[Miles.length]=MilesValue;
}
function showFlightNumber() {
var content="<b></b><br>";
for(var i = 0; i < FlightNumber.length; i++) {
content +=FlightNumber[i]+"<br>";
}
document.getElementById('display').innerHTML = content;
}
function showMiles() {
var content="<b></b><br>";
for(var i = 0; i < Miles.length; i++) {
content +=Miles[i]+"<br>";
}
document.getElementById('display2').innerHTML = content;
// new code
var total=0;
for(var i = 0; i < Miles.length; i++) {
total += Number.parseInt(Miles[i]);
}
document.getElementById('total-miles').innerHTML = total;
}
</script>
</head>
<body>
<form id="form">
<h1>Find out what Flight Class Member you are!</h1>
<p>To use, please input the flight number and number of miles.<p>
<br>
<label for="FlightNumber">Flight Number</label> <input id="FlightNumber" type="text" />
<br>
<label for="Miles">Miles</label><input id="Miles" type="text" />
<br>
<br>
<input type="button" value="Save" onclick="insert();">
<input type="button" value="Show flight number" onclick="showFlightNumber();"> <br>
<input type="button" value="Show miles" onclick="showMiles();"> <br>
<hr>
</form>
<table style="width:100%">
<tr>
<th>Flight Number</th>
<th>Miles</th>
</tr>
<tr>
<td><div id="display">
</div></td>
<td><div id="display2">
</div></td>
</tr>
<td>Total Miles:</td>
<td id="total-miles"></td>
</table>
</body>
</html>
Related
basically, when user entered some values in each added rows, those values and the number of added rows don't disappear... how is that possible?
here's my code:
function delPlace(row) {
var txtb = document.getElementById('travel');
var len = txtb.rows.length;
if (len > 2) {
var i = row.parentNode.parentNode.rowIndex;
document.getElementById('travel').deleteRow(i);
} else {
alert("Can't delete all rows. One row must at least remain.");
}
}
function addPlace() {
var txtb = document.getElementById('travel');
var add_row = txtb.rows[1].cloneNode(true);
var len = txtb.rows.length;
add_row.cells[0].innerHTML = len;
var inp = add_row.cells[1].getElementsByTagName('input')[0];
inp.id += len;
inp.value = '';
txtb.appendChild(add_row);
}
<table id="travel">
<p> List the countries/cities the person had traveled to/from in the past 15 days before diagnosis </p>
<tr><input type="button" id="add_place" value="Add" onclick="addPlace()" /></tr>
<tr>
<td style="display:none"></td>
<td>
<input type="text" class="form-control" name="travel_history[]" value="" placeholder="Enter text here..."
style="width:500px">
</td>
<td>
<input type="button" id="del_place" value="Remove" onclick="delPlace(this)" />
</td>
</tr>
</table>
</div>
i am trying to create a table to check upon my expanses but when i try to put my input inside my newly created table cells they are empty. Why is that so? I am wondering if it is because i am using the wrong format (like innerHTML instead of textContent) but everything i tried show either empty or "undefined"
let dep = document.getElementById('denom').innerHTML;
let dat = document.getElementById('choixDate').innerHTML;
let mont = document.getElementById("montant").innerHTML;
let create = document.getElementById("ajouterDepense");
let liste = document.getElementById("listeDepense");
function nouvelleLigne(){
var newline = liste.insertRow();
var newCell = newline.insertCell();
var newText = document.createTextNode(dep)
newCell.appendChild(newText);
var newCell1 = newline.insertCell(1);
var newText1 = document.createTextNode(dat)
newCell1.appendChild(newText1)
var newCell2 = newline.insertCell(2);
var newText2 = document.createTextNode(mont)
newCell2.appendChild(newText2)
};
create.addEventListener('click', function() {
nouvelleLigne();
});
document.getElementById('ajouterDepense').onclick = function(event){
event.preventDefault()
};
table,
td{
border: 1px solid #333;
width: 100%
}
table{
table-layout: fixed;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Expanse.css">
<title>Expanse</title>
<script src="Expanse.js" async></script>
</head>
<body>
<div class="content">
<h1> Expanse Tracker</h1>
<h2> Add a new Item</h2>
<form>
<label for="denom"> Nom de la dépense:</label>
<input type="text" id="denom" name="denom" required minlength="1" maxlength="40" size="40">
<br>
<br>
<label for="choixDate"> Date: </label>
<input type = "date" id="choixDate" name="choixDate" size="40">
<label for="montant"> Montant de la dépense:</label>
<input type="number" id="montant" name ="montant" size="30">
<button id="ajouterDepense" type="submit"> Ajouter Dépense </button>
</form>
<br>
<br>
<table id="listeDepense">
<thead>
<tr>
<th> Name </th>
<th> Date </th>
<th> Amount </th>
</tr>
</thead>
<tbody>
<tr>
<td>Vos dépenses vont ici!</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
let create = document.getElementById("ajouterDepense");
let liste = document.getElementById("listeDepense");
function nouvelleLigne(){
var newline = liste.insertRow();
var newCell = newline.insertCell();
var newText = document.createTextNode(document.getElementById('denom').value)
newCell.appendChild(newText);
var newCell1 = newline.insertCell(1);
var newText1 = document.createTextNode(document.getElementById('choixDate').value)
newCell1.appendChild(newText1)
var newCell2 = newline.insertCell(2);
var newText2 =document.createTextNode(document.getElementById("montant").value*1);
newCell2.appendChild(newText2)
};
create.addEventListener('click', function() {
nouvelleLigne();
});
document.getElementById('ajouterDepense').onclick = function(event){
event.preventDefault()
};
table,
td{
border: 1px solid #333;
width: 100%
}
table{
table-layout: fixed;
}
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Expanse.css">
<title>Expanse</title>
<script src="Expanse.js" async></script>
</head>
<body>
<div class="content">
<h1> Expanse Tracker</h1>
<h2> Add a new Item</h2>
<form>
<label for="denom"> Nom de la dépense:</label>
<input type="text" id="denom" name="denom" required minlength="1" maxlength="40" size="40">
<br>
<br>
<label for="choixDate"> Date: </label>
<input type = "date" id="choixDate" name="choixDate" size="40">
<label for="montant"> Montant de la dépense:</label>
<input type="number" id="montant" name ="montant" size="30">
<button id="ajouterDepense" type="submit"> Ajouter Dépense </button>
</form>
<br>
<br>
<table id="listeDepense">
<thead>
<tr>
<th> Name </th>
<th> Date </th>
<th> Amount </th>
</tr>
</thead>
<tbody>
<tr>
<td>Vos dépenses vont ici!</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have been able to make this work as it adds into <div></div> tags now I want to remove this array numbers 0,1,2,3 and feed the data into <div></div> tags in HTML, How can this be done, How do I make it insert inside the div tags
<html>
<head></head>
<title>Js test</title>
<h1>Js Test</h2>
<body>
<script type="text/javascript">
var data = new Array();
function addElement(){
data.push(document.getElementById('ins_name').value);
data.push(document.getElementById('gpa').value);
data.push(document.getElementById('da').value);
document.getElementById('ins_name').value='';
document.getElementById('gpa').value='';
document.getElementById('da').value='';
display();
}
function display(){
var str = '';
for (i=0; i<data.length;i++)
{
//str+="<tr><td>" + data[i] + "</td></tr>";
"<tr>
<td align=center width=176>Institution </td>
<td align=center>GPA</td>
<td align=center width=187>Degree Awarded</td>
</tr>"
"<tr>
<td align=center width=176> </td>
<td align=center> </td>
<td align=center width=187> </td>
</tr>"
}
document.getElementById('display').innerHTML = str;
}
</script>
<form name="jamestown" id="jamestown" method="post" action="samris.php" />
Institution : <input type="text" name="ins_name" id="ins_name" /></br>
GPA : <input type="text" name="gpa" id="gpa" /></br>
Degree Awarded : <input type="text" name="da" id="da" /></br>
</p>
<input type="button" name="btn_test" id="btn_test" value="Button Add Test" onClick='addElement()'; /></br>
</form>
<div id=display></div>
</body>
</html>
Since you've been adding more and more requirements in the comments, the innerHTML += "" approach stops working.
I advice you to create elements using document.createElement and add them to your document using Node.appendChild.
It's not really an answer to the initial question, but I figured it helps you more than continuing conversation in the comments. Maybe you can edit your question to reflect the additional requirements.
Let me know if there's stuff I used that you don't yet understand. Happy to elaborate!
var inputIds = ["ins_name", "gpa", "da"];
var inputElements = inputIds.map(getById);
var tbody = getById("display");
// Create a new row with cells, clear the inputs and add to tbody
function addRow() {
// Create a row element <tr></tr>
var row = document.createElement("tr");
inputElements.forEach(function(input) {
// For each input, create a cell
var td = document.createElement("td");
// Add the value of the input to the cell
td.textContent = input.value;
// Add the cell to the row
row.appendChild(td);
// Clear the input value
input.value = "";
});
// Add the new row to the table body
tbody.appendChild(row);
}
getById("btn_test").addEventListener("click", addRow);
// I added this function because document.getElementById is a bit too long to type and doesnt work with `map` without binding to document
function getById(id) {
return document.getElementById(id);
}
Institution : <input type="text" name="ins_name" id="ins_name" /><br>
GPA : <input type="text" name="gpa" id="gpa" /><br>
Degree Awarded : <input type="text" name="da" id="da" /><br>
<input type="button" id="btn_test" name="btn_test" value="Add Test"/><br>
<table>
<thead>
<tr>
<th>Institution</th>
<th>GPA</th>
<th>Degree</th>
</tr>
</thead>
<tbody id="display">
</tbody>
</table>
I've a text field in table with id name .
I have added a validation on it.
But its not working
<td>Name:</td>
<td>
<input type="text" id="name" class="required"/>(required)
</td>
$("#name").focusout(function(){
if (!$(this).val()) {
alert("This field is required");
$(this).focus();
}
});
I have complete code on jsfiddle .
Please check link
Just make sure to put it inside document ready and it'll work just fine:
$(function () {
$("#name").focusout(function () {
if (!$(this).val()) {
alert("This field is required");
$(this).focus();
}
});
});
jsfiddle DEMO
Edit: full page requested by OP:
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Book Library</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>
var count = 1;
var rating;
function addRow() {
var myName = document.getElementById("name");
var auther = document.getElementById("auther");
var publish = document.getElementById("publish");
var ratings = document.getElementsByName("rating");
for (var i = 0; i < ratings.length; i++) {
if (ratings[i].checked) {
rating = ratings[i];
}
}
var table = document.getElementById("myTableData");
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.insertCell(0).innerHTML = count;
row.insertCell(1).innerHTML = myName.value;
row.insertCell(2).innerHTML = auther.value;
row.insertCell(3).innerHTML = publish.value;
row.insertCell(4).innerHTML = rating.value;
count = count + 1;
}
function load() {
console.log("Page load finished");
}
$(function() {
$("#name").focusout(function () {
console.log('bla');
if (!$(this).val()) {
alert("This field is required");
$(this).focus();
}
});
});
</script>
</head><body onload="load()">
<div id="mydata">
<b>Current data in the system ...</b>
<table id="myTableData" border="1" style="width:100%">
<tr id="templateRow">
<th>ID</th>
<th>Name</th>
<th>Authers</th>
<th>Published</th>
<th>Ratings</th>
</tr>
</table>
<br/>
</div>
<div id="myform">
<b>Simple form with name and age ...</b>
<table style="width:100%">
<tr>
<td>Name:</td>
<td>
<input type="text" id="name">
</td>
</tr>
<tr>
<td>Auther:</td>
<td>
<input type="text" id="auther">
</td>
</tr>
<tr>
<td>Published:</td>
<td>
<input type="date" id="publish">
</td>
</tr>
<tr>
<td>Rating:</td>
<td>
<input type="radio" value="1" id="rating" name="rating">1
<input type="radio" value="2" id="rating2" name="rating">2
<input type="radio" value="3" id="rating3" name="rating">3
<input type="radio" value="4" id="rating4" name="rating">4
<input type="radio" value="5" id="rating5" name="rating">5</td>
</tr>
</table>
<br>
<input type="button" id="add" value="Add" onclick="Javascript:addRow()">
</div>
</body>
</html>
I was trying to create a program to add rows dynamically using Javascript in HTML Table using the Add Row Button. There seems to be an error.
<html>
<head>
<title>Home - First Website</title>
<style>
table{
width: 100%;
}
td{
padding: 8px;
border: 1px solid;
}
input[type="text"]{
width: 100%;
}
</style>
<script type="text/javascript">
function add(){
var num=parseInt(document.getElementById("t1").length+1);
var a=document.createElement("td");
var anode=document.createTextNode(num);
a.appendChild(anode);
document.getElementById("t1").appendChild(a);
a=document.createElement("td");
anode=document.createElement("input");
var b=document.createAttribute("type");
b.value="checkbox";
anode.setAttributeNode(b);
a.appendChild(anode);
document.getElementById("t1").appendChild(a);
a=document.createElement("td");
anode=document.createElement("input");
b=document.createAttribute("type");
b.value="text";
anode.setAttributeNode(b);
a.appendChild(anode);
document.getElementById("t1").appendChild(a);
}
</script>
</head>
<body>
<table name="t1">
<tr>
<input type="button" value="Add Row" onclick="add()">
</tr>
<tr>
<td>1.</td><td><input type="checkbox"></td><td><input type="text" style="width:100%;"></td>
</tr>
</table>
</body>
</html>
There are multiple problems in the code :
1) for adding row why are you doing this :
var num=parseInt(document.getElementById("t1").length+1);
: please note you haven't given your table any id.
I think you need count to number your rows. You can get that by :
var num =document.getElementById("t1").rows.length;
2) For adding a row, you have not created <tr> element!
Here's the corrected jsFiddle :
http://jsfiddle.net/thecbuilder/kCm2D/1/
update : changed the way to get number of rows.
js
function add() {
var num = var num =document.getElementById("t1").rows.length;
console.log(num);
var x = document.createElement("tr");
var a = document.createElement("td");
var anode = document.createTextNode(num);
a.appendChild(anode);
x.appendChild(a);
a = document.createElement("td");
anode = document.createElement("input");
var b = document.createAttribute("type");
b.value = "checkbox";
anode.setAttributeNode(b);
a.appendChild(anode);
x.appendChild(a);
a = document.createElement("td");
anode = document.createElement("input");
b = document.createAttribute("type");
b.value = "text";
anode.setAttributeNode(b);
a.appendChild(anode);
x.appendChild(a);
document.getElementById("t1").appendChild(x);
}
html
<table id="t1" name="t1"> <!-- "t1" is id as well -->
<tr>
<input type="button" value="Add Row" onclick="add()" />
</tr>
<tr>
<td>1.</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="text" style="width:100%;" />
</td>
</tr>
</table>
You're using getElementById but your table has a name not an id.
<table name="t1">
to
<table id="t1">
The error is on document.getElementById("t1"), but your table doesn't have an id="t1", it has a name="ti".
Update to this:
<table id="t1">