We Keep Coding

Calculating table quantity and multiplication

Table_exaple
Hello,
I need some help.
My problem is that I can't figure out how to do this. The whole point of my simple project is to create a table only with input text boxes where only integers will be added, and I need to sum columns only.
As Quantity sum I mean to calculate the whole column and by Calculated sum I need to calculate the Quantity * value of the Heading.
For example: Quantity of column 5$ is 50 therefore the calculated cell must be 250$.
I would also like to add a button that adds columns dynamically and the heading is Custom... so somehow the heading value should be saved as a variable too.
I tried something with jQuery, but it's not relevant because I want that to be calculated dynamically no matter what input I enter in the heading.
Here is my bad jQuery for each column, it works, but that's not the goal.
$(document).ready(function() {
$(".txt").each(function() {
$(this).keyup(function() {
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
$(".txt").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum").html(sum);
$("#calc").html(sum);
}
$(document).ready(function() {
$(".txt1").each(function() {
$(this).keyup(function() {
calculateSum1();
});
});
});
function calculateSum1() {
var sum = 0;
$(".txt1").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum1").html(sum);
$("#calc1").html(sum *= 2);
}
$(document).ready(function() {
$(".txt2").each(function() {
$(this).keyup(function() {
calculateSum2();
});
});
});
function calculateSum2() {
var sum = 0;
$(".txt2").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum2").html(sum);
$("#calc2").html(sum *= 3);
}
$(document).ready(function() {
$(".txt3").each(function() {
$(this).keyup(function() {
calculateSum3();
});
});
});
function calculateSum3() {
var sum = 0;
$(".txt3").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum3").html(sum);
$("#calc3").html(sum *= 5);
}
$(document).ready(function() {
$(".txt4").each(function() {
$(this).keyup(function() {
calculateSum4();
});
});
});
function calculateSum4() {
var sum = 0;
$(".txt4").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum4").html(sum);
$("#calc4").html(sum *= 10);
}
$(document).ready(function() {
$(".txt5").each(function() {
$(this).keyup(function() {
calculateSum5();
});
});
});
function calculateSum5() {
var sum = 0;
$(".txt5").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum5").html(sum);
$("#calc5").html(sum *= 20);
}
.tftable {
font-size: 12px;
color: #333333;
width: 70%;
margin-right: 15%;
margin-left: 15%;
border-width: 1px;
border-color: #a9a9a9;
border-collapse: collapse;
}
.tftable th {
font-size: 12px;
background-color: #6382c59a;
border-width: 1px;
padding: 18px;
border-style: solid;
border-color: #474747;
text-align: left;
}
.tftable tr {
background-color: #ffffff;
}
.tftable td {
font-size: 12px;
border-width: 2px;
padding: 5px;
border-style: solid;
border-color: #a9a9a9;
}
.tftable td:nth-child(2n+2) {
background: #CCC;
}
.tftable tr td input {
height: 100%;
background: none;
}
.tftable tr th {
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
.tftable tr td {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
width: 15rem;
}
.tftable tr td input {
border: none;
text-align: center;
padding: 0.7rem;
width: 78%;
}
.button {
padding: 7px 15px;
text-align: center;
color: #fff;
background-color: #04AA6D;
border: none;
border-radius: 5px;
}
.button:hover {
background-color: #3e8e41;
}
.button:active {
background-color: #3e8e41;
transform: scale(1.03);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<table id="tbl" class="tftable" border="1">
<tr>
<button class="button" onclick="addColumn()">Add Column</button>
<th>Types</th>
<th>1 $</th>
<th>2 $</th>
<th>3 $</th>
<th>5 $</th>
<th>10 $</th>
<th>20 $</th>
</tr>
<tr>
<td>Type 1</td>
<td><input type="text" class="txt" name="txt" id="1"></td>
<td><input type="text" class="txt1" name="txt" id="2"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 2</td>
<td><input type="text" class="txt" name="txt" id="1"></td>
<td><input type="text" class="txt1" name="txt" id="2"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 3</td>
<td><input type="text" class="txt" name="txt" id="1"></td>
<td><input type="text" class="txt1" name="txt" id="2"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 4</td>
<td><input type="text" class="txt" name="txt" id="1"></td>
<td><input type="text" class="txt1" name="txt" id="2"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 5</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt1" name="txt"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 6</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt1" name="txt"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 7</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt1" name="txt"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 8</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt1" name="txt"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 9</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt1" name="txt"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr>
<td>Type 10</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt1" name="txt"></td>
<td><input type="text" class="txt2" name="txt"></td>
<td><input type="text" class="txt3" name="txt"></td>
<td><input type="text" class="txt4" name="txt"></td>
<td><input type="text" class="txt5" name="txt"></td>
</tr>
<tr style="border-top: 5px solid black">
<td>Quantity</td>
<td><span id="sum"></span></td>
<td><span id="sum1"></span></td>
<td><span id="sum2"></span></td>
<td><span id="sum3"></span></td>
<td><span id="sum4"></span></td>
<td><span id="sum5"></span></td>
</tr>
<td>Calculated</td>
<td><span id="calc"></span></td>
<td><span id="calc1"></span></td>
<td><span id="calc2"></span></td>
<td><span id="calc3"></span></td>
<td><span id="calc4"></span></td>
<td><span id="calc5"></span></td>
</tr>
</table>

The pattern you're looking to follow is called 'Don't Repeat Yourself', or DRY. It's core principle is to create reusable generic structures which do not contain identifiers, but simply any metadata required for processing.
In this case you can provide all the input elements with common class names, not incremental ones nor id. Then in the JS you can determine which column the user is interacting with using index(). From there you can use map() to build an array of all the values in that column and sum them. Finally you can store the column price in a data attribute on the heading and multiply the quantity by that figure to give you your calculated total.
In practice it will look something like the below. Note that this JS will work for an infinite number of rows and columns, all it depends on is the data attribute on the th in order to provide the unit price.
jQuery($ => {
$('.add-column').on('click', e => {
console.log('addColumn() logic here...');
});
let $table = $('#tbl');
$('.txt').on('input', e => {
let tdIndex = $(e.target).closest('td').index();
let colQuantities = $table.find(`tbody td:nth-child(${tdIndex + 1})`).map((i, td) => parseFloat($(td).find('input').val()) || null).get();
let colSum = colQuantities.reduce((acc, cur) => acc + cur, 0);
let colPrice = $table.find(`thead th:nth-child(${tdIndex + 1})`).data('price');
$table.find(`tbody td:nth-child(${tdIndex + 1}) .sum`).text(colSum);
$table.find(`tbody td:nth-child(${tdIndex + 1}) .calc`).text((colSum * colPrice).toLocaleString('en-US', {
style: 'currency',
currency: 'USD'
}));
});
});
input {
width: 50px;
}
.quantity-row {
border-top: 5px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button add-column">Add Column</button>
<table id="tbl" class="tftable" border="1">
<thead>
<tr>
<th>Types</th>
<th data-price="1">1 $</th>
<th data-price="2">2 $</th>
<th data-price="3">3 $</th>
<th data-price="5">5 $</th>
<th data-price="10">10 $</th>
<th data-price="20">20 $</th>
</tr>
</thead>
<tbody>
<tr>
<td>Type 1</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 2</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 3</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 4</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 5</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 6</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 7</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 8</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 9</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr>
<td>Type 10</td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
<td><input type="text" class="txt" name="txt"></td>
</tr>
<tr class="quantity-row">
<td>Quantity</td>
<td><span class="sum"></span></td>
<td><span class="sum"></span></td>
<td><span class="sum"></span></td>
<td><span class="sum"></span></td>
<td><span class="sum"></span></td>
<td><span class="sum"></span></td>
</tr>
<tr>
<td>Calculated</td>
<td><span class="calc"></span></td>
<td><span class="calc"></span></td>
<td><span class="calc"></span></td>
<td><span class="calc"></span></td>
<td><span class="calc"></span></td>
<td><span class="calc"></span></td>
</tr>
</tbody>
</table>
The other important parts to note here are that you do not need to repeat document.ready handlers for each block of code, you can place all logic which depends on it in a single handler.
In addition, you should not us onclick or other onX attributes as they are outdated and no longer good practice. Use unobtrusive event handlers instead, as the example above shows.

First: The $(document).ready() listener is only necessary to declare the event listeners for the inputs. The rest of the code can be outside.
Calculation
You have ten times the same pair of event listener and function. By getting the index of the input containing cell with $(this).parent().index() you can reduce it to only one pair. For the calculation you have to call the function calculateSum() with that index as parameter.
In the function you have to get the value of the head cell of the column for the multiplication. You can do this by selecting the th with the same index and parse its innerHTML as a number.
let factor = parseFloat($("#tbl tr").first().find('th').eq(index).html());
Last you can use the index to select the column with concatenation, for example: $("#sum" + index).
The rest works like in your code.
Adding a column
I recommend to not use an inline event listener in your button and instead declare it in the script. The function addColumn() would be the anonymous function of the listener:
$('#add_column').click(function() {...});
In that function you first have to get the value of the new head cell (here price). The rest of the function is only executed if the value is true (!!price / double negation for converting to a boolean), which means the user typed in a value.
Then you have to get the number of inputs per row, for example from the second row:
const cell_count = $("#tbl tr").eq(2).find('input').length;
and the number of table rows, minus the last two rows "Quantity" and "Calculated":
const row_count = $("#tbl tr").length - 2;
After that you have to add to each table row a new cell. The number of table rows is used to iterate over the rows with inputs and the number of inputs per row is used for making the ids and classes with concatenation.
Finally you need to redeclare the event listeners for the inputs, so that the new inputs are considered. For that you first have to remove the old listeners and than redeclare them.
$("#tbl input").off('keyup').on('keyup', function() {...});
Working example:
Because name and id of the inputs aren't used i removed them for simplicity. I changed the outdated var to let and const.
function calculateSum(index) {
let factor = parseFloat($("#tbl tr").first().find('th').eq(index).html());
let sum = 0;
index = index == 1 ? '' : index - 1;
$(".txt" + index).each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#sum" + index).html(sum);
$("#calc" + index).html(sum * factor);
}
$(document).ready(function() {
$("#tbl input").on('keyup', function() {
calculateSum($(this).parent().index());
});
});
$('#add_column').click(function() {
const price = prompt('Add the price for the new column (only digits):', '30');
if (!!price) {
const cell_count = $("#tbl tr").eq(2).find('input').length;
const row_count = $("#tbl tr").length - 2;
for (let i = 1; i < row_count; i++) {
$("#tbl tr").eq(i).append(
$('<td></td>').append(
$('<input>').attr({
type: 'text'
}).addClass('txt' + cell_count)
)
);
}
$("#tbl tr").first().append(
$('<th></th>').html(price + ' $')
);
$("#tbl tr:nth-last-child(2)").append(
$('<td></td>').append(
$('<span></span>').attr({
id: ('sum' + cell_count)
})
)
);
$("#tbl tr:last-child").append(
$('<td></td>').append(
$('<span></span>').attr({
id: ('calc' + cell_count)
})
)
);
$("#tbl input").off('keyup').on('keyup', function() {
calculateSum($(this).parent().index());
});
}
});
.tftable {
font-size: 12px;
color: #333333;
width: 70%;
margin-right: 15%;
margin-left: 15%;
border-width: 1px;
border-color: #a9a9a9;
border-collapse: collapse;
}
.tftable th {
font-size: 12px;
background-color: #6382c59a;
border-width: 1px;
padding: 18px;
border-style: solid;
border-color: #474747;
text-align: left;
}
.tftable tr {
background-color: #ffffff;
}
.tftable td {
font-size: 12px;
border-width: 2px;
padding: 5px;
border-style: solid;
border-color: #a9a9a9;
}
.tftable td:nth-child(2n+2) {
background: #CCC;
}
.tftable tr td input {
height: 100%;
background: none;
}
.tftable tr th {
font-size: 20px;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
.tftable tr td {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
width: 15rem;
}
.tftable tr td input {
border: none;
text-align: center;
padding: 0.7rem;
width: 78%;
}
.button {
padding: 7px 15px;
text-align: center;
color: #fff;
background-color: #04AA6D;
border: none;
border-radius: 5px;
}
.button:hover {
background-color: #3e8e41;
}
.button:active {
background-color: #3e8e41;
transform: scale(1.03);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add_column" class="button">Add Column</button>
<table id="tbl" class="tftable" border="1">
<tr>
<th>Types</th>
<th>1 $</th>
<th>2 $</th>
<th>3 $</th>
<th>5 $</th>
<th>10 $</th>
<th>20 $</th>
</tr>
<tr>
<td>Type 1</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 2</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 3</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 4</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 5</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 6</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 7</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 8</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 9</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr>
<td>Type 10</td>
<td><input type="text" class="txt"></td>
<td><input type="text" class="txt1"></td>
<td><input type="text" class="txt2"></td>
<td><input type="text" class="txt3"></td>
<td><input type="text" class="txt4"></td>
<td><input type="text" class="txt5"></td>
</tr>
<tr style="border-top: 5px solid black">
<td>Quantity</td>
<td><span id="sum"></span></td>
<td><span id="sum1"></span></td>
<td><span id="sum2"></span></td>
<td><span id="sum3"></span></td>
<td><span id="sum4"></span></td>
<td><span id="sum5"></span></td>
</tr>
<tr>
<td>Calculated</td>
<td><span id="calc"></span></td>
<td><span id="calc1"></span></td>
<td><span id="calc2"></span></td>
<td><span id="calc3"></span></td>
<td><span id="calc4"></span></td>
<td><span id="calc5"></span></td>
</tr>
</table>

How to reset rows in a table

below is a table that contains text boxes. I want to reset each row individually, but right now it is resetting the whole table. What is the best known method to attack this problem? At the moment I am using jquery, but I am not sure if javascript would work any better. I also did try to iterate through each row, but somehow I got the same results and nothing changed.
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
<html>
<body>
<form id="myForm">
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>reset</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="DeMarcus Cousins"></td>
<td><input type="text" value="C"></td>
<td><input type="text" value="6'11"""></td>
<td><input type="text" value="08-13-1990"></td>
<td><input type="text" value="$4,917,000"></td>
<td><input type="reset" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Isaiah Thomas"></td>
<td><input type="text" value="PG"></td>
<td><input type="text" value="5'9"""></td>
<td><input type="text" value="02-07-1989"></td>
<td><input type="text" value="$473,604"></td>
<td><input type="reset" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Ben McLemore"></td>
<td><input type="text" value="SG"></td>
<td><input type="text" value="6'5"""></td>
<td><input type="text" value="02-11-1993"></td>
<td><input type="text" value="$2,895,960"></td>
<td><input type="reset" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="reset" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="reset" value="Reset"></td>
</tr>
</tbody>
</table>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#myForm').trigger("reset");
});
</script>
</body>
</html>

I changed your input type reset to type button.
On click such a button can set the value of each input to an empty string:
// save initial values in a data attribute for each input....
$('#myForm :input:not([type="button"])').each(function(idx, ele) {
ele.dataset.initvalue = ele.value;
});
$('#myForm [type="button"]').on('click', function(e) {
// reset current row............
$(this).closest('tr').find(':input:not([type="button"])').each(function(idx, ele) {
// restore the initial value
ele.value = ele.dataset.initvalue;
})
});
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>reset</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="DeMarcus Cousins"></td>
<td><input type="text" value="C"></td>
<td><input type="text" value="6'11"""></td>
<td><input type="text" value="08-13-1990"></td>
<td><input type="text" value="$4,917,000"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Isaiah Thomas"></td>
<td><input type="text" value="PG"></td>
<td><input type="text" value="5'9"""></td>
<td><input type="text" value="02-07-1989"></td>
<td><input type="text" value="$473,604"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Ben McLemore"></td>
<td><input type="text" value="SG"></td>
<td><input type="text" value="6'5"""></td>
<td><input type="text" value="02-11-1993"></td>
<td><input type="text" value="$2,895,960"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
</tbody>
</table>
</form>

You do not want to use type="reset" for your reset buttons, just stick with type="button". You do not want to reset the entire form.
You can add a click listener to these buttons to get the current row of the clicked button.
This can be achieved via: $(e.target).parent().parent() or $(e.target).closest('tr')
Once you have the row, you can locate your input fields and set their values to a default value or empty string.
Update: Using jQuery .data()
You can store the original values as data for the field. This is probably the most versatile method and it allows you to store the value of any input field.
(function($) {
$.fn.assignDefaultValues = function() {
$(this).find('input').each(function() {
$(this).data('defaultValue', $(this).val());
});
};
})(jQuery);
$('.zui-table').assignDefaultValues();
$('.zui-table td > input[type="button"]').on('click', function() {
const $tr = $(this).closest('tr');
$tr.find('td > input[type="text"]').each(function() {
$(this).val($(this).data('defaultValue') || '');
});
});
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td input {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="DeMarcus Cousins"></td>
<td><input type="text" value="C"></td>
<td><input type="text" value="6'11" ""></td>
<td><input type="text" value="08-13-1990"></td>
<td><input type="text" value="$4,917,000"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Isaiah Thomas"></td>
<td><input type="text" value="PG"></td>
<td><input type="text" value="5'9" ""></td>
<td><input type="text" value="02-07-1989"></td>
<td><input type="text" value="$473,604"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Ben McLemore"></td>
<td><input type="text" value="SG"></td>
<td><input type="text" value="6'5" ""></td>
<td><input type="text" value="02-11-1993"></td>
<td><input type="text" value="$2,895,960"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
</tbody>
</table>
</form>
Storing data the old-fashioned way
Alternatively, if you want to recall the previous values, you could store the values ahead of time. This can be helpful for building an export function.
(function($) {
$.fn.storeTableValues = function() {
return this.find('tbody tr').map(function() {
return [$(this).find('td > input[type="text"]').map(function() {
return $(this).val();
}).toArray()];
}).toArray();
};
})(jQuery);
const originalValues = $('.zui-table').storeTableValues();
$('.zui-table td > input[type="button"]').on('click', function(e) {
const $button = $(e.target);
const $tr = $button.closest('tr');
const index = $tr.closest('table').find('tbody tr').index($tr);
$tr.find('td > input[type="text"]').each(function(col) {
$(this).val(originalValues[index][col] || '');
});
});
.zui-table {
border: solid 1px #DDEEEE;
border-collapse: collapse;
border-spacing: 0;
font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
background-color: #DDEFEF;
border: solid 1px #DDEEEE;
color: #336B6B;
padding: 10px;
text-align: left;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
border: solid 1px #DDEEEE;
color: #333;
padding: 10px;
text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td input {
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myForm">
<table class="zui-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="DeMarcus Cousins"></td>
<td><input type="text" value="C"></td>
<td><input type="text" value="6'11" ""></td>
<td><input type="text" value="08-13-1990"></td>
<td><input type="text" value="$4,917,000"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Isaiah Thomas"></td>
<td><input type="text" value="PG"></td>
<td><input type="text" value="5'9" ""></td>
<td><input type="text" value="02-07-1989"></td>
<td><input type="text" value="$473,604"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value="Ben McLemore"></td>
<td><input type="text" value="SG"></td>
<td><input type="text" value="6'5" ""></td>
<td><input type="text" value="02-11-1993"></td>
<td><input type="text" value="$2,895,960"></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
<tr>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="text" value=""></td>
<td><input type="button" value="Reset"></td>
</tr>
</tbody>
</table>
</form>

The <input type="reset"> defines a reset button which resets all form values to its initial values.
So, you should implement a button that trigger some function that do the trick for reseting each row.
From Here:
https://www.w3schools.com/tags/att_input_type_reset.asp

Errors with freeze table header - HTML [duplicate]

This question already has answers here:
How to set tbody height with overflow scroll
(16 answers)
Closed 2 years ago.
I am trying to enter entries in table inputs for my inventory website. I want to freeze the headers of each column and tried doing it with this -> Freeze the top row for an html table only (Fixed Table Header Scrolling)
window.onload = function(){
var to_show = '';
for(var i = 1 ; i < 50 ; i++){
to_show += '<tr><td><input type="text" autocomplete="off" id="product_name_'+ i +'" name="product_name_'+i+'" onkeyup="productSearch(this.value, '+i+')" tabindex="-1" style="font-size:larger;"></td>';
to_show += '<td><input type="text" autocomplete="off" id="location_'+ i +'" name="location_'+ i +'" onkeyup="productSearch(this.value, '+ i +')" tabindex="-1" style="font-size:larger;"></td></tr>';
}
document.getElementById('addInside_tr_20').innerHTML = to_show;
}
#import url("https://fonts.googleapis.com/css?family=Montserrat:300,400|Oswald:200,300,400&display=swap");
:root {
--purple-theme: #091428;
--lightpurple-theme: #0f3a41;
--gray-bg-heading: #b8b8b8;
--gray-bg-sidebar: #dee3e7;
--lightgreen-theme: #65ffce;
--green-theme: #46b692;
--red-theme: #f75b54;
}
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 0px 0px 10px 10px;
background: var(--lightpurple-theme);
}
/* Handle */
::-webkit-scrollbar-thumb {
background: var(--green-theme);
border-radius: 0 0 10px 10px;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: var(--lightgreen-theme);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
::-moz-selection {
/* Code for Firefox */
color: var(--purple-theme);
background: var(--green-theme);
}
::selection {
color: var(--purple-theme);
background: var(--green-theme);
}
input:focus,
option:focus,
select:focus {
outline-color: var(--lightgreen-theme);
}
body {
height: 100%;
background-repeat: no-repeat;
}
a {
text-decoration: none;
}
table,
select,
input,
a {
color: whitesmoke;
}
input {
width: 100%;
line-height: 5px;
font-size: 10px;
}
input[type="text"],
input[type="url"],
input[type="number"] {
height: 30px;
border: 1px solid var(--green-theme);
background-color: transparent;
color: whitesmoke;
font-size: 15px;
}
input[type="button"],
input[type="reset"],
input[type="submit"] {
border: 1px solid var(--green-theme);
background-color: var(--green-theme);
color: var(--purple-theme);
text-decoration-style: bold;
font-size: 15px;
border-radius: 0px 15px 15px 0px;
}
/* ------grid container------ */
input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
}
input[type="date"] {
height: 100%;
}
.grid_container {
display: grid;
grid-template-columns: repeat(auto, 1fr);
grid-gap: 10px;
padding: 10px;
margin: 0 auto;
color: whitesmoke;
}
.grid {
background-color: var(--purple-theme);
border: 1px solid lightgrey;
padding: 20px;
}
.inside > span {
font-family: "Oswald", sans-serif;
font-weight: 400;
font-size: 18px;
}
.item1 {
grid-column: 1 / 3;
}
.item2 {
grid-column: 3 / 5;
}
.item3 {
grid-column: 5 / 7;
}
.item4 {
grid-column: 7 / 9;
}
.item5 {
grid-column: 1 / 9;
}
.inside {
padding: 0;
padding-bottom: 10px;
border: none;
}
.item2 {
grid-column: 1 / 9;
grid-row: 1 / 5;
}
.inside input[type="text"] {
width: 200px;
}
.item2 select,
.item2 option {
width: 100%;
height: 30px;
background-color: var(--purple-theme);
border: 1px solid var(--green-theme);
text-align: center;
}
.item2 select option {
background: var(--purple-theme);
}
.item2 table {
width: 100%;
text-align: center;
margin-top: 20px;
font-size: 20px;
}
.details table:nth-child(1) {
margin-top: -20px;
}
.details {
margin-top: -20px;
}
.item2 th {
background-color: var(--green-theme);
color: var(--purple-theme);
padding: 15px;
}
.item2 a {
text-decoration: underline;
}
/* main edit here start */
#text-area td:nth-child(1) {
width: 80%;
}
#text-area td:nth-child(2) {
width: 20%;
}
#text-area thead th:nth-child(1) {
width: 80%;
}
#text-area thead th:nth-child(2) {
width: 20%;
}
#text-area thead {
display: block;
}
#text-area tbody {
height: 440px;
display: block;
overflow: auto;
width: 100%;
}
#text-area input {
width: 100%;
}
#text-area input {
border: none;
}
#text-area {
border: 1px solid var(--green-theme);
}
#text-area tr:nth-child(2n + 1) {
background: var(--lightpurple-theme);
}
#text-area td:nth-child(4) {
border-right: none;
}
#text-area td {
border-right: 1px solid var(--green-theme);
}
/* main edit here ends */
.item2 .inside table * {
padding-bottom: 20px;
}
.suggestion {
position: absolute;
background-color: var(--purple-theme);
font-size: smaller;
cursor: pointer;
}
.suggestion_i:hover {
color: var(--purple-theme);
background-color: var(--green-theme);
}
.suggestion_i {
cursor: pointer;
text-align: center;
text-justify: center;
padding: 10px 10px -5px 10px;
}
#sorted_div {
background-color: var(--purple-theme);
/*position:absolute;*/
top: 123px;
}
#sorted_div tr:nth-child(2n + 1) {
background: var(--lightpurple-theme);
}
<div class="grid_container">
<div class="grid item2">
<div class="inside" id="topTableID">
<form action="php/invoiceFetch.php" method="post" enctype="multipart/form-data" id='myForm' onkeypress="return event.keyCode != 13;">
<table>
<tr>
<td><label for="">Location :</label></td>
<td><input type="text" autocomplete="off" name="invoice_name" id="invoice_name" onchange="invoiceSpliter()" onkeyup="customerSearch(this.value)" style="width: 500;"></td>
<td><label>Product Suggestion : </label></td>
<td>
<div id="product_suggestion" class="suggestion"></div>
</td>
</tr>
<tr>
<td>
<div id="suggestion" class="suggestion"></div>
</td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="details">
<table id="text-area">
<thead>
<tr>
<th><label>Product Name</label></th>
<th><label>Current Locations</label></th>
</tr>
</thead>
<tbody id="addInside_tr_20">
<!--there will be some rows added here -->
</tbody>
</table>
<table>
<tr>
<td><input type="reset" value="Reset" tabindex="-1"></td>
<td><input type="button" onclick="document.getElementById('myModal').style.display = 'block';" value="Submit"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
You can check the code on [codepen]{https://codepen.io/zaidi2293/pen/WNwmJrP} (Ignore most of the css as they are just to replicate what I had so that I don't miss something out)
(Sorry for the extensive code length) The Problem is the "thead" is not aligned with "tbody" as in column perspective because of overflow in vertical direction. I've asked this question before but that doesn't seem to work for me. Also, there will be some more columns added in the future. No custom size width answers please

You may reset the table-layout to fixed, turn tr into tables and apply the width to each cells, then add a 1.2em padding or margin right on thead (average width of a scrollbar).
answer inspired from How to set tbody height with overflow scroll and probably a duplicate.
table {
border: 1px solid;
}
tr {
display: table;
table-layout: fixed;
}
#text-area {
border: 1px solid;
}
#text-area tr :nth-child(1) {
width: 15%;
}
#text-area tr :nth-child(2) {
width: 60%;
}
#text-area tr :nth-child(3) {
width: 10%;
}
#text-area tr :nth-child(4) {
width: 15%;
}
#text-area thead {
display: block;
padding-right:1.2em;
}
#text-area tbody {
height: 200px;
display: block;
overflow: auto;
}
input {
box-sizing:border-box;
min-width: 100%;
}
<table id="text-area">
<thead>
<tr>
<th><label>Barcode</label></th>
<th><label>Product Name</label></th>
<th><label>Count</label></th>
<th><label>QB-Price / Online Price</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="772696001844"></td>
<td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696023815"></td>
<td><input type="text" value="BILBERRY FRUIT POWDER"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696037607"></td>
<td><input type="text" value="BUCKTHORN BARK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696042007"></td>
<td><input type="text" value="CHAMOMILE FLOWER WHOLE"></td>
<td><input type="text" value="6"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696084007"></td>
<td><input type="text" value="FRANKINCENSE TEARS"></td>
<td><input type="text" value="4"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696108208"></td>
<td><input type="text" value="HIBISCUS FLOWER WHOLE"></td>
<td><input type="text" value="6"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696112809"></td>
<td><input type="text" value="HYSSOP HERB POWDER"></td>
<td><input type="text" value="2"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S"></td>
<td><input type="text" value="1"></td>
<td><input type="text" value="$19.25"></td>
</tr>
</tbody>
</table>

