Jquery using .parent() multiply 2data with 2 body - javascript

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());
});

Related

I have a little problem to confuse, when I click the button to add new table, it's cannot add under the <tr>

I have a little problem to confuse, when I click the button to add new table, it's cannot add under the <tr>
Where has a problem?
this is my code
js.code
function add_agdata_record(o) {
let read_develop_ag = $(o).data("read_develop_ag");
let read_store = $(o).data("read_store");
let read_agaMountPer = $(o).data("id_adread_agaMountPermin");
let read_agMoney1 = $(o).data("read_agMoney1");
let read_agMoney2 = $(o).data("read_agMoney2");
let read_agMoney3 = $(o).data("read_agMoney3");
$(o).parent().parent().append('<tr><td><input type="text" id="develop_ag_new" name="develop_ag_new" value="' + read_develop_ag + '"></td>' +
' <td><input type="text" id="store" name="store" value="' + store + '"></td>' +
' <td><input type="text" id="agaMountPer" name="agaMountPer" value="' + agaMountPer + '"></td>' +
' <td><input type="text" id="agMoney1" name="agMoney1" value="' + agMoney1 + '"></td>' +
' <td><input type="text" id="read_agMoney2" name="read_agMoney2" value="' + agMoney2 + '">' +
' </td><td><input type="text" id="agMoney3" name="agMoney3" value=' + agMoney3 + '""></td></tr>');
}
PHP code
<table width="100%" border="1" id="myTable">
<tr>
<td class="main_t_2 input-group-addon">Real No.</td>
<td colspan="5"><input type="text" id="agaMount" name="agaMount" value="{$read_agaMount}"></td>
</tr>
<tr>
<td class="main_t_2 input-group-addon">AG</td>
<td class="main_t_2 input-group-addon">Store</td>
<td class="main_t_2 input-group-addon">AG%</td>
<td class="main_t_2 input-group-addon">Bonus</td>
<td class="main_t_2 input-group-addon">Money2</td>
<td class="main_t_2 input-group-addon">Money3</td>
</tr>
<tr>
<td><input type="text" id="develop_ag_new" name="develop_ag_new" value="{$read_develop_ag}"></td>
<td><input type="text" id="store" name="store" value="{$read_store}"></td>
<td><input type="text" id="agaMountPer" name="agaMountPer" value="{$read_agaMountPer}"></td>
<td><input type="text" id="agMoney1" name="agMoney1" value="{$read_agMoney1}"></td>
<td><input type="text" id="read_agMoney2" name="read_agMoney2" value="{$read_agMoney2}"></td>
<td><input type="text" id="agMoney3" name="agMoney3" value="{$read_agMoney3}"></td>
</tr>
<tr>
<td><input type="button" value="Add AG" onclick="add_agdata_record(this)"></td>
<td colspan="4" align="right">Update?:</td>
<td><input type="radio" id="upd" name="upd" value="2" checked>
NO
<input type="radio" id="upd" name="upd" value="0">
Update
<input type="radio" id="upd" name="upd" value="1">
Insert
</td>
</tr>
</table>
When I click the add_ag button, it cannot add table under the
like this
$(function(){
$("#add").click(function(){
$('#mt tbody').append('<tr><td><input type="text" id="develop_ag_new[]" name="develop_ag_new[]" value=""></td>'+
'<td><input type="text" id="store[]" name="store[]" value=""></td>'+
'<td><input type="text" id="agaMountPer[]" name="agaMountPer[]" value=""></td>'+
'<td><input type="text" id="agMoney1[]" name="agMoney1[]" value=""></td>'+
'<td><input type="text" id="agMoney2[]" name="agMoney2[]" value=""></td>'+
'<td><input type="text" id="agMoney3[]" name="agMoney3[]" value=""></td></tr>');
tag++;
});
$("#del").click(function(){
$("#mt tbody tr:last").remove();
});
})
html
<tr>
<td><input type="text" id="develop_ag_new" name="develop_ag_new" value="{$v.develop_ag}" disabled="disabled"></td>
<td><input type="text" id="store" name="store" value="{$v.store}" disabled="disabled"></td>
<td><input type="text" id="agaMountPer" name="agaMountPer" value="{$v.agaMountPer}" disabled="disabled"></td>
<td><input type="text" id="agMoney1" name="agMoney1" value="{$v.agMoney1}" disabled="disabled"></td>
<td><input type="text" id="agMoney2" name="agMoney2" value="{$v.agMoney2}" disabled="disabled"></td>
<td><input type="text" id="agMoney3" name="agMoney3" value="{$v.agMoney3}" disabled="disabled"></td>
</tr>
You are defining read_agMoney1 read_agMoney2 and read_agMoney3 but you're assigning agMoney1, agMoney2 and agMoney3. You need to change to a valid variable
function add_agdata_record(o) {
let read_develop_ag = $(o).data("read_develop_ag");
let read_store = $(o).data("read_store");
let read_agaMountPer = $(o).data("id_adread_agaMountPermin");
let read_agMoney1 = $(o).data("read_agMoney1");
let read_agMoney2 = $(o).data("read_agMoney2");
let read_agMoney3 = $(o).data("read_agMoney3");
$(o).parent().parent().append('<tr><td><input type="text" id="develop_ag_new" name="develop_ag_new" value="' + read_develop_ag + '"></td>' +
' <td><input type="text" id="store" name="store" value="' + store + '"></td>' +
' <td><input type="text" id="agaMountPer" name="agaMountPer" value="' + agaMountPer + '"></td>' +
' <td><input type="text" id="agMoney1" name="agMoney1" value="' + read_agMoney1 + '"></td>' +
' <td><input type="text" id="read_agMoney2" name="read_agMoney2" value="' + read_agMoney2 + '">' +
' </td><td><input type="text" id="agMoney3" name="agMoney3" value=' + read_agMoney3 + '""></td></tr>');
}

