I'm working with a checkbox which will disable amount textfield in the incoming added rows if the checkbox is unchecked and will enable the lot_price textfield if check.
IF(checkbox is checked) = Enable lot_price field and disable the incoming amount rows
IF(checkbox is unchecked) = Disable lot_price field and enable the incoming amount rows
Here is the current code
function disable() {
var elements = document.getElementsByClassName("amount");
document.getElementById("state").checked ? doIt(elements, true) : doIt(elements, false);
}
function doIt(elements, status) {
for (var i = 0; i < elements.length; i++) {
elements[i].disabled = status;
}
}
var rowCount = $('#table_body tr').length;
var m;
var month_label;
var check = document.getElementById("state");
if (check.checked) {
} else {
}
$(document).ready(function() {
$("#add_row").click(function(e) {
$('tr').find('input').prop('enabled', true)
$('#addr' + rowCount).html('<td><input type="text" id="item_no" name="item_no[' + rowCount + ']" placeholder="" class="form-control" autocomplete="off"></td>' +
'<td><input type="text" id="stock_no" name="stock_no[' + rowCount + ']" placeholder="Stock No" class="form-control" autocomplete="off"></td>' +
'<td><input type="text" id="unit" name="unit[' + rowCount + ']" placeholder="Unit" class="form-control" autocomplete="off"></td>' +
'<td><textarea name="description[' + rowCount + ']" id="description" rows="1" placeholder="Description" class="form-control" required></textarea></td>' +
'<td><input type="text" id="quantity' + rowCount + '" name="quantity[' + rowCount + ']" placeholder="Quantity" class="form-control" onkeypress="return isNumberKeyQTY(event)" autocomplete="off">' +
'<td><input type="text" id="unit_cost' + rowCount + '" name="unit_cost[' + rowCount + ']" placeholder="Unit Cost" class="form-control" onkeypress="return isNumberKeyUCOST(event)" autocomplete="off"></td>' +
'<td><input type="text" id="amount' + rowCount + '" name="amount[' + rowCount + ']" placeholder="Amount" class="form-control amount" required></td>'
);
$('#tab_logic').append('<tr id="addr' + (rowCount + 1) + '"></tr>');
rowCount++;
});
});
//This will Remove the row
//before the last row then
//changes the id of the last
//row which is hidden
$('#remove_row').click(function() {
var row_count_minus_btn = $('#table_body tr').length - 1
if ($('#table_body tr').length != 2) {
$("#table_body tr:nth-last-child(2)").remove();
$('#table_body tr:last-child').attr('id', 'addr' + row_count_minus_btn);
rowCount--;
} else {
swal("Oops...", "Cannot Delete First Row!", "warning");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="state" id="state" onclick="disable()">Check
<input type="text" id="lot_price" name="lot_price" placeholder="" class="form-control" value="" />
<table id="tab_logic">
<thead>
<tr>
<th style="width: 4%; text-align: center;">Item<br> No.</th>
<th style="width:10%; text-align: center">Stock No.</th>
<th style="width:10%; text-align: center">Unit</th>
<th style="width:36%; text-align: center">Description</th>
<th style="width:10%; text-align: center">Quantity</th>
<th style="width:15%; text-align: center">Unit Cost</th>
<th style="width:15%; text-align: center">Amount</th>
</tr>
</thead>
<tbody id="table_body">
<tr id='addr1'>
<td><input type="text" id="item_no" name="item_no[1]" placeholder="" class="form-control" autocomplete="off"></td>
<td><input type="text" id="stock_no" name="stock_no[1]" placeholder="Stock No" class="form-control" autocomplete="off"></td>
<td><input type="text" id="unit" name="unit[1]" placeholder="Unit" class="form-control" autocomplete="off"></td>
<td><textarea name="description[1]" id="description" rows="1" placeholder="Description" class="form-control" required></textarea></td>
<td><input type="text" id="quantity0" name="quantity[1]" placeholder="Quantity" class="form-control" onkeypress='return isNumberKeyQTY(event)' autocomplete="off"></td>
<td><input type="text" id="unit_cost0" name="unit_cost[1]" placeholder="Unit Cost" class="form-control" onkeypress='return isNumberKeyUCOST(event)' autocomplete="off"></td>
<td><input type="text" id="amount0" name="amount[1]" placeholder="Amount" class="form-control amount" required></td>
</tr>
<tr id="addr2">
</tbody>
</table>
<button type="button" id="add_row" style="display: inline;" class="btn btn-primary btn-md center-block">Add More Rows <span class="glyphicon glyphicon-plus"></span></button>
<button type="button" id="remove_row" style="display: inline;" class="btn btn-danger btn-md center-block">Delete Last Row <span class="glyphicon glyphicon-remove"></span></button>
Please add some logic to your function
Disable your lot_price on initial
Missing logic to enable/disable lot_price when checkbox was check/uncheck
function disable(){
...
...
// Enable/disable lot_price
}
Missing logic to enable/disable amount textbox when add new row to list
$('#addr' + rowCount).html(
...
+ '<td><input type="text" id="amount' + rowCount + '" name="amount[' + rowCount + ']" placeholder="Amount" class="form-control amount" required '
+ ( document.getElementById("state").checked?"disabled":"")
+'></td>');
Please run below snippet for test
function disable() {
var elements = document.getElementsByClassName("amount");
document.getElementById("state").checked ? doIt(elements, true) : doIt(elements, false);
// Enable/disable lot_price
document.getElementById("lot_price").disabled = !document.getElementById("state").checked;
}
function doIt(elements, status) {
for (var i = 0; i < elements.length; i++) {
elements[i].disabled = status;
}
}
var rowCount = $('#table_body tr').length;
var m;
var month_label;
var check = document.getElementById("state");
if(check.checked){
}else{
}
$(document).ready(function() {
$("#add_row").click(function(e) {
$('tr').find('input').prop('enabled',true)
$('#addr' + rowCount).html('<td><input type="text" id="item_no" name="item_no[' + rowCount + ']" placeholder="" class="form-control" autocomplete="off"></td>'
+ '<td>...</td>'
+ '<td><input type="text" id="amount' + rowCount + '" name="amount[' + rowCount + ']" placeholder="Amount" class="form-control amount" required '+( document.getElementById("state").checked?"disabled":"")+'></td>'
);
$('#tab_logic').append('<tr id="addr' + (rowCount + 1) + '"></tr>');
rowCount++;
});
});
//This will Remove the row
//before the last row then
//changes the id of the last
//row wich is hidden
$('#remove_row').click(function(){
var row_count_minus_btn = $('#table_body tr').length - 1
if($('#table_body tr').length != 2){
$("#table_body tr:nth-last-child(2)").remove();
$('#table_body tr:last-child').attr('id', 'addr' + row_count_minus_btn);
rowCount--;
}else{
console.log("Oops...", "Cannot Delete First Row!", "warning");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="state" id="state" onclick="disable()">Check
<input type="text" id="lot_price" name="lot_price" placeholder="" class="form-control" value="" disabled/>
<table id="tab_logic">
<thead>
<tr>
<th>Item No.</th>
<th>...</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="table_body">
<tr id='addr1'>
<td><input type="text" id="item_no" name="item_no[1]" placeholder="" class="form-control" autocomplete="off"> </td><td>...
</td> <td><input type="text" id="amount0" name="amount[1]" placeholder="Amount" class="form-control amount" required></td>
</tr>
<tr id="addr2">
</tbody>
</table>
<button type="button" id="add_row" style="display: inline;" class="btn btn-primary btn-md center-block" >Add More Rows <span class="glyphicon glyphicon-plus"></span></button>
<button type="button" id="remove_row" style="display: inline;" class="btn btn-danger btn-md center-block" >Delete Last Row <span class="glyphicon glyphicon-remove"></span></button>
Related
why not working this code?
Maybe someone knows?
Table:
$(document).ready(function() {
var postURL = "<?php echo url('invoices/create') ?>";
var i = 1;
// Add inputs
$('#add').click(function() {
i++;
$('#dynamic_field').append('' +
'<tr id="row' + i + '">' +
'<td><input class="form-control form-control-alternative" type="text" name="description[]" placeholder="Description"></td>' +
'<td><input class="form-control form-control-alternative" type="text" name="qty[]" placeholder="Qty"></td>' +
'<td><input class="form-control form-control-alternative" type="text" name="price[]" placeholder="Price"></td>' +
'<td><button type="button" name="remove" id="' + i + '" class="btn btn-sm btn-danger btn-remove">X</button></td></tr>');
});
// Remove inputs
$(document).on('click', '.btn-remove', function() {
var button_id = $(this).attr("id");
$('#row' + button_id + '').remove();
});
$.ajaxSetup({
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="dynamic_field">
<thead>
<tr>
<th scope="col">Description</th>
<th scope="col">Qty</th>
<th scope="col">Price</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="form-control form-control-alternative" type="text" name="description[]" placeholder="Description"></td>
<td><input class="form-control form-control-alternative" type="text" name="qty[]" placeholder="Qty"></td>
<td><input class="form-control form-control-alternative" type="text" name="price[]" placeholder="Price"></td>
<td><button type="button" name="add" id="add" class="btn btn-sm btn-success">+</button></td>
</tr>
</tbody>
</table>
I'm trying to add a bootstrap-select dynamically in a table defined as follow:
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<select class="selectpicker" data-style="select-with-transition" id="select0">
<option>opt1</option>
<option>opt2</option>
</select>
</td>
<td class="col-sm-4">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3">
<input type="text" name="phone" class="form-control" />
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
Essentially my script create new row to that table when the user press a button.
The problem is that the new bootstrap-select which you can download here, is not added correctly, infact is invisible. I don't know how to fix that, some one could help me?
This is the js code:
$(document).ready(function() {
var counter = 0;
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1
});
});
and this is a working fiddle.
I'm unsure what you meant by $(...).selectpicker() didn't work, because I tested it in your fiddle and it worked just fine. I forked it here https://jsfiddle.net/hpysz5xr/
The code is included below.
$(document).ready(function() {
var counter = 0;
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td><select class="selectpicker" id="select' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="mail' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="phone' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
$('#select'+counter).selectpicker();
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function(event) {
$(this).closest("tr").remove();
counter -= 1
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td>Select</td>
<td>Name</td>
<td>Gmail</td>
<td>Phone</td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-4">
<select class="selectpicker" data-style="select-with-transition" id="criteria0">
<option>opt1</option>
<option>opt2</option>
</select>
</td>
<td class="col-sm-4">
<input type="text" name="name" class="form-control" />
</td>
<td class="col-sm-4">
<input type="mail" name="mail" class="form-control" />
</td>
<td class="col-sm-3">
<input type="text" name="phone" class="form-control" />
</td>
<td class="col-sm-2">
<a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" style="text-align: left;">
<input type="button" class="btn btn-lg btn-block " id="addrow" value="Add Row" />
</td>
</tr>
<tr>
</tr>
</tfoot>
</table>
I am working on a simple web application that:
Adds table rows to a BS HTML website.
Has a function that adds the current time to a table cell with an onclick event.
Right now I'm having trouble finding some examples, I am able to execute the onclick event when linking a button to a text area, but how can I achieve this with a table cell?
Many thanks!
<script type='text/javascript'>
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="item' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="surgeonRequest' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="scrubCallout' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="implantUsed' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="implantRemoved' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="nurseRecord' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
//Timestamp Javascript
function getTimeStamp() {
var now = new Date();
return ((now.getMonth() + 1) + '/' + (now.getDate()) + '/' + now.getFullYear() + " " + now.getHours() + ':'
+ ((now.getMinutes() < 10) ? ("0" + now.getMinutes()) : (now.getMinutes())) + ':' + ((now.getSeconds() < 10) ? ("0" + now
.getSeconds()) : (now.getSeconds())));
}
window.onclick = "getTimeStamp" ;
</script>
<!-- BEGIN HTML -->
<!-- Tables -->
<div class="fluid-container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td><center><b>Item</b></center></td>
<td><center><b>Surgeon Request</b></center></td>
<td><center><b>Scrub Callout</b></center></td>
<td><center><b>Implant Used</b></center></td>
<td><center><b>Implant Removed</b></center></td>
<td><center><b>EHR Record</b></center></td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-2">
<input type="text" name="name" class="form-control" onclick="this.name.value=getTimeStamp()/>
</td>
<td class="col-sm-2">
<input type="text" name="surgeonRequest" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="scrubCallout" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="implantUsed" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="implantRemoved" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="nurseRecord" class="form-control"/>
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7" style="text-align: left;">
<center>
<input type="button" class="btn btn-lg btn-lg " id="addrow" value="Add Row" />
</center>
</td>
<tr>
</tr>
</tfoot>
</table>
</div>
First of all, there's a typo in your code above at onclick line where it doesn't close the ". Anyway, here's the complete modified code, please check and see if it solves your problem.
Note that I have modified both html and javascript part
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="item' + counter + '" onClick="this.value=getTimeStamp()" /></td>';
cols += '<td><input type="text" class="form-control" name="surgeonRequest' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="scrubCallout' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="implantUsed' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="implantRemoved' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="nurseRecord' + counter + '"/></td>';
cols += '<td><input type="button" class="ibtnDel btn btn-md btn-danger " value="Delete"></td>';
newRow.append(cols);
$("table.order-list").append(newRow);
counter++;
});
$("table.order-list").on("click", ".ibtnDel", function (event) {
$(this).closest("tr").remove();
counter -= 1
});
});
function calculateRow(row) {
var price = +row.find('input[name^="price"]').val();
}
function calculateGrandTotal() {
var grandTotal = 0;
$("table.order-list").find('input[name^="price"]').each(function () {
grandTotal += +$(this).val();
});
$("#grandtotal").text(grandTotal.toFixed(2));
}
//Timestamp Javascript
window.getbla = function(){
alert("hi");
return "bla";
};
window.getTimeStamp = function() {
var now = new Date();
return ((now.getMonth() + 1) + '/' + (now.getDate()) + '/' + now.getFullYear() + " " + now.getHours() + ':'
+ ((now.getMinutes() < 10) ? ("0" + now.getMinutes()) : (now.getMinutes())) + ':' + ((now.getSeconds() < 10) ? ("0" + now
.getSeconds()) : (now.getSeconds())));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- BEGIN HTML -->
<!-- Tables -->
<div class="fluid-container">
<table id="myTable" class=" table order-list">
<thead>
<tr>
<td><center><b>Item</b></center></td>
<td><center><b>Surgeon Request</b></center></td>
<td><center><b>Scrub Callout</b></center></td>
<td><center><b>Implant Used</b></center></td>
<td><center><b>Implant Removed</b></center></td>
<td><center><b>EHR Record</b></center></td>
</tr>
</thead>
<tbody>
<tr>
<td class="col-sm-2">
<input type="text" name="name" class="form-control" onClick="this.value=getTimeStamp()">
</td>
<td class="col-sm-2">
<input type="text" name="surgeonRequest" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="scrubCallout" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="implantUsed" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="implantRemoved" class="form-control"/>
</td>
<td class="col-sm-2">
<input type="text" name="nurseRecord" class="form-control"/>
</td>
<td class="col-sm-2"><a class="deleteRow"></a>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7" style="text-align: left;">
<center>
<input type="button" class="btn btn-lg btn-lg " id="addrow" value="Add Row" />
</center>
</td>
<tr>
</tr>
</tfoot>
</table>
</div>
jsfiddle: https://jsfiddle.net/3he1962o/15/
I hope it helps.
How can I multiply text box with 2 tbody by using to.parent().find() I try to use it but It's not working.
in my html
<table>
<tbody>
<tr>
<td><input type="text" name="quantity_box[0]" class="form-control a" /></td>
<td><input type="text" name="unit_price[]" class="form-control b" /> </td>
<td>display in <input type="text" name="price[] " class="form-control price" autofocus=" " /> </td>
</tr>
</tbody>
<tbody id="row1">
<tr>
<td><input type="text" name="quantity_box[0]" class="form-control a" /></td>
<td><input type="text" name="unit_price[]" class="form-control b" /> </td>
<td>display in <input type="text" name="price[] " class="form-control price" autofocus=" " /> </td>
</tr>
</tbody>
</table>
My JS
$('.a,.b').keyup(function(){
var textValue1 =$(this).parent().find('.a').val();
var textValue2 = $(this).parent().find('.b').val();
$(this).parent().find('.price').val(textValue1 * textValue2);
});
UPDATED
I use append to generate new row and it still didnt work not sure how can I do
var i = 0;
var id_i = 1;
$(document).ready(function() {
$('#add-form').click(function() {
i++;
id_i++;
$('#add-me').append(
'<tbody id="row'+i+'"><tr>'+
+'<td>'
+'</td>'
+'<td class="col-md-1">'
+'<input type="text" name="quantity_box[0]" class="form-control a" />'
+'</td>'
+'<td class="col-md-1">'
+'<input type="text" name="unit_price[]" class="form-control b" />'
+'</td>'
+'<td class="col-md-1">'
+'<input type="text" name="price[0]" id="price" class="form-control price" autofocus="" />'
+'</td>'
+'</tr></tbody>'
);
});
});
Just a minor change in the code as suggested by #A. lglesias
$('.a,.b').keyup(function() {
var $row = $(this).closest('tr');
// reason to put 1 is because if one text has value 9 and other is empty than the ouput will be 0
var textValue1 = $row.find('input.a').val() == "" ? 1 :
$row.find('input.a').val();
var textValue2 = $row.find('input.b').val() == "" ? 1 :
$row.find('input.b').val();
$row.find('input.price').val(textValue1*textValue2);
});
You have to reach the tr...
$('table').on('keyup','input.a,input.b',function() {
var $row = $(this).closest('tr');
var textValue1 = $row.find('input.a').val();
var textValue2 = $row.find('input.b').val();
$row.find('input.price').val(textValue1*textValue2);
});
Other option...
$('table').on('keyup','input.a,input.b',function() {
var $row = $(this).closest('tr');
$row.find('input.price').val($('input.a',$row).val() * $('input.b',$row).val());
});
I have problem again with javascript, i want to ask how to sum from fields?
where is the problem?
I am trying to sum all my fields using getElementsByName and getElementsById. I want to show total sum of values entered in sub total input boxes in next input box named total without refreshing page.
Can anyone will help me to figure it out..?
Here my code
$(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(to_rupiah(num1 * num2));
var arr = document.getElementsByName('.sub-total');
var tot = 0;
for (var i = 0; i < arr.length; i++) {
if (parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('TotalBayar').value = tot;
});
$(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 input input1" name="harga_satuan[]" id="input1" value="" type="text"></td><td><input class="form-control input input2" id="input2" name="jumlah_beli[]" type="text"></td><td><input class="form-control sub-total" name="sub_total[]" onblur="findTotal()" value="" id="output" type="text"></td><td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td></tr>');
index++;
});
$("#customFields").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
});
function to_rupiah(angka) {
var rev = parseInt(angka, 10).toString().split('').reverse().join('');
var rev2 = '';
for (var i = 0; i < rev.length; i++) {
rev2 += rev[i];
if ((i + 1) % 3 === 0 && i !== (rev.length - 1)) {
rev2 += '.';
}
}
return 'Rp. ' + rev2.split('').reverse().join('');
}
<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" value="" type="text"></td>
<td><input class="form-control input" id="input2" name="jumlah_beli[]" type="text"></td>
<td><input class="form-control sub-total" name="sub_total[]" id="output" onblur="findTotal()" type="text"></td>
<td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td>
</tr>
</tbody>
</table>
<div class='alert alert-info TotalBayar'>
<button id='addCF' class='btn btn-default pull-left'><i class='fa fa-plus fa-fw'></i> Baris Baru (F7)</button>
<h2>Total : <span id='TotalBayar'>0</span></h2>
Please Help
getElementsByName(".sub-total") looks for elements with name=".sub-total", but you don't have that, it's a class. You can use $(".sub-total") to get these elements and loop over them.
document.getElementById('TotalBayar').value = tot;
won't work because TotalBayar is a DIV, and .value is only valid for inputs. Use $("#TotalBayar").text(tot) to set its contents.
You also can't just call parseInt() on the value in the sub-total fields, because they begin with Rp.. I've used a regular expression to get the number out of the value.
BTW, instead of .parents("tr:first") you can use .closest("tr").
$(document).on('keyup', '.input', function() {
var num1 = $(this).closest('tr').find('.input:first').val();
var num2 = $(this).closest('tr').find('.input:last').val();
$(this).closest('tr').find('.sub-total').val(to_rupiah(num1 * num2));
var arr = document.getElementsByName('.sub-total');
var tot = 0;
$(".sub-total").each(function() {
var val = parseInt($(this).val().match(/\d+/)[0]);
if (val) {
tot += val;
}
});
$('#TotalBayar').text(tot);
});
$(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 input input1" name="harga_satuan[]" id="input1" value="" type="text"></td><td><input class="form-control input input2" id="input2" name="jumlah_beli[]" type="text"></td><td><input class="form-control sub-total" name="sub_total[]" onblur="findTotal()" value="" id="output" type="text"></td><td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td></tr>');
index++;
});
$("#customFields").on('click', '.remCF', function() {
$(this).parent().parent().remove();
});
});
function to_rupiah(angka) {
var rev = parseInt(angka, 10).toString().split('').reverse().join('');
var rev2 = '';
for (var i = 0; i < rev.length; i++) {
rev2 += rev[i];
if ((i + 1) % 3 === 0 && i !== (rev.length - 1)) {
rev2 += '.';
}
}
return 'Rp. ' + rev2.split('').reverse().join('');
}
<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" value="" type="text"></td>
<td><input class="form-control input" id="input2" name="jumlah_beli[]" type="text"></td>
<td><input class="form-control sub-total" name="sub_total[]" id="output" onblur="findTotal()" type="text"></td>
<td><button class="remCF"><i class="fa fa-times" style="color:red;"></i></button></td>
</tr>
</tbody>
</table>
<div class='alert alert-info TotalBayar'>
<button id='addCF' class='btn btn-default pull-left'><i class='fa fa-plus fa-fw'></i> Baris Baru (F7)</button>
<h2>Total : <span id='TotalBayar'>0</span></h2>