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>
I'm running a code where I must create a function and call it multiple times. I am having trouble calling it more than once.
how to use Mul() function in second table row.
Please help Me.
Thanks.
function Mul() {
var quantity = document.getElementById("quantity").value;
var price = document.getElementById("price").value;
document.getElementById(id).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="quantity" class="form-control" onkeyup="Mul()">
</td>
<td>
<input type="number" id="price" class="form-control" onkeyup="Mul()">
</td>
<td>
<input type="text" id="amount" class="form-control" disabled>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control">
</td>
<td>
<input type="number" id="quantity" class="form-control">
</td>
<td>
<input type="number" id="price" class="form-control">
</td>
<td>
<input type="text" id="result" class="form-control" disabled>
</td>
</tr>
</tbody>
</table>
Add class name for every input and pass index to Mul() function
try below code.
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')">
</td>
<td>
<input type="number" id="" class="price form-control" onkeyup="Mul('0')">
</td>
<td>
<input type="text" id="amount" 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" 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" class="amount form-control" disabled>
</td>
</tr>
</tbody>
</table>
I'm new to JS. I have a dynamic table (I didn't add the code for add and delete rows) which I want to show in another table. I try to clone every row. Everything is working but td tag with select element doesn't cloned properly. It shows the selected value or the first value if there is no selected. The idea of this clone is to show the table in modal form and the cloned table will be like a preview. Cloning happened when the modal foem is show. In code below I add the button for cloning table. I think, it doesn't matter in this case.
This is the Fiddle link.
Here is my code HTML:
<table class="table table-bordered" id="table" >
<thead>
<tr>
<td >#</td>
<td >Description</td>
<td >Qty</td>
<td >Units</td>
<td >Price without vat</td>
<td >Vat %</td>
<td >Total</td>
<td >Del</td>
</tr>
</thead>
<tr class="product">
<td class="cloned" width="4%" >
<input type="number" class="enumer" style="width:100%; border: none; padding: 0" disabled="disabled">
</td>
<td class="cloned" width="34%">
<input type="text" class="item_product" style="width:100%;" name="product[]">
</td>
<td class="cloned" width="18">
<input style="width:100%;" class="qty" id="qty" name="qty[]" pattern="[+-]?([0-9]+[.,]?[0-9]*)" type="text" value="0" required>
</td>
<td class="cloned" width="7%">
<input id="item_units[]" class="units" style="width:100%;" name="item_units[]" type="text" value="ks">
</td>
<td class="cloned" width="10%">
<input class="price" style="width:100%;" id='price' name="price_unit[]" pattern="[+-]?([0-9]+[.,]?[0-9]*)" value="0" type="text" required>
</td>
<td class="cloned" width="7%" id="vat_td">
<select class="vat" id="vat" name="vat[]" type="text">
<option value="0">0</option>
<option value="10">10</option>
<option value="20">20</option>
</select>
</td>
<input class="hidden" hidden value="1" id="payer_vat_hidden">
<td class="cloned" width="17%">
<input type="number" style="width:100%; background: #dddddd;" class="amount" id="amount" name="amounts[]" readonly>
</td>
<td class="delTD" width="5%">
<button type="button" style="width:100%;" id="deleteRow" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
</table>
<button onclick="copyTable()">copy table</button>
<table class="table table-bordered" id="second_table" >
<thead>
<tr>
<th>#</th>
<th>DESCRIPTION</th>
<th class="text-center">QUANTITY</th>
<th class="text-center">UNITS</th>
<th class="text-right">PRICE</th>
<th class="text-right">Total</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Here is my code Javascript:
function copyTable(){
$("#second_table tr").remove();
$("#table tr").each(function() {
var $target = $("#second_table");
var $tds = $(this).children(),
$row = $("<tr></tr>");
$row.append($tds.eq(0).clone())
.append($tds.eq(1).clone())
.append($tds.eq(2).clone())
.append($tds.eq(3).clone())
.append($tds.eq(4).clone())
.append($tds.eq(5).clone())
.append($tds.eq(6).clone())
.appendTo($target);
});
}
I want to add the column values in text box field of each single row during insertion of value to that field and display that value in a read only field.
HTML CODE:
<form action="" method="post">
<table class="table-responsive">
<thead>
<tr>
<th style="width: 10%;">Task Name</th>
<th style="width: 10%;">Task Code</th>
<th style="width: 10%;">LDR</th>
<th style="width: 10%;">SDR</th>
<th style="width: 30%;">Total</th>
</tr>
</thead>
<?php
while($m_row = $m_result->fetch_assoc()) {
?>
<tbody>
<tr>
<?php
$sqltask="SELECT * FROM tasks WHERE tasks_code='".$m_row['tcode']."'";
$resulttask=$conn->query($sqltask);
$rowtask=$resulttask->fetch_assoc();
?>
<td><?php echo $rowtask['tasks_name'] ?></td>
<td><?php echo $m_row['tcode'] ?></td>
<td>
<input type="text" class="form-control master" name="ldr[]" id="ldr" value="<?php echo $m_row['ldr'];?>" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master" name="sdr[]" id="sdr" value="<?php echo $m_row['sdr'];?>" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master" id="master_diff" name="master_diff[]" readonly />
</td>
<td> <input type="hidden" name="master[]" id="master" value="<?php echo $master_row['id'];?>" /></td></tr>
</tbody>
<?php
}
?>
</table>
<div class="pull-right">
<input type="submit" class="btn btn-primary" name="mastertask" placeholder="Assign"/>
</div>
</div>
</div>
</div>
</form>
The above code is the html code for the textbox fields where the fields ldr,sdr should be sumup for getting the total sum in master_diff field. It should be using onchange event since each entry to the textbox fields should be get added to display the final sum.
You should to remove all ids from the cycle!
Try this:
var inputs = document.getElementsByClassName("inputs");
var summDiff = function() {
var tr = this.closest("tr");
var ldr = tr.getElementsByClassName("ldr")[0]
var sdr = tr.getElementsByClassName("sdr")[0]
var diff = tr.getElementsByClassName("master_diff")[0]
diff.value = parseInt(ldr.value) + parseInt(sdr.value)
};
for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('change', summDiff, false);
}
<form action="" method="post">
<table class="table-responsive">
<thead>
<tr>
<th style="width: 10%;">Task Name</th>
<th style="width: 10%;">Task Code</th>
<th style="width: 10%;">LDR</th>
<th style="width: 10%;">SDR</th>
<th style="width: 30%;">Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>task 1</td>
<td>0001</td>
<td>
<input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master master_diff" name="master_diff[]" readonly />
</td>
<td>
<input type="hidden" name="master[]" value="1" />
</td>
</tr>
<tr>
<td>task 2</td>
<td>0002</td>
<td>
<input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master master_diff" name="master_diff[]" readonly />
</td>
<td>
<input type="hidden" name="master[]" value="2" />
</td>
</tr>
<tr>
<td>task 3</td>
<td>0003</td>
<td>
<input type="text" class="form-control master ldr inputs" name="ldr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="text" class="form-control master sdr inputs" name="sdr[]" value="" placeholder="" autocomplete="off">
</td>
<td>
<input type="number" class="form-control master master_diff" name="master_diff[]" readonly />
</td>
<td>
<input type="hidden" name="master[]" value="3" />
</td>
</tr>
</tbody>
</table>
<div class="pull-right">
<input type="submit" class="btn btn-primary" name="mastertask" placeholder="Assign"/>
</div>
</form>
I need a little help creating a dynamic array of JSON object from the values of different elements. Example is elements below. I have other elements to create the values required for JSON. I didnt want to post 3 lots of same code. So belwo x3
<tr>
<td style="width: 5%"><label>Title:</label></td>
<td><input type="text" class="leds" name="title" style="width:150px"value=""></td><tr>
<td style="width: 5%"><label>Message:</label></td>
<td><input type="text" class="leds" name="message" style="width: 150px" value=""></td><tr>
<td style="width: 5%"><label>IP address:</label></td>
<td><input type="text" class="leds" name="ip_address" style="width:150px" value=""></td>
<td style="width: 5%"><label>Message Colour:</label></td>
<td><select type="text" class="leds" name="led_colour" style="width:150px">
<option value=""></option>
<option value="255,0,0,0">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</td>
</tr>
I can get the values with the following
$.each($('.leds'), function(index, obj) {
console.log(index + ':' + obj.value);
});
What I would like to do is create JSON like below:
[{
"title": "Test1",
"message": "Test1 message",
"ip_address": "1.1.1.1",
"led_colour" : "255,0,0,0"},
{
"title": "Test2",
"message": "Test2 message",
"ip_address": "2.2.2.2",
"led_colour" : "255,0,0,0"},
{
"title": "Test3",
"message": "Test3 message",
"ip_address": "3.3.3.3",
"led_colour" : "255,0,0,0"
}]
A simple way is to loop each tr and get all .leds inputs, get the name of input and it's value an build object, then put it to array. See the code bellow.
var itemsArray = [];
$.each($('tr'), function() {
var item = {};
$(this).find('.leds').each(function(index, obj) {
item[$(obj).attr("name")]=$(obj).val();
});
itemsArray.push(item);
});
I think it's solution, but better need modify your html structure
1) In your case:
function getJson(keys) {
let result = [];
$('.leds').each(function(i) {
let keyIndex = i % keys.length,
key = keys[keyIndex];
if (!keyIndex) {
result.push({});
}
let index = result.length - 1;
result[index][key] = this.value;
})
return result;
}
const jsonData = getJson(['title', 'message', 'ip_address', 'led_colour']);
console.log('jsonData:', jsonData);
2) Try use tbody for group your tr
DEMO in Codepen.io
function getJson() {
let result = [];
$('tbody').each(function() {
let item = {}
$('.leds', this).each(function() {
let $this = $(this);
item[$this.prop('name')] = $this.val();
})
result.push(item);
})
console.log('result:', result)
return result;
}
$(() => {
getJson();
$('button').click(() => {
console.clear();
const jsonData = getJson();
alert(JSON.stringify(jsonData));
})
})
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button>Get Json Data</button>
<table>
<tbody>
<tr>
<td style="width: 5%">
<label>Title:</label>
</td>
<td>
<input type="text" name="title" style="width:150px" value="title1" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>Message:</label>
</td>
<td>
<input type="text" name="message" style="width: 150px" value="mess1" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>IP address:</label>
</td>
<td>
<input type="text" name="ip_address" style="width:150px" value="192.168.1.1" class="leds"/>
</td>
<td style="width: 5%">
<label>Message Colour:</label>
</td>
<td>
<select type="text" name="led_colour" style="width:150px" class="leds">
<option value=""></option>
<option value="255,0,0,0" selected="selected">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</select>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td style="width: 5%">
<label>Title:</label>
</td>
<td>
<input type="text" name="title" style="width:150px" value="title2" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>Message:</label>
</td>
<td>
<input type="text" name="message" style="width: 150px" value="mess2" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>IP address:</label>
</td>
<td>
<input type="text" name="ip_address" style="width:150px" value="192.168.1.2" class="leds"/>
</td>
<td style="width: 5%">
<label>Message Colour:</label>
</td>
<td>
<select type="text" name="led_colour" style="width:150px" class="leds">
<option value=""></option>
<option value="255,0,0,0" selected="selected">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</select>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td style="width: 5%">
<label>Title:</label>
</td>
<td>
<input type="text" name="title" style="width:150px" value="title3" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>Message:</label>
</td>
<td>
<input type="text" name="message" style="width: 150px" value="mess3" class="leds"/>
</td>
</tr>
<tr>
<td style="width: 5%">
<label>IP address:</label>
</td>
<td>
<input type="text" name="ip_address" style="width:150px" value="192.168.1.3" class="leds"/>
</td>
<td style="width: 5%">
<label>Message Colour:</label>
</td>
<td>
<select type="text" name="led_colour" style="width:150px" class="leds">
<option value=""></option>
<option value="255,0,0,0" selected="selected">Red</option>
<option value="0,255,0,0">Green</option>
<option value="0,0,255,0">Blue</option>
<option value="255,165,0,0">Orange</option>
<option value="255,255,0,0">Yellow</option>
<option value="255,255,255,0">White</option>
<option value="128,0,128,0">Purple</option>
<option value="255,0,255,0">Fuchsia</option>
<option value="192,192,192,0">Silver</option>
</select>
</td>
</tr>
</tbody>
</table>