Develop Reference

how to use javascript functions multiple times

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>

2D Array Query - unexpected commas in output despite using join();

I'm doing my best to learn jQuery, and I'm a little stuck. I'm trying to make a 2d array of form data in a table, and it seems to work, but I'm returning commas when I try to get the values, even when I use join().
I'm wondering if I'm doing something wrong. I'm using a button event to trigger an alert to show the values with join().
Here is the HTML:
<table class="table order-list">
<thead>
<td>A</td>
<td>B</td>
<td>C</td>
</thead>
<tbody>
<tr data-key="1">
<td> <input type="text" class="pull-right form-control" name="" value="D"></td>
<td> <input type="text" class="pull-right form-control" name="" value="E"></td>
<td> <input type="text" class="pull-right form-control" name="" value="F"></td>
</tr>
<tr data-key="2">
<td> <input type="text" class="pull-right form-control" name="" value="H"></td>
<td> <input type="text" class="pull-right form-control" name="" value="I"></td>
<td> <input type="text" class="pull-right form-control" name="" value="J"></td>
</tr>
<tr data-key="2">
<td> <input type="text" class="pull-right form-control" name="" value="K"></td>
<td> <input type="text" class="pull-right form-control" name="" value="L"></td>
<td> <input type="text" class="pull-right form-control" name="" value="M"></td>
</tr>
</tbody>
</table>
<button id="btn1" style="width:100px, height:100px">Click</button>
Here is the jquery/javascript:
$("#btn1").click(function(){
var tableData = $('tr').map(function() {
return [$(this).find(':input').map(function() {
return $(this).val()
}).get()]
}).get()
alert(tableData.join(""));
console.log(tableData)
});
This is my output for the above: D,E,FH,I,JK,L,M

Assuming from the question that your goal is to remove all the commas in the output string then you need to also join() the inner array too. Also note that you can make the code more succinct using arrow functions. Try this:
$("#btn1").click(function() {
var tableData = $('tr').map((_, tr) => [
$(tr).find(':input').map((_, inp) => inp.value).get().join('')
]).get();
console.log(tableData.join(''));
});
#btn1 { width: 100px; height: 100px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table order-list">
<thead>
<td>A</td>
<td>B</td>
<td>C</td>
</thead>
<tbody>
<tr data-key="1">
<td><input type="text" class="pull-right form-control" name="" value="D"></td>
<td><input type="text" class="pull-right form-control" name="" value="E"></td>
<td><input type="text" class="pull-right form-control" name="" value="F"></td>
</tr>
<tr data-key="2">
<td><input type="text" class="pull-right form-control" name="" value="H"></td>
<td><input type="text" class="pull-right form-control" name="" value="I"></td>
<td><input type="text" class="pull-right form-control" name="" value="J"></td>
</tr>
<tr data-key="2">
<td><input type="text" class="pull-right form-control" name="" value="K"></td>
<td><input type="text" class="pull-right form-control" name="" value="L"></td>
<td><input type="text" class="pull-right form-control" name="" value="M"></td>
</tr>
</tbody>
</table>
<button id="btn1">Click</button>
However, if your goal is to create that output then you don't need two loops. You can loop directly through the inputs to create the flattened string:
$("#btn1").click(function() {
var tableData = $('input.form-control').map((_, inp) => inp.value).get().join('');
console.log(tableData);
});
#btn1 { width: 100px; height: 100px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table order-list">
<thead>
<td>A</td>
<td>B</td>
<td>C</td>
</thead>
<tbody>
<tr data-key="1">
<td><input type="text" class="pull-right form-control" name="" value="D"></td>
<td><input type="text" class="pull-right form-control" name="" value="E"></td>
<td><input type="text" class="pull-right form-control" name="" value="F"></td>
</tr>
<tr data-key="2">
<td><input type="text" class="pull-right form-control" name="" value="H"></td>
<td><input type="text" class="pull-right form-control" name="" value="I"></td>
<td><input type="text" class="pull-right form-control" name="" value="J"></td>
</tr>
<tr data-key="2">
<td><input type="text" class="pull-right form-control" name="" value="K"></td>
<td><input type="text" class="pull-right form-control" name="" value="L"></td>
<td><input type="text" class="pull-right form-control" name="" value="M"></td>
</tr>
</tbody>
</table>
<button id="btn1">Click</button>

How to add extra row on a table by clicking

