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>
Related
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 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 am trying to add new row in table on user side.
I have done it, but it enters new row only first time, when you clicks on add row button second time, nothing happens.
function insTableRow(tableID) {
var x = document.getElementById(tableID);
var get_row = x.rows[2];
get_row.style.display = '';
console.log(get_row);
$("#" + tableID + " tbody").append(get_row);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i id="add" class="fa fa-plus-circle fa-2x fa-fw" onclick="insTableRow('educationTable')"></i>
<table class="table table-responsive table-bordered order-list" id="educationTable">
<thead>
<tr>
<th>Institute Name</th>
<th>Qualification</th>
<th>Admission Date</th>
<th>Graduation Date</th>
<th>Degree Scanned Image</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control" name="txt[]" id="number" /></td>
<td><input type="text" class="form-control" name="txt[]" id="number" /></td>
<td><input type="text" class="form-control" name="txt[]" id="number" /></td>
<td><input type="text" class="form-control" name="txt[]" id="number" /></td>
<td><input type="text" class="form-control" name="txt[]" id="number" /></td>
<td></td>
</tr>
<tr style="display:none;">
<td><input type="text" class="form-control" name="txt[]" id="number" /></td>
<td><input type="text" class="form-control" name="txt[]" id="number" /></td>
<td><input type="text" class="form-control" name="txt[]" id="number" /></td>
<td><input type="text" class="form-control" name="txt[]" id="number" /></td>
<td><input type="text" class="form-control" name="txt[]" id="number" /></td>
<td><i id="add" class="fa fa-minus-circle fa-2x fa-fw" onclick="delTableRow('educationTable')"></i></td>
</tr>
</tbody>
</table>
Working jsfiddle
any idea, why its not appending new row on second time ?
Your issue is because you're selecting the same row and appending it on every click. You're not creating a new row. To fix this you can clone the row and append that new instance.
Also note that you should avoid using outdated on* event handlers in your HTML. As you've already included jQuery in the page you can use that to attach your events outside the HTML. In addition you can use a delegated event handler on the delete icon to remove the clicked row. Try this:
$('#add').click(function() {
var $row = $('#educationTable').find('tr:last');
$row.clone().insertBefore($row).show();
});
$('#educationTable').on('click', '.delete', function() {
$(this).closest('tr').remove();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i id="add" class="fa fa-plus-circle fa-2x fa-fw"></i>
<table class="table table-responsive table-bordered order-list" id="educationTable">
<thead>
<tr>
<th>Institute Name</th>
<th>Qualification</th>
<th>Admission Date</th>
<th>Graduation Date</th>
<th>Degree Scanned Image</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control" name="txt[]" /></td>
<td><input type="text" class="form-control" name="txt[]" /></td>
<td><input type="text" class="form-control" name="txt[]" /></td>
<td><input type="text" class="form-control" name="txt[]" /></td>
<td><input type="text" class="form-control" name="txt[]" /></td>
<td></td>
</tr>
<tr style="display:none;">
<td><input type="text" class="form-control" name="txt[]" /></td>
<td><input type="text" class="form-control" name="txt[]" /></td>
<td><input type="text" class="form-control" name="txt[]" /></td>
<td><input type="text" class="form-control" name="txt[]" /></td>
<td><input type="text" class="form-control" name="txt[]" /></td>
<td><i class="delete fa fa-minus-circle fa-2x fa-fw"></i></td>
</tr>
</tbody>
</table>
Also note that I removed the repeated id="number" as it's invalid HTML to repeat the same id attribute across multiple elements. Use a class for that instead.
How about this...
Clone your Initial row to create new rows, rather than showing the display:none rows
function insTableRow(tableID) {
var x = document.getElementById(tableID);
var get_row = $(x.rows[1]).clone();
$("#" + tableID + " tbody").append(get_row);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i id="add" class="fa fa-plus-circle fa-2x fa-fw" onclick="insTableRow('educationTable')"></i>
<table class="table table-responsive table-bordered order-list" id="educationTable">
<thead>
<tr>
<th>Institute Name</th>
<th>Qualification</th>
<th>Admission Date</th>
<th>Graduation Date</th>
<th>Degree Scanned Image</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control" name="txt[]" id="number" /></td>
<td><input type="text" class="form-control" name="txt[]" id="number" /></td>
<td><input type="text" class="form-control" name="txt[]" id="number" /></td>
<td><input type="text" class="form-control" name="txt[]" id="number" /></td>
<td><input type="text" class="form-control" name="txt[]" id="number" /></td>
<td></td>
</tr>
</tbody>
</table>
I have a problem with my code, when I add the javascript multiplication not running, but at first row just fine. I think the problem id must be unique and i change to name, but still not work.
You can try mycode below.
function multiplyBy() {
num1 = document.getElementById("input1").value;
num2 = document.getElementById("input2").value;
document.getElementById("output").value = num1 * num2;
}
$(document).ready(function() {
$("#addCF").click(function() {
$("#customFields").append('<tr><td>1</td><td><input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text"></td><td><input class="form-control" name="harga_satuan[]" id="input1" onkeyup="calc()" value="" type="text"></td><td><input class="form-control" id="input2" onkeyup="calc()" name="jumlah_beli[]" type="text"></td><td><input class="form-control" name="sub_total[]" value="" id="output" type="text"></td><td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td></tr>');
});
$("#customFields").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<table class='table table-bordered' id='customFields'>
<thead>
<tr>
<th style='width:35px;'>#</th>
<th style='width:210px;'>Nama Barang</th>
<th style='width:120px;'>Harga</th>
<th style='width:75px;'>Qty</th>
<th style='width:125px;'>Sub Total</th>
<th style='width:40px;'></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input class="form-control" name="kode_barang[]" id="cariBrg" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td>
<input class="form-control" name="harga_satuan[]" id="input1" onkeyup="multiplyBy()" value="" type="text">
</td>
<td>
<input class="form-control" id="input2" onkeyup="multiplyBy()" name="jumlah_beli[]" type="text">
</td>
<td>
<input class="form-control" name="sub_total[]" id="output" onkeyup="multiplyBy()" type="text">
</td>
<td>
<button class="remCF"><i class="fa fa-times" style="color:red;"></i></button>
</td>
</tr>
</tbody>
</table>
<button id='addCF' class='btn btn-default pull-left'><i class='fa fa-plus fa-fw'></i> Baris Baru (F7)</button>
You are using same id multiple times and it gives wrong behavior with jquery/javascript. I have added some classes into each text boxes and replaced mutiplyby function with on keyup jquery function.
Try this with your page and see it gives you your desired output.
$(document).on('keyup','.input',function(){
var num1 = $(this).parents('tr:first').find('.input:first').val();
var num2 = $(this).parents('tr:first').find('.input:last').val();
$(this).parents('tr:first').find('.sub-total').val(num1 * num2);
});
$(document).ready(function() {
$("#addCF").click(function() {
$("#customFields").append('<tr><td>1</td><td><input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text"></td><td><input class="form-control input input1" name="harga_satuan[]" id="input1" onkeyup="multiplyBy(this)" value="" type="text"></td><td><input class="form-control input input2" id="input2" onkeyup="multiplyBy()" name="jumlah_beli[]" type="text"></td><td><input class="form-control sub-total" name="sub_total[]" value="" id="output" type="text"></td><td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td></tr>');
});
$("#customFields").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<table class='table table-bordered' id='customFields'>
<thead>
<tr>
<th style='width:35px;'>#</th>
<th style='width:210px;'>Nama Barang</th>
<th style='width:120px;'>Harga</th>
<th style='width:75px;'>Qty</th>
<th style='width:125px;'>Sub Total</th>
<th style='width:40px;'></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input class="form-control" name="kode_barang[]" id="cariBrg" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td>
<input class="form-control input" name="harga_satuan[]" id="input1" onkeyup="multiplyBy()" value="" type="text">
</td>
<td>
<input class="form-control input" id="input2" onkeyup="multiplyBy()" name="jumlah_beli[]" type="text">
</td>
<td>
<input class="form-control sub-total" name="sub_total[]" id="output" onkeyup="multiplyBy()" type="text">
</td>
<td>
<button class="remCF"><i class="fa fa-times" style="color:red;"></i></button>
</td>
</tr>
</tbody>
</table>
<button id='addCF' class='btn btn-default pull-left'><i class='fa fa-plus fa-fw'></i> Baris Baru (F7)</button>
The values of id attributes must be unique across the whole document. Each time you do the calculation you are adding another element with the id output. The DOM doesn't know which one you mean.
I think the problem id must be unique and i change to name
Yes that's it, the id should be unique in the same document, instead you don't need id's here it will be better to use common classes :
<tr>
<td>
<input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td>
<input class="form-control calculation" name="harga_satuan[]" value="" type="text">
</td>
<td>
<input class="form-control calculation" name="jumlah_beli[]" type="text">
</td>
<td>
<input class="form-control output" name="sub_total[]" id="" type="text">
</td>
<td>
<button class="remCF"><i class="fa fa-times" style="color:red;"></i></button>
</td>
</tr>
NOTE : No need for inline-events better to attach your event in the JS code, Check my suggestion using input event that is more efficient than keyup when you track the user input's.
I've added also an index to enumerate the rows...
Hope this helps.
Working Snippet :
$(document).ready(function() {
var index = 2;
$("#addCF").click(function() {
$("#customFields").append('<tr><td>'+index+'</td><td><input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text"></td><td><input class="form-control calculation" name="harga_satuan[]" value="" type="text"></td><td><input class="form-control calculation" name="jumlah_beli[]" type="text"></td><td><input class="form-control output" name="sub_total[]" value="" type="text"></td><td><button class="remCF"><i class="fa fa-eye" style="color:red;"></i></button></td></tr>');
index++;
});
$("#customFields").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
$("table").on('input', '.calc', function(){
var parent_row = $(this).closest('tr');
var num1 = parent_row.find('[name="harga_satuan[]"]').val();
var num2 = parent_row.find('[name="jumlah_beli[]"]').val();
parent_row.find('.output').val(num1*num2);
});
});
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table class='table table-bordered' id='customFields'>
<thead>
<tr>
<th style='width:35px;'>#</th>
<th style='width:210px;'>Nama Barang</th>
<th style='width:120px;'>Harga</th>
<th style='width:75px;'>Qty</th>
<th style='width:125px;'>Sub Total</th>
<th style='width:40px;'></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input class="form-control" name="kode_barang[]" placeholder="Ketik Kode / Nama Barang" type="text">
</td>
<td><input class="form-control calc" name="harga_satuan[]" value="" type="text"></td>
<td><input class="form-control calc" name="jumlah_beli[]" type="text"></td>
<td><input class="form-control output" name="sub_total[]" id="" type="text"></td>
<td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td>
</tr>
</tbody>
</table>
<button id='addCF' class='btn btn-default pull-left'><i class='fa fa-plus fa-fw'></i> Baris Baru (F7)</button>