Checkbox to disable text field on dynamically added rows

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>

how to delete child row only in jquery datatables?

I have a 2 row staticly its a default. and i want to add more rows in below the default rows.. and i dont knwo how to delete child row without deleting parent row..
My parent row is that default two rows. i dont want to delete that two rows.. i want to delete child rows only..
var ctr = 1;
var FieldCount = 1;
$('#cashTable').on('click', '.button-add', function() {
ctr++;
var cashacc_code = 'cashacc_code' + ctr;
var cashacc = 'cashacc' + ctr;
var cash_narrat = 'cash_narrat' + ctr;
var cashdeb = 'cashdeb' + ctr;
var cashcredit = 'cashcredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">Choose an Items</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
$('#cashTable').append(newTr);
// delete row
$(document).ready(function() {
$('.dlt-icon').click(DeleteRow);
});
function DeleteRow() {
$(this).parents('tr').first().remove();
}
});
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
<thead>
<tr>
<th>A/c Code</th>
<th>Account Name*</th>
<th>Narration*</th>
<th>Debit*</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr id="fst_row">
<!-- First row -->
<td>
<input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc" id="cashacc">
<option value="Choose and items">Choose and items</option>
<option value="1">TDS A/c Name 1</option>
<option value="2">TDS A/c Name 2</option>
</select>
</td>
<td>
<input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
</td>
<td>
<input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly/>
</td>
<td>
<input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly/>
</td>
<td style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon button-add">
</td>
</tr>
<!-- Second Row -->
<tr id="sndRow">
<td>
<input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
<option value="#">Choose and items</option>
<option value="1">Joe</option>
<option value="2">Joe2</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td>
<input type="number" class="form-control" id="accdeb" placeholder="NNNNNN" name="accdeb" />
</td>
<td>
<input type="number" id="accCredit" class="form-control" name="accCredit" readonly/>
</td>
<td style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon">
</td>
</tr>
</tbody>
</table>
If you arent understand please let me knw..
if you dont want to delete first two row that already created, then use .jsrow as below
Another thing that you need to understand is tha use of classes, you added class button-add in both button add and remove, so see my code and correct it.
var ctr = 1;
var FieldCount = 1;
$('#cashTable').on('click', '.button-add', function() {
ctr++;
var cashacc_code = 'cashacc_code' + ctr;
var cashacc = 'cashacc' + ctr;
var cash_narrat = 'cash_narrat' + ctr;
var cashdeb = 'cashdeb' + ctr;
var cashcredit = 'cashcredit' + ctr;
var newTr = '<tr class="jsrow"><td><input type="number" class=' + "joe" + ' id=' + cashacc_code + ' placeholder="NNNN" /></td><td><select class="form-control" id="cashacc" ><option value="">Choose an Items</option><option value="1">Joe</option><option value="2">Joe</option><option value="3">Joe</option></select></td><td><input type="text" class=' + "joe" + ' id=' + cash_narrat + ' placeholder="Enter Here" /></td><td><input type="number" class=' + "joe" + ' id=' + cashdeb + ' ' + FieldCount + ' placeholder="NNNN" /></td><td><input type="number" class=' + "joe" + ' id=' + cashcredit + ' /></td><td style="width: 4%"><img src="./img/plus.svg" class="insrt-icon button-add"><img src="./img/delete.svg" class="dlt-icon"></td></tr>';
$('#cashTable').append(newTr);
// delete row
});
$(document).on( 'click', '.dlt-icon', function() {
$(this).parents('tr.jsrow').first().remove();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="cashTable" class="table table-bordered table-striped" required>
<thead>
<tr>
<th>A/c Code</th>
<th>Account Name*</th>
<th>Narration*</th>
<th>Debit*</th>
<th>Credit</th>
</tr>
</thead>
<tbody>
<tr id="fst_row">
<!-- First row -->
<td>
<input type="number" id="cashacc_code" placeholder="NNNN" class="form-control" name="cashacc_code" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc" id="cashacc">
<option value="Choose and items">Choose and items</option>
<option value="1">TDS A/c Name 1</option>
<option value="2">TDS A/c Name 2</option>
</select>
</td>
<td>
<input type="text" id="cash_narrat" placeholder="Enter here" class="form-control" pattern="[a-zA-Z0-9-_.]{1,20}" name="cash_narrat" data-toggle="modal" data-target="#narratModal" />
</td>
<td>
<input type="number" id="cashdeb" placeholder="Debit Amount" class="form-control" name="cashdeb" readonly/>
</td>
<td>
<input type="text" id="cashcredit" class="form-control" name="cashcredit" readonly/>
</td>
<td style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon ">
</td>
</tr>
<!-- Second Row -->
<tr id="sndRow">
<td>
<input type="number" class="form-control" id="rowNum" name="cashaccCode" placeholder="NNNN" />
</td>
<td>
<select class="form-control selectsch_items" name="cashacc_nme" id="cashacc_nme">
<option value="#">Choose and items</option>
<option value="1">Joe</option>
<option value="2">Joe2</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td>
<input type="number" class="form-control" id="accdeb" placeholder="NNNNNN" name="accdeb" />
</td>
<td>
<input type="number" id="accCredit" class="form-control" name="accCredit" readonly/>
</td>
<td style="width: 4%">
<img src="./img/plus.svg" class="insrt-icon button-add">
<img src="./img/delete.svg" class="dlt-icon">
</td>
</tr>
</tbody>
</table>

How to get automatically sum of the dynamic text field sub_total values into total text field

I want to get the sum of the values of sub_total textfield in total textfield The rows can be added according to the user requirement... but .. I tried most of things.. but not getting right how to get the sum of all sub_total textbox values in the total text field without any user input could somebody help me with this code.....
thanks in advance..
i = 1;
$('.newRow').on('click', '.addRow', function(e) {
$('.nR').append('<tr>' +
'<td class="custom-td">' +
'<select id="sp_' + i + '" class="s_p select_product form-control input-sm" name="product[]" style="width:25em;" onchange="get_Result(' + i + ')">' +
'<option></option>' +
'#foreach ($products as $key=>$product_name)' +
'<option value="{{$key}}">{{$product_name}}</option>' +
'#endforeach' +
'</select>' +
'</td>' +
'<td class="custom-td">' +
'<input type="text" min="0" id="qty_' + i + '" class="qty form-control input-sm" name="quantity[]" autocomplete="off" value="1" onKeyUp="get_Result(' + i + ')">' +
'</td>' +
'<td class="custom-td">' +
'<input type="text" id="up_' + i + '" class="up unit-price form-control input-sm" name="unit_price[]" readonly>' +
'</td>' +
'<td class="custom-td">' +
'<input type="text" min="0" id="dis_' + i + '" class="form-control input-sm" name="discount[]" autocomplete="off" value="0" onKeyUp="get_Result(' + i + ')">' +
'</td>' +
'<td class="custom-td">' +
'<input type="text" id="sub-total_' + i + '" class="s-t st form-control input-sm" name="sub_total[]" readonly>' +
'</td>' +
'<td style="text-align:center;">' +
'<i data-toggle="tooltip" data-placement="top" title="delete" style="cursor:pointer;" class="tt red far fa-times-octagon remove"></i>' +
'</td>' +
'</tr>');
i++;
var total = 0
$('.s-t').each(function() {
var $this = $(this);
total += $this.val();
});
$("#total").val(total);
<table class="item_table newRow table table-bordered table-sm mt-3" style="width:100%;">
<tr style="font-size:12px;">
<th>Product</th>
<th>Quantity</th>
<th>Unit Price (PKR)</th>
<th>Discount</th>
<th>Sub-Total</th>
<th>Option</th>
</tr>
<tbody class="nR">
<tr>
<td class="custom-td">
<select class="select_product s_p form-control input-sm" name="product[]" style="width:25em;">
<option></option>
#foreach ($products as $key=>$product_name)
<option value="{{$key}}">{{$product_name}}</option>
#endforeach
</select>
</td>
<td class="custom-td">
<input type="text" min="0" id="qty_0" class="qty form-control input-sm" name="quantity[]" autocomplete="off" value="1" onKeyUp="get_Result(0)">
</td>
<td class="custom-td">
<input type="text" id="up_0" class="up unit-price form-control input-sm" name="unit_price[]" readonly>
</td>
<td class="custom-td">
<input type="text" min="0" id="dis_0" class="form-control input-sm" name="discount[]" autocomplete="off" value="0" onkeyUp="get_Result(0)">
</td>
<td class="custom-td">
<input type="text" id="sub-total_0" class="s-t st form-control input-sm" name="sub_total[]" readonly>
</td>
<td style="text-align:center;">
<i data-toggle="tooltip" data-placement="top" title="delete" style="cursor:pointer;" class="red far fa-times-octagon remove"></i>
</td>
</tr>
</tbody>
<tr>
<td colspan="6" style="padding-left:5px;">
<button type="button" class="btn btn-default btn-sm addRow"><i class="fal fa-plus"></i> Add</button>
</td>
</tr>
</table>
<input type="text" id="total" style="border:none;background:#f7f7f7;text-align:right;font-weight:500;" class="form-control input-sm" name="total" readonly>

Price Calculation in Javascript/Codeigniter

I want to calculate the Total Price for the order. I got a formula::
TotalWithoutTax = (UnitPrice*Quantity)+Transportation+Premium-Discount
TotalAmtInclTax = TotalWithoutTax + TotalTax
But I cannot get the output. Please help me and give me some advise on this. Thank You.
Javascript:
function calcPrice(qty[], unit_price[], gp[], discount[], totalwithouttax, totaltax, totalamtincltax) {
var quantity = document.getElementById('qty[]').value;
var unitPrice = document.getElementById('unit_price[]').value;
var premium = document.getElementById('gp[]').value;
var discount = document.getElementById('discount[]').value;
var transportation = document.getElementById('transportation[]').value;
var totalwithouttax = (unitPrice * quantity) + premium + transportation - discount;
document.getElementById(totalwithouttax).value = Math.round(totalwithouttax);
return true;
var totalwithouttax = document.getElementById('totalwithouttax').value;
var totaltax = document.getElementById('totaltax').value;
var totalamtincltax = totalwithouttax + totaltax;
document.getElementById(totalamtincltax).value = Math.round(totalamtincltax);
return true;
}
View:
<!-- **************************** START OF ITEM LIST 1 ************************ -->
<tr class="item-details">
<td><span class="rowNumber">1</span></td>
<td class="">
<?php
$options = array(
'' => '~Choose An Item~'
);
foreach ($item as $rows){
$options[$rows->id] = $rows->item_name;
}
$select = array(
'id' => 'item_name',
'class' => 'form-control'
);
echo form_dropdown('item_name[]', $options,set_value('item_name'),$select);
?>
</td>
<td class=""><input type="number" class="item-qty" name="qty[]" /></td>
<td><input type="number" name="weight[]" class="weight" /></td>
<td><input type="number" name="transportation[]" class="transporation" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" /></td>
<td><input type="text" id="gp[]" name="gp[]" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" /></td>
<td><input type="text" id="discount[]" name="discount[]" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" /></td>
<td><input type="text" id="unit_price[]" name="unit_price[]" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" /></td>
<td align="right">
<input type="text" id="totalwithouttax" name="totalwithouttax" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" readonly>
</td>
<td align="right">
<input type="text" id="totaltax" name="totaltax" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" readonly>
</td>
<td align="right">
<input type="text" id="totalamtincltax" name="totalamtincltax" value="" onkeyup="calcPrice(qty[],unit_price[],gp[],discount[],totalwithouttax,totaltax,totalamtincltax);" readonly>
</td>
</tr><br/>
document.getElementById("totalwithouttax").value=Math.round(totalwithouttax);
this can solve a lot of issues a think

Categories