I am trying to create an invoice system and I need to add a function to add extra rows.
What I have looks like this:
$(document).ready(function() {
$("#addrow").click(function(){
$(".item-row:last").after('
<tr class="item-row">
<td>#</td>
<td>New Item</td>
<td>New</td>
<td>New</td>
<td>New</td>
<td>New</td>
<td>New</td>
</tr>');
bind();
});
});
<table>
<tr>
<th>#</th>
<th>Type</th>
<th>Location</th>
<th>Item</th>
<th>Cost</th>
<th>Days</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td>1</td>
<td>Type</td>
<td>Location</td>
<td>Item</td>
<td>100</td>
<td>2</td>
<td>200</td>
</tr>
<tr id="hidden-row">
<td colspan=7>
<a id="addrow" href="javascript:;" title="Add a row">Add a row</a>
</td>
</tr>
What I want to do but have no idea how to do it is: click Add a row, and have an extra row to add more products. I did some research and came across some example and I took the code for the script from there but I do not know if I left part of the script out. I am using, html, php and js any help will be greatly appreciated! thank you in advanced.

You need to use `` instead of '' if its multiple line html. Also, you need to use .bind():
$(document).ready(function() {
$("#addrow").click(function() {
$(".item-row:last").after(`
<tr class="item-row">
<td>#</td>
<td>New</td>
<td>New</td>
<td>New</td>
<td>New</td>
<td>New</td>
<td>New</td>
</tr>`)
.bind();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>#</th>
<th>Type</th>
<th>Location</th>
<th>Item</th>
<th>Cost</th>
<th>Days</th>
<th>Price</th>
</tr>
<tr class="item-row">
<td>1</td>
<td>Type</td>
<td>Location</td>
<td>Item</td>
<td>100</td>
<td>2</td>
<td>200</td>
</tr>
<tr id="hidden-row">
<td colspan=7>
<a id="addrow" href="javascript:;" title="Add a row">Add a row</a>
</td>
</tr>
</table>

$(document).ready(function() {
var iCnt=0;
$('#FaqsTable').on('click','#addCF',function() {
if(iCnt<=100) {
iCnt=iCnt+1;
$("#FaqsTable").append('<tr>'+
//'<td> <div class=" col-md-9"><div class="gt_privacy_field default_width"> <input type="text" class="c_ph" id="POID" name="POID[]" value="" placeholder="POID" /></div></div></td>' +
'<td style="display:none"><input type="text" class="c_ph" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="Select Item" style="width:150px" /></td>'+
'<td><input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px"/></td>'+
'<td><input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="Enter Amount" style="width:150px"/></td>'+
'<td class="hidden" style="display:none"><input type="text" class="Flag sm-form-control" id="Flag" name="Flag[]" value="I" placeholder="Flag" /></td>'+
'<td><p class="fa fa-trash-o m-r-5" style="color:red"></p>Remove</td> '+
'</tr>');
}
});
$("#FaqsTable").on('click','#remCF',function() {
var flag=$(this).closest('tr').find(".Flag").val();
if(flag=="I") {
$(this).closest('tr').remove();
}
else(flag=="U")
{
$(this).closest("tr").hide();
$(this).closest('tr').find(".Flag").val("D");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="form-group row">
<div class="table-responsive">
<table id="FaqsTable" class="table table-bordered nobottommargin">
<tr style="background-color:#b5aeae">
<th style="text-align:center;width:400px;">Perticular </th>
<th style="text-align: center; width: 150px;">Amount </th>
<th style="text-align: center; width: 100px;">Action</th>
<tr />
<tr>
<td style="display:none">
<input type="text" class="form-control" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="ItemName" style="width:150px" required />
</td>
<td>
<input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px" required />
</td>
<td>
<input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="EnterAmount" style="width:150px" required />
</td>
<td>
<p class="fa fa-plus" style="color:green"></p>Add
</td>
</tr>
</table>
</div>
</div>
$(document).ready(function() {
var iCnt=0;
$('#FaqsTable').on('click','#addCF',function() {
if(iCnt<=100) {
iCnt=iCnt+1;
$("#FaqsTable").append('<tr>'+
//'<td> <div class=" col-md-9"><div class="gt_privacy_field default_width"> <input type="text" class="c_ph" id="POID" name="POID[]" value="" placeholder="POID" /></div></div></td>' +
'<td style="display:none"><input type="text" class="c_ph" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="Select Item" style="width:150px" /></td>'+
'<td><input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px"/></td>'+
'<td><input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="Enter Amount" style="width:150px"/></td>'+
'<td class="hidden" style="display:none"><input type="text" class="Flag sm-form-control" id="Flag" name="Flag[]" value="I" placeholder="Flag" /></td>'+
'<td><p class="fa fa-trash-o m-r-5" style="color:red"></p>Remove</td> '+
'</tr>');
}
});
$("#FaqsTable").on('click','#remCF',function() {
var flag=$(this).closest('tr').find(".Flag").val();
if(flag=="I") {
$(this).closest('tr').remove();
}
else(flag=="U")
{
$(this).closest("tr").hide();
$(this).closest('tr').find(".Flag").val("D");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="form-group row">
<div class="table-responsive">
<table id="FaqsTable" class="table table-bordered nobottommargin">
<tr style="background-color:#b5aeae">
<th style="text-align:center;width:400px;">Perticular </th>
<th style="text-align: center; width: 150px;">Amount </th>
<th style="text-align: center; width: 100px;">Action</th>
<tr />
<tr>
<td style="display:none">
<input type="text" class="form-control" id="BillDetailID" name="BillDetailID[]" value="0" placeholder="ItemName" style="width:150px" required />
</td>
<td>
<input type="text" class="form-control" id="Perticulars" name="Perticulars[]" value="" placeholder="Enter Perticular" style="width:400px" required />
</td>
<td>
<input type="text" class="form-control" id="Amount" name="Amount[]" value="0" placeholder="EnterAmount" style="width:150px" required />
</td>
<td>
<p style="color:green"></p>Add
</td>
</tr>
</table>
</div>
</div>

Total sum of columns of one row

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>

How to get a multiple of two text box that is generate by dynamic input box

I want to multiply 2 input box (man_day_rates * estimated_man_days) but the input is dynamically generate and display it in subtotal.The problem is I only can calculate the first input, when i press add button, the second input does cannot calculate.
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row1'+i+'"><td style="border:none;"></td>\
<td style="border:none;">\
<input id="man_day_rates'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >\
</td>\
<td style="border:none;">\
<input id="estimated_man_days'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">\
</td>\
<td style="border:none;"> <input id="result2" type="text" name="" value=""/></td>\
<td style="height: 20px;line-height: 20px;white-space: nowrap; border:none;"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-xs btn_remove">X</button></td>\
</tr> ');
});
$(document).ready(function(){
var man_day_rates = $('#man_day_rates1');
var estimated_man_days = $('#estimated_man_days1');
estimated_man_days.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
man_day_rates.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-striped" id="dynamic_field" style="padding:0px;">
<thead>
<tr class="headings">
<th class="column-title">#</th>
<th class="column-title">Item Title</th>
<th class="column-title">Description </th>
<th class="column-title" style="width:100px;">Man Day Rates (RM)</th>
<th class="column-title" style="width:100px;">Estimated Man Days </th>
<th class="column-title"style="width:100px;">Subtotal (RM)</th>
<th class="column-title"style="width:100px;"></th>
</th>
</tr>
</thead>
<tbody>
<tr id="row01">
<?php
$i = 1;
?>
<td style="border:none;">
<input id="man_day_rates<?php echo $i; ?>" class="form-control col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >
</td>
<td style="border:none;">
<input id="estimated_man_days<?php echo $i; ?>" class="form-control col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">
</td>
<td id=""> <input id="result" type="text" name="" value=""/></td>
<td class="add_remove_button" style="height: 20px;line-height: 20px;white-space: nowrap;"></td>
</tr>
</tbody>
</table>
</div>
<div><button id="add" type="button" class="btn btn-primary "><span class="fa fa-plus" style="margin-right:5px;"></span>Add Items</button></div>
I want to multiply 2 input box (man_day_rates * estimated_man_days) but the input is dynamically generate and display it in subtotal.The problem is I only can calculate the first input, when i press add button, the second input does cannot calculate.

you have to initialize your key event each time when you add new control dynamically.
Try like below.
$(document).ready(function(){
$('#add').click(function(){
i++;
//Add field document History
$('#dynamic_field').append('<tr id="row1'+i+'"><td style="border:none;"></td>\
<td style="border:none;">\
<input id="man_day_rates'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="man_days_rate[]" >\
</td>\
<td style="border:none;">\
<input id="estimated_man_days'+i+'" class="form-control col-md-7 col-xs-12" type="number" min="1" name="estimated_man_days[]">\
</td>\
<td style="border:none;"> <input id="result2" type="text" name="" value=""/></td>\
<td style="height: 20px;line-height: 20px;white-space: nowrap; border:none;"><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn-xs btn_remove">X</button></td>\
</tr> ');
var man_day_rates = $('#man_day_rates'+i);
var estimated_man_days = $('#estimated_man_days'+i);
estimated_man_days.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
man_day_rates.keyup(function(){
var total=isNaN(parseInt(estimated_man_days.val()* man_day_rates.val())) ? 0 :(man_day_rates.val()* estimated_man_days.val());
//$("#result").val(total);
alert(total);
});
});
});