You could set input box width 100% and add pixels width to th and td, instead of percentages.,
The input box width 100% will help to set it to its parent width and remove its default width. The pixels can help to have a fixed width and alignment problems.
table{
border: 1px solid;
}
#text-area{
border: 1px solid;
}
#text-area td:nth-child(1){
width: 100px;
}
#text-area td:nth-child(2){
width: 200px;
}
#text-area td:nth-child(3){
width: 100px;
}
#text-area td:nth-child(4){
width: 100px;
}
#text-area thead th:nth-child(1){
width: 100px;
}
#text-area thead th:nth-child(2){
width: 200px;
}
#text-area thead th:nth-child(3){
width: 100px;
}
#text-area thead th:nth-child(4){
width: 100px;
}
#text-area thead{
display:block;
}
#text-area tbody{
height:200px;
display:block;
overflow:auto;
}
#text-area input{
width:100%
}
<table id="text-area">
<thead>
<tr>
<th><label >Barcode</label></th>
<th><label >Product Name</label></th>
<th><label >Count</label></th>
<th><label >QB-Price / Online Price</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="772696001844"></td>
<td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696023815"></td>
<td><input type="text" value="BILBERRY FRUIT POWDER" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696037607"></td>
<td><input type="text" value="BUCKTHORN BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696042007"></td>
<td><input type="text" value="CHAMOMILE FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696084007"></td>
<td><input type="text" value="FRANKINCENSE TEARS" ></td>
<td><input type="text" value="4" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696108208"></td>
<td><input type="text" value="HIBISCUS FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696112809"></td>
<td><input type="text" value="HYSSOP HERB POWDER" ></td>
<td><input type="text" value="2" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
</tbody>
</table>

