Develop Reference

How to get total sum from input values using Javascript?

I want to display the total sum of values shown in the amount input-boxes in the next field named sub total without refreshing page.
JS-code for sum of n numbers:
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
}
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0') , Add()">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount-2" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td class="text-end">0</td>
</tr>
</tbody>
</table>
</div>

I don't know why, but obviously rare are those who understand that using a form has benefits ...
const myForm = document.forms['my-form']
myForm.oninput = ({target: elm}) => // for any change iside the form
{
let
row = elm.closest('tr')
, Dsc = row.querySelector('input[name^="desc"]')
, Qte = row.querySelector('input[name^="quantity"')
, Prx = row.querySelector('input[name^="price"')
, Amt = row.querySelector('input[name^="amount"')
;
Dsc.required = (Qte.valueAsNumber > 0)
switch (elm.name.split('_')[0]) {
case 'quantity':
case 'price':
Amt.value = Qte.valueAsNumber * Prx.valueAsNumber
myForm.SubTotal.textContent =
[...myForm.querySelectorAll('input[name^="amount"')]
.reduce((sum,el)=>sum + +el.value,0)
break;
}
}
myForm.onsubmit = e =>
{
e.preventDefault() // disable form submiting
let formInputs = Object.fromEntries( new FormData(myForm).entries() )
console.clear()
console.log( formInputs)
}
table {
border-collapse: collapse;
margin : 2em 1em;
}
td, th {
padding : .2em;
border : 1px solid darkblue;
}
input {
width : 6em;
text-align : right;
}
td:first-of-type input {
width : 10em;
text-align : left;
}
<form name="my-form">
<table>
<thead>
<tr> <th>Description</th> <th>Quantity</th> <th>Unit Price</th> <th>Amount</th> </tr>
</thead>
<tbody>
<tr>
<td> <input type="text" name="desc_1" > </td>
<td> <input type="number" name="quantity_1" value="0" min="0"> </td>
<td> <input type="number" name="price_1" value="0" min="0"> </td>
<td> <input type="text" name="amount_1" disabled value="0"></td>
</tr>
<tr>
<td> <input type="text" name="desc_2" > </td>
<td> <input type="number" name="quantity_2" value="0" min="0"> </td>
<td> <input type="number" name="price_2" value="0" min="0"> </td>
<td> <input type="text" name="amount_2" disabled value="0"></td>
</tr>
<tr>
<td> <input type="text" name="desc_3" > </td>
<td> <input type="number" name="quantity_3" value="0" min="0"> </td>
<td> <input type="number" name="price_3" value="0" min="0"> </td>
<td> <input type="text" name="amount_3" disabled value="0"></td>
</tr>
</tbody>
<tfoot>
<td colspan="4"> Sub Total : <output name="SubTotal">0</output> </td>
</tfoot>
</table>
<button type="submit">submit</button>
</form>

You can assign an id to the subtotal cell and change its value on every Mul call.
Something like this :
function Mul(index) {
var quantity = document.getElementsByClassName("quantity")[index].value;
var price = document.getElementsByClassName("price")[index].value;
document.getElementsByClassName("amount")[index].value = quantity * price;
const subTotalField = document.getElementById("subTotal");
subTotalField.innerHTML = parseInt(subTotalField.innerHTML) + quantity * price;
}
<html>
<body>
<table class="table table-center table-hover" id="myTable">
<thead>
<tr>
<th>Description</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('0') , Add()">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount-0" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('1')">
</td>
<td>
<input type="text" id="amount-1" class="amount form-control"
disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="" class=" quantity form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="number" id="" class="price form-control"
onkeyup="Mul('2')">
</td>
<td>
<input type="text" id="amount-2" class="amount form-control"
disabled>
</td>
</tr>
</tbody>
</table>
<div class="table-responsive">
<table class="table table-stripped table-center table-hover">
<thead></thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td class="text-end">Sub Total</td>
<td id="subTotal" class="text-end">0</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Why does my cloning JS code is messing up whole HTML table?

I just wanted to add button that will make a new table under the first one (max. 10 times), but the JavaScript code that I implemented don't do that as I want. Below is my HTML & JSS.
function addField(n)
{
var tr = n.parentNode.parentNode.cloneNode(true);
document.getElementById('tbl').appendChild(tr);
}
<table id="tbl" class="table-bordered table-dark">
<thead>
<tr>
<th scope="colgroup">Godzina rozpoczęcia</th>
<th scope="colgroup">Godzina zakończenia</th>
</tr>
</thead>
<tbody>
<td style="vertical-align: top;">
<label for="start-date">Data:</label>
<input type="date" id="start" name="data-roz"> <br>
<label for="start-time">Godzina:</label>
<input type="time" id="godzina1" name="godz-roz">
</td>
<td style="vertical-align: top;">
<label for="end-date">Data:</label>
<input type="date" id="end" name="data-zakon"> <br>
<label for="end-time">Godzina:</label>
<input type="time" id="godzina2" name="godz-zakon">
</td>
</tbody>
</table>
<input type="button" class="btn btn-primary" value="+" onclick="addField(this);"/>
(https://i.imgur.com/WxV060Y.mp4)

You need to append the copied table to the document body, not back to the table:
function addField(n)
{
var tblClone = n.previousElementSibling.cloneNode(true);
document.body.appendChild(tblClone );
}
<table id="tbl" class="table-bordered table-dark">
<thead>
<tr>
<th scope="colgroup">Godzina rozpoczęcia</th>
<th scope="colgroup">Godzina zakończenia</th>
</tr>
</thead>
<tbody>
<td style="vertical-align: top;">
<label for="start-date">Data:</label>
<input type="date" id="start" name="data-roz"> <br>
<label for="start-time">Godzina:</label>
<input type="time" id="godzina1" name="godz-roz">
</td>
<td style="vertical-align: top;">
<label for="end-date">Data:</label>
<input type="date" id="end" name="data-zakon"> <br>
<label for="end-time">Godzina:</label>
<input type="time" id="godzina2" name="godz-zakon">
</td>
</tbody>
</table>
<input type="button" class="btn btn-primary" value="+" onclick="addField(this);"/>

var count = 1;
function addField(n)
{
if(count<=5){
var table = n.previousElementSibling.children[0].cloneNode(true);
document.getElementById("table-group").appendChild(table);
count++;
}
if(count===5){
document.getElementById('addBtn').style.display='none';
}
}
<div id="table-group">
<table class="table-bordered table-dark">
<thead>
<tr>
<th scope="colgroup">Godzina rozpoczęcia</th>
<th scope="colgroup">Godzina zakończenia</th>
</tr>
</thead>
<tbody>
<tr>
<td style="vertical-align: top;">
<label for="start-date">Data:</label>
<input type="date" id="start" name="data-roz"> <br>
<label for="start-time">Godzina:</label>
<input type="time" id="godzina1" name="godz-roz">
</td>
<td style="vertical-align: top;">
<label for="end-date">Data:</label>
<input type="date" id="end" name="data-zakon"> <br>
<label for="end-time">Godzina:</label>
<input type="time" id="godzina2" name="godz-zakon">
</td>
</tr>
</tbody>
</table>
</div>
<input type="button" id="addBtn" class="btn btn-primary" value="+" onclick="addField(this);"/>

Monitor the changes in table using JavaScript or HTML

I want to change the total price when the count or unit price of the products are changed on the website. I know I should use the onChange function, but I have no idea about how to write the JavaScript code.
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true" >
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true" >
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true" >
<input id="productCount" type="text" name="countList" onchange="update()" class="layui-input count"
th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true" >
<input id="normalPrice" type="text" name="priceList" onchange="update()" class="layui-input price"
th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price"
th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
<a href="javascript:void(0)" class="delBtn redType" onclick='delColumns(this)'>Del</a>
</td>
</tr>
</tbody>
</table>
I hope that the totalPrice = count*price could refresh whenever the user changes one of those values.

You can easily monitor the pointed input fields (#productCount and #normalPrice) and change the value of #total according to it. In the code below, I use the input event and I'm not using inline event handlers, but rather the function addEventListener() (know why).
const productCountInput = document.querySelector('#productCount');
const productPriceInput = document.querySelector('#normalPrice');
const totalPriceInput = document.querySelector('#total');
function updateTotalPrice() {
totalPriceInput.value = (parseFloat(productCountInput.value) * parseFloat(productPriceInput.value)) || 0;
}
productCountInput.addEventListener('input', updateTotalPrice);
productPriceInput.addEventListener('input', updateTotalPrice);
<table id="productTable" class="layui-table">
<thead>
<tr>
<th>No.</th>
<th>PART NUMBER</th>
<th>DESCRIPTION</th>
<th>QTY(PCS)</th>
<th>UNIT PRICE (USD)</th>
<th>AMOUNT(USD)</th>
<th>OPRATION</th>
</tr>
</thead>
<tbody id="columns">
<tr style="display:none">
<td>1</td>
<td><input type="hidden" name="numberList"></td>
<td><input type="hidden" name="remarkList"></td>
<td><input type="hidden" name="countList"></td>
<td><input type="hidden" name="priceList"></td>
<td><input type="hidden" name="totalPriceList"></td>
</tr>
<tr th:each="orderProduct:${orderProducts}">
<td th:text="${orderProducts.indexOf(orderProduct)+1}"></td>
<td contenteditable="true">
<input type="text" name="numberList" class="layui-input number" th:value="${orderProduct.number}">
</td>
<td contenteditable="true">
<input type="text" name="remarkList" class="layui-input remark" th:value="${orderProduct.remark}">
</td>
<td id="productCoun" contenteditable="true">
<input id="productCount" type="text" name="countList" class="layui-input count" th:value="${orderProduct.count}">
</td>
<td id="normalPric" contenteditable="true">
<input id="normalPrice" type="text" name="priceList" class="layui-input price" th:value="${orderProduct.price}">
</td>
<td id="totalPric" th:text="${orderProduct.price}*${orderProduct.count}">
<input id="total" type="text" name="totalPriceList" class="layui-input price" th:text="${orderProduct.price}*${orderProduct.count}">
</td>
<td>
Edit
Del
</td>
</tr>
</tbody>
</table>

How to Copy checked checkbox from one table to another table

I have two table where Table 1 is master table for table 2. If I Click addnew button than a new row will added in both table 1 and table 2 and Whatever employee name i will write it will be copied in table 2 same time. I want to Copy checked input checkbox also from table 1 to table2.I have added my code please help.
$(document).ready(function() {
$("#insert66").click(function() {
$(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td></td> <td> <input type="checkbox" id="mandatorySub"> </td></tr>')
$("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" id="mandatorySub"> </td> </tr>')
});
$('.copySubName').on('input', '.EmpName', function() {
var index = $(this).closest('table').find('input').index(this);
//for second table
$('#tableboth').find('.EmpName').eq(index).val($(this).val())
//for 3rd table
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table66" class="table table-bordered table-hover copySubName">
<input type="button" class="btn green" value="Add New+" id="insert66"></input>
<thead>
<th>Employee Name</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" name="EmpName">
</td>
<td>
<input type="checkbox" id="mandatorySub">
</td>
</tr>
</tbody>
</table>
<div class="portlet light portlet-fit box individual individualSalSection">
<div class="portlet-body individual individualSalSectionSub">
Table2:
<table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual">
<thead>
<th>Employee</th>
<th> Marks</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" disabled="true" name="EmpName">
</td>
<td>
<input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years">
</td>
<td>
<input type="checkbox" id="mandatorySub">
</td>
</tr>
</tbody>
</table>
</div>
</div>

You need to change id="mandatorySub" to class="mandatorySub1" and class="mandatorySub2"
I had updated your code may be this will help you if i understand you correctly
$(document).ready(function() {
$("#insert66").click(function() {
$(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td><td><input type="checkbox" class="mandatorySub1"></td></tr>')
$("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" class="mandatorySub2"> </td> </tr>')
});
$('.copySubName').on('input', '.EmpName', function() {
var index = $(this).closest('table').find('input').index(this);
//for second table
$('#tableboth').find('.EmpName').eq(index).val($(this).val())
//for 3rd table
});
$('body').on('click','.mandatorySub1',function(){
$('input.mandatorySub2').eq($("input.mandatorySub1").index( this )).trigger('click');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table66" class="table table-bordered table-hover copySubName">
<input type="button" class="btn green" value="Add New+" id="insert66"></input>
<thead>
<th>Employee Name</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" name="EmpName">
</td>
<td>
<input type="checkbox" class="mandatorySub1">
</td>
</tr>
</tbody>
</table>
<div class="portlet light portlet-fit box individual individualSalSection">
<div class="portlet-body individual individualSalSectionSub">
Table2:
<table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual">
<thead>
<th>Employee</th>
<th> Marks</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" disabled="true" name="EmpName">
</td>
<td>
<input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years">
</td>
<td>
<input type="checkbox" class="mandatorySub2">
</td>
</tr>
</tbody>
</table>
</div>
</div>

You should use mandatorySub as a class rather than multiple ids everywhere. The usage of ids are supposed to be unique inside a document.
What you should aim for is to fire an event on change of status of your checkboxes, and make the other checkboxes checked/unchecked accordingly.
Refer code:
$(document).ready(function() {
$("#insert66").click(function() {
$(".copySubName tbody").append('<tr> <td> <input type="text" class="form-control EmpName" name="EmpName"> </td></td> <td> <input type="checkbox" class="mandatorySub"> </td></tr>')
$("#tableboth tbody").append('<tr> <td> <input type="text" class="form-control EmpName" disabled="true" name="EmpName"> </td> <td> <input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years"> </td> <td> <input type="checkbox" class="mandatorySub"> </td> </tr>')
});
$('.copySubName').on('input', '.EmpName', function() {
var index = $(this).closest('table').find('input').index(this);
//for second table
$('#tableboth').find('.EmpName').eq(index).val($(this).val())
//for 3rd table
});
$(document).on("change", ".mandatorySub", function() {
var checkboxIndex = $(this).closest('table').find('input[type="checkbox"]').index(this)
if ($(this).is(":checked")) {
$('#tableboth').find('input[type="checkbox"]').eq(checkboxIndex).prop("checked", true);
} else {
$('#tableboth').find('input[type="checkbox"]').eq(checkboxIndex).prop("checked", false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table66" class="table table-bordered table-hover copySubName">
<input type="button" class="btn green" value="Add New+" id="insert66" />
<thead>
<th>Employee Name</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" name="EmpName">
</td>
<td>
<input type="checkbox" class="mandatorySub">
</td>
</tr>
</tbody>
</table>
<div class="portlet light portlet-fit box individual individualSalSection">
<div class="portlet-body individual individualSalSectionSub">
Table2:
<table id="tableboth" class="arrSubjects table table-striped table-hover arrSubjects individual">
<thead>
<th>Employee</th>
<th> Marks</th>
<th> is mandatory</th>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control EmpName" disabled="true" name="EmpName">
</td>
<td>
<input type="text" class="form-control years allownumericwithoutdecimal" maxlength="3" name="years">
</td>
<td>
<input type="checkbox" class="mandatorySub">
</td>
</tr>
</tbody>
</table>
</div>
</div>

Dynamically add rows to a bootstrap table that has a form ;

I have a bootstrap table like this . Now i want this table to add two rows after clicking of a button and still have the form functionality that is that i should be able to able a unique name for the table colums to be able to read this in my controller . All the solutions i have seen don't maintain the unique name for the added rows . How can i do this ?
<form class="form-horizontal" role="form" action="updateCategory" method=POST>
<div class="table-responsive">
<table class="table table-bordered table-striped table-highlight">
<tr>
<th style="width:15%" >Property</th>
<th style="width:40%">Present Value</th>
<th style="width:45%">Edited Value</th>
</tr>
<tr>
<td align="center"><strong>Id</strong></td>
<td><p class="text-danger" id="id1">Id</p></td>
<td><input type="text" class="form-control" id="id" name="id" placeholder="Enter Id"></td>
</tr>
<tr>
<td align="center"><strong>Cat Key</strong></td>
<!-- <td><input type="text" class="form-control" id="catKey1" name="catKey1" placeholder="Enter CatKey"></td> -->
<td><p class="text-danger" id="catKey1">Cat Key</p></td>
<td><input type="text" class="form-control" id="catKey" name="catKey" placeholder="Enter CatKey"></td>
</tr>
<tr>
<td align="center"><strong>Name</strong></td>
<td><p class="text-danger" id="name1">Name</p></td>
<td><input type="text" class="form-control" id="name" name="name" placeholder="Enter Name"></td>
</tr>
<tr>
<td align="center"><strong>Icon</strong></td>
<td><p class="text-danger" id="icon1">Icon</p></td>
<td><input type="text" class="form-control" id="icon" name="icon" placeholder="Enter Icon"></td>
</tr>
<tr>
<td align="center"><strong>Icon White</strong></td>
<td><p class="text-danger" id="iconWhite1">Icon White</p></td>
<td><input type="text" class="form-control" id="iconWhite" name="iconWhite" placeholder="Enter IconWhite"></td>
</tr>
<tr>
<td align="center"><strong>Color</strong></td>
<td><p class="text-danger" id="color1">Color</p></td>
<td><input type="text" class="form-control" id="color" name="color" placeholder="Enter Color"></td>
</tr>
<tr>
<td align="center"><strong>Post Order Success Message</strong></td>
<td><p class="text-danger" id="posm1">Post Order Success Message</p></td>
<td><input type="text" class="form-control" id="posm" name="posm" placeholder="Enter Post Order Success Message"></td>
</tr>
<tr>
<td colspan="3" align="center">
<div class="form-group">
<button type="submit" class="btn btn-success btn-md" id="submit">Submit</button>
</div>
</td>
</tr>
</table>
</div>
</form>
`