th {
background-color: #fff;
}
th {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
}
<table id="text-area">
<thead>
<tr>
<th><label >Barcode</label></th>
<th><label >Product Name</label></th>
<th><label >Count</label></th>
<th><label >QB-Price / Online Price</label></th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="772696001844"></td>
<td><input type="text" value="ACTIVATED CHARCOAL (COCONUT BASE) 114g" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696023815"></td>
<td><input type="text" value="BILBERRY FRUIT POWDER" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696031100"></td>
<td><input type="text" value="BLADDERWRACK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696037607"></td>
<td><input type="text" value="BUCKTHORN BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696044803"></td>
<td><input type="text" value="CASCARA BARK C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696042007"></td>
<td><input type="text" value="CHAMOMILE FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696066805"></td>
<td><input type="text" value="DAMIANA LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696067208"></td>
<td><input type="text" value="DANDELION LVS. C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696084007"></td>
<td><input type="text" value="FRANKINCENSE TEARS" ></td>
<td><input type="text" value="4" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696087008"></td>
<td><input type="text" value="GENTIAN ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696108208"></td>
<td><input type="text" value="HIBISCUS FLOWER WHOLE" ></td>
<td><input type="text" value="6" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696112809"></td>
<td><input type="text" value="HYSSOP HERB POWDER" ></td>
<td><input type="text" value="2" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
<tr>
<td><input type="text" value="772696124604"></td>
<td><input type="text" value="LICORICE ROOT C/S" ></td>
<td><input type="text" value="1" ></td>
<td><input type="text" value="$19.25" ></td>
</tr>
</tbody>
</table>

Automatic calculation from input fields

I want to construct some input forms that can calculate automatically. Provide below is my input forms.
var form = document.forms.myform,
pv1 = form.pv1,
pv2 = form.pv2,
output = form.pvtotal;
window.calculate = function () {
var p1 = parseInt(pv1.value, 10) || 0,
p2 = parseFloat(pv2.value) || 0;
output.value = (p1 + p2).toFixed(2);
};
<style>
table, th, td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
th {
color: black;
background: #f9f9f9;
font-size: 16px;
}
input[type=number]{
width: 50px;
}
</style>
<form action="" name="myform" onkeyup="calculate()">
<table>
<thead>
<tr>
<th colspan="3">PREV DAY STOCK</th>
<th colspan="3">CULL</th>
<th colspan="3">MORTALITY</th>
<th colspan="3">CURRENT STOCK</th>
</tr>
<tr>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="number" name="pv1"></td>
<td><input type="number" name="pv2"></td>
<td><input type="number" name="pvtotal"></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
</tr>
</tbody>
</table>
</form>
As you can see and try, i just provide the sum for previous stock. The main problem is I want all the column be automatic calculated except for the CURRENT STOCK column which i want this column calculated by:
(PREVIOUS STOCK - CULL - MORTALITY = CURRENT STOCK
Then, the other problem whenever i add one row below, all the script did not function anymore. I don't know why. I hope you guys can help me through this.
Below is my expected output:
table, th, td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
th {
color: black;
background: #f9f9f9;
font-size: 16px;
}
input[type=number]{
width: 50px;
}
div.scrollmenu {
overflow: auto;
}
h4 {
text-decoration: underline;
text-align: center;
line-height: 1.6;
}
<form action="dailyprod_action.php" method="post" name="myform" onkeyup="calculate()">
<table>
<thead>
<tr>
<th colspan="3">PREV DAY STOCK</th>
<th colspan="3">CULL</th>
<th colspan="3">MORTALITY</th>
<th colspan="3">CURRENT STOCK</th>
</tr>
<tr>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="number" name="" value="1000"></td>
<td><input type="number" name="" value="1000"></td>
<td><input type="number" name="" value="2000"></td>
<td><input type="number" name="" value="200"></td>
<td><input type="number" name="" value="200" ></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="200"></td>
<td><input type="number" name="" value="200"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="600" readonly></td>
<td><input type="number" name="" value="600" readonly></td>
<td><input type="number" name="" value="1200" readonly></td>
</tr>
<tr>
<td><input type="number" name="" value="2000"></td>
<td><input type="number" name="" value="2000"></td>
<td><input type="number" name="" value="4000"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="400" ></td>
<td><input type="number" name="" value="800"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="400"></td>
<td><input type="number" name="" value="800"></td>
<td><input type="number" name="" value="1700" readonly></td>
<td><input type="number" name="" value="1700" readonly></td>
<td><input type="number" name="" value="3400" readonly></td>
</tr>
</tbody>
</table>
</form>

You can develop my sample script and try
$("#pds_v1").keyup(function(){
var pds_v1 = $("#pds_v1").val();
var pds_v2 = $("#pds_v2").val();
var total= parseInt(pds_v2) + parseInt(pds_v1);
$("#pds_sum").val(total);
});
$("#pds_v2").keyup(function(){
var pds_v1 = $("#pds_v1").val();
var pds_v2 = $("#pds_v2").val();
var total= parseInt(pds_v2) + parseInt(pds_v1);
$("#pds_sum").val(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table>
<tr>
<td><input type="number" name="" id="pds_v1"></td>
<td><input type="number" name="" id="pds_v2"></td>
<td><input type="number" name="" id="pds_sum"></td>
</tr>
</table>

I suggest you use JQuery as that will make your life easier, also there's not much difference between Javascript and JQuery syntax, so it'll be easy for you to learn if you know Javascript.
I moved your onkeyup event listener to the tr tag so you'll be able to do calculate() on every row. I also added this parameter on the calculate() function to get the element that fired that function and get all child from that element to change the output field of that row (the one that fired calculate() function).
Try this code below (this is only inputs for Previous Stock):
function calculate(elem) {
pv1 = $(elem).children()[0].children;
pv2 = $(elem).children()[1].children;
out = $(elem).children()[2].children;
var p1 = parseInt($(pv1).val(), 10) || 0;
var p2 = parseFloat($(pv2).val()) || 0;
$(out).val((p1 * p2).toFixed(2));
}
$('#add_field').click(function() {
$('#table_body').append(`
<tr onkeyup="calculate(this)" onchange="calculate(this)">
<td><input type="number" name="pv1" id="pv1"></td>
<td><input type="number" name="pv2" id="pv2"></td>
<td><input type="number" name="pvtotal" id="output"></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
</tr>
`)
})
$('#remove_field').click(function() {
var len = ($('#table_body').children()).length - 1;
$('#table_body').children()[len].remove();
})
table,
th,
td {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
th {
color: black;
background: #f9f9f9;
font-size: 16px;
}
input[type=number] {
width: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" name="myform">
<table>
<thead>
<tr>
<th colspan="3">PREV DAY STOCK</th>
<th colspan="3">CULL</th>
<th colspan="3">MORTALITY</th>
<th colspan="3">CURRENT STOCK</th>
</tr>
<tr>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
<th>M</th>
<th>F</th>
<th>Total</th>
</tr>
</thead>
<tbody id="table_body">
<!-- I'm moving your event listener to the <tr> tag -->
<tr onkeyup="calculate(this)" onchange="calculate(this)">
<td><input type="number" name="pv1" id="pv1"></td>
<td><input type="number" name="pv2" id="pv2"></td>
<td><input type="number" name="pvtotal" id="output"></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name=""></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
<td><input type="number" name="" readonly></td>
</tr>
</tbody>
</table>
</form>
<button type="button" id="add_field">Add Field</button>
<button type="button" id="remove_field">Remove Field</button>

Convert DOM to HTML via JavaScript?

Okay so I already know I can get the entire HTML document's markup (minus the DOCTYPE) using:
document.documentElement.outerHTML
however that will only get me the original source markup, and not the current state of the DOM, which is really what I am looking for. For my immediate needs I really just want to preserve the state of a form within the document (think of it in terms of an an auto-save).
Please note this is not being used in a standard website/webapp format, so posting, submitting, etc. really isn't an option. I need a pure JavaScript way to acquire an HTML string representation of the current DOM tree, so an external caller can save it to disk for later use.
Now I know I can manually iterate through all the form elements, grabbing each and every value, and doing a string replacement on the result of the above outerHTML (via regular expressions), to build an HTML string that mirrors the current DOM, but I was hoping there was an easier way to do this (maybe something built in). Like a DOM to HTML parser/writer.
However so far I have not found a built in way to do this. Just wanted to reach out and see if anyone else has needed to do this. And ask if my above proposed method the best way to approach this particular problem, before I begin implementing it.

Here is a sample HTML page in which I tried the supplied function:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function getFormState() {
// this could be set outside this function if calling multiple times
var theForm = document.forms[0];
console.log(theForm);
var theData = new FormData(theForm);
console.log(theData);
// get the state of the form as an iterator of key/value pairs
var state = theData.entries();
console.log(state);
// convert the iterator into an array of key/value pairs
var stateArray = Array.from(state);
console.log(stateArray);
// Use JSON.stringify to change the key/value pair array state into a string
var stateString = JSON.stringify(stateArray);
console.log(stateString);
return stateString;
}
</script>
<style>
#header {
background: #ffffff;
position: fixed;
width: 100%;
height: 30px;
padding: 5px 0px 0px 0px;
top: 0;
z-index: 1;
}
#content{
margin-top: 40px;
}
body, input, select, textarea {
font-family: monospace;
font-size: 10pt;
font-weight: bold;
}
td {
padding: 8px 8px 8px 8px;
}
input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]), select, textarea {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid #DDDDDD;
}
input:not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]):focus, select:focus, textarea:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 3px 0px 3px 3px;
margin: 5px 1px 3px 0px;
border: 1px solid rgba(81, 203, 238, 1);
}
</style>
<title>HTML5 FormData Test</title>
</head>
<body>
<form id="frmForm">
<div id="header">
<button type="button" onclick="getFormState()">getFormState</button>
<hr>
</div>
<div id="content">
<table border="1">
<tr>
<td>Button</td>
<td><input id="btnButton" type="button" value="Button"></td>
</tr>
<tr>
<td>Checkbox</td>
<td><input id="chkCheckbox" type="checkbox"></td>
</tr>
<tr>
<td>Color</td>
<td><input id="clrColor" type="color" value="#000000"></td>
</tr>
<tr>
<td>Datalist</td>
<td>
<input id="txtDatalist" type="text" list="choices" value="">
<datalist id="choices">
<option value="One"></option>
<option value="Two"></option>
<option value="Three"></option>
</datalist>
</td>
</tr>
<tr>
<td>Date</td>
<td><input id="calDate" type="date" value=""></td>
</tr>
<tr>
<td>Datetime (Deprecated)</td>
<td><input id="calDateTime" type="datetime" value=""></td>
</tr>
<tr>
<td>Datetime (Local)</td>
<td><input id="calDateTimeLocal" type="datetime-local" value=""></td>
</tr>
<tr>
<td>Disabled</td>
<td><input id="txtDisabled" type="text" value="Disabled" disabled=""></td>
</tr>
<tr>
<td>E-Mail</td>
<td><input id="txtEMail" type="email" value=""></td>
</tr>
<tr>
<td>File</td>
<td><input id="binFile" type="file" value=""></td>
</tr>
<tr>
<td>Hidden</td>
<td><input id="txtHidden" type="hidden" value="HIDDEN"></td>
</tr>
<tr>
<td>Image (Submit)</td>
<td><input id="btnImage" type="image" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADUAAAAVCAIAAABpKDERAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAJcSURBVEhLzZVNTxpBGMcHvkEjbZFkT3BoUmNSsSc/QXdBLL23IRyQmkhjzNbGO4nUbUwQ15geeiC9QDct3V3itSdE7YuSniBRGynQ8BXcPs/s4HLYAk2q3d+Bed7zn5md4KpUKo1GgzgSv9/vyufz0WiUBRyGoihuw9mgvgunwvQ5GTdcMzOdB2hzs6N0KgPOr7p+o5/HhXOWuDbw/Jhpw/RSt9vdXYWi1V2w3jwaZ4nrZOj7xU1YFVVpLCZJsTFAeinhEiu0MLFHHcaTIo0BUN8PK24V6ASKtEcLbWH6BkGovstPAMxS2kh29Ock/Z2rfZWF0ukpJqafdRi1bUFNiEX8GPZfPUgL2zUzSMgL/XX0JkTX784TGaOdmjyb5uPFNk6w5y/PD92VmXt0vcN58BM5OjnHROtd7BZlYl7DFtpjNVtW9dMaIaXkBK1NlnqldjB9A4G5OKJHz7uMmr8HG5NJbUX9CXzb4nsNwRmRaMlJr9dLs6kgjWKr+BFLTXYewqH+iaH66Mb7AA98vHa6IobRPjsihOfwAR28faqbQaOpyBk+d9g0WZyi/QbHhQnJyErTdIcw4H73N3w+Xxgug6yFwYorcI9UHybZikph9cwmRKIvBKFsi9sUUR0kb0cSy2bQhE648ETkL5shKx5X2jjQDtDmkmU5FArhjv85n7Nc5Dhb3ZkbB+cwy81llt//SAXN5CioqnqF/2+ds2NreLPfGRXocOVyOUGAx38V/PqwcD+Fr5mypJwsTjF7NDRNQ308Dy/Oiei6Pvz9/l9c5XK5Xq8zwQ4jEAj8BmbeP4OPzU0kAAAAAElFTkSuQmCC"></td>
</tr>
<tr>
<td>Month</td>
<td><input id="calMonth" type="month" value=""></td>
</tr>
<tr>
<td>Number</td>
<td><input id="numNumber" type="number" min="0" max="10" step="1" required="" value=""></td>
</tr>
<tr>
<td>Password</td>
<td><input id="txtPassword" type="password" value=""></td>
</tr>
<tr>
<td>Radio</td>
<td>
<input id="radRadio1" type="radio" name="radRadio" value="1">One<br>
<input id="radRadio2" type="radio" name="radRadio" value="2">Two<br>
<input id="radRadio3" type="radio" name="radRadio" value="3">Three
</td>
</tr>
<tr>
<td>Range</td>
<td><input id="numRange" type="range" min="0" max="10" value="5"></td>
</tr>
<tr>
<td>Readonly</td>
<td><input id="txtReadonly" type="text" value="Readonly" readonly=""></td>
</tr>
<tr>
<td>Reset</td>
<td><input id="btnReset" type="reset"></td>
</tr>
<tr>
<td>Search</td>
<td><input id="txtSearch" type="search" placeholder="search text" value=""></td>
</tr>
<tr>
<td>Select</td>
<td>
<select id="sltSelect">
<option value="" disabled="" selected=""><Select></option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</td>
</tr>
<tr>
<td>Select (Multiple)</td>
<td>
<select id="sltMultiSelect" multiple="">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</td>
</tr>
<tr>
<td>Submit</td>
<td><input id="btnSubmit" type="submit"></td>
</tr>
<tr>
<td>Telephone</td>
<td><input id="txtTelephone" type="tel" value=""></td>
</tr>
<tr>
<td>Textbox</td>
<td><input id="txtTextbox" type="text" value=""></td>
</tr>
<tr>
<td>Textarea</td>
<td><textarea id="txtTextarea"></textarea></td>
</tr>
<tr>
<td>Time</td>
<td><input id="calTime" type="time" value=""></td>
</tr>
<tr>
<td>URL</td>
<td><input id="txtURL" type="url" value=""></td>
</tr>
<tr>
<td>Week</td>
<td><input id="calWeek" type="week" value=""></td>
</tr>
</table>
</div>
</form>
</body>
</html>
which returns the following:
I am able to manually iterate over all the inputs to get what I need, in fact that is my current solution, but the FormData solution seemed like a much cleaner approach, it's just not returning the expected data.
In fact the only input that ever seems to populate is the RadioButton.