how to delete child row only in jquery datatables? - javascript

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>

Related

Pass dropdown selection to "item_name"

I have looked at some examples on here on how to pass dropdown selection to the "item_name" for my paypal button but just cant get it to work. I don't get any errors. When it goes to the paypal checkout, it should "Application for: Option1" taken from the dropdown selection. Right now it is blank.
Below is the current script that works will for me except the issue above. Any help with this would be appreciated.
<script type="text/javascript">
function updateitemname(){
var dropdown = document.getElementById("membership");
var selection = dropdown.value;
console.log(selection);
var item_name = document.getElementById("item_name");
item_name.value = selection;
}
function func(){
var dropdown = document.getElementById("membership");
var selection = dropdown.value;
console.log(selection);
var amount = document.getElementById("amount");
amount.value = selection;
}
function UpdateForm (obj1) {
var themessage = "You are required to complete the following fields: ";
if (obj1.amount.value=="") {
themessage = themessage + " - Amount";
}
if (obj1.firstname.value=="") {
themessage = themessage + " - First Name";
}
if (obj1.lastname.value=="") {
themessage = themessage + " - Last Name";
}
if (obj1.address1.value=="") {
themessage = themessage + " - Address";
}
if (obj1.city.value=="") {
themessage = themessage + " - City";
}
if (obj1.state.value=="") {
themessage = themessage + " - state";
}
if (obj1.zip.value=="") {
themessage = themessage + " - Zip";
}
//alert if fields are empty and cancel form submit
if (themessage == "You are required to complete the following fields: ") {
obj1.submit();
}
else {
alert(themessage);
return false;
}
obj1.item_name.value = "Application for: " + obj1.item_name.value;
obj1.os0.value = obj1.firstname.value + " " + obj1.lastname.value + " Address: " + obj1.address1.value + " " + obj1.address2.value + ", " + obj1.city.value + ", " + obj1.state.value + " " + obj1.zip.value; // + obj1.myopt4.value + ...
obj1.os1.value = obj1.class_year.value;
}
</script>
<!-- content -->
<form method="post" name="donationform" id="donationform" action="https://www.sandbox.paypal.com/" onsubmit="this.target='paypal'; return UpdateForm(this);">
<input type="hidden" name="business" value="sb-fzhc018066100#business.example.com">
<input type="hidden" name="no_shipping" value="1">
<input type="hidden" name="cmd" value="_xclick">
<table width="550" border="1" cellspacing="1" cellpadding="1">
<tr>
<td width="122">Membership:</td>
<td width="268">
<select id="membership" onchange="func()"; "updateitemname()">
<option selected="selected"></option>
<option value="10.00">Option1 $10.00 USD</option>
<option value="100.00">Option2 $100.00 USD</option>
</select></td>
<td width="168"><input name="amount" type="text" id="amount" maxlength="6" /></td>
</tr>
<!--<tr>
<td>For:</td>
<td><input type="text" name="item_name" size="38" value=""></td>
</tr>
--><tr>
<td>First Name:</td>
<td><input name="firstname" type="text" id="firstname" size="38" value="" ></td>
<td> </td>
</tr>
<tr>
<td>Last Name :</td><td><input name="lastname" type="text" id="lastname" size="38" value="" ></td>
<td> </td>
</tr>
<tr>
<td>Address 1 :</td><td><input name="address1" type="text" id="address1" size="38" value="" ></td>
<td> </td>
</tr>
<tr>
<td>Address 2 :</td><td><input name="address2" type="text" id="address2" size="38"></td>
<td> </td>
</tr>
<tr>
<td>City:</td><td><input name="city" type="text" size="38" id="city" value="" ></td>
<td> </td>
</tr>
<tr>
<td>State:</td><td><input name="state" type="text" size="38" id="state" value="" ></td>
<td> </td>
</tr>
<tr>
<td>Zip:</td><td><input name="zip" type="text" size="38" id="zip" value="" ></td>
<td> </td>
</table>
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="item_name" id="item_name" value="" />
<input type="hidden" name="on0" value="Member">
<input type="hidden" name="os0" value="">
<input type="hidden" name="bn" value="PP-DonationsBF">
<input type="hidden" name="on1" value="Class Year">
<input type="hidden" name="os1" value="">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<br /><br />
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="/pixel.gif" width="1" height="1">
</form>

How to populate dropdown data from one dropdown to another dropdown?

I have two dropdowns one is outside of dynamic table another one is inside of table column. now my problem is how to populate non-selected data one dropdown to another dropdown.
Which means, for example if i select one value from 1st dropdown, remaining non selected values only Copied to 2nd dropdown (inside dynamic table dropdown). and if i click add row, that same 2nd dropdown data will come dynamically added rows.
i hope my question is understandable.
here is my Example Fiddle
Faild Fiddle Here
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addr' + i).html("<td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter code' id='cashacc_code' class='form-control input-md'/></td><td><select class='form-control input-md' name='cashpayment[" + i + "].name' id='dynamic_sel'><option>Second dropdown</option></select></td><td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter your text here' class='form-control input-md' id='acc_narrat' data-toggle='modal' data-target='#accnarratModal' /> </td><td><input name='cashdebt[" + i + "].name' type='text' placeholder='Amount 1' class='form-control input-md' id='cashdeb'data-action='sumDebit'></td><td><input name='cashcredit[" + i + "].name' type='text' placeholder='Amount 2' data-action='sumCredit' class='form-control input-md' readonly></td>");
// {/* <td>" + (i + 1) + "</td> */}
$("#cashacc_sel").find("select").append().appendTo($("#dynamic_sel"));
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
// $('#cashacc_sel').append($('#dynamic_sel').html());
i++;
});
$("#delete_row").click(function() {
if (i > 1) {
$("#addr" + (i - 1)).html('');
i--;
}
});
});
<div class="form-group col-4" style="margin-bottom: 20px;">
<label class="col-sm-12 control-label p-sm-0 input-group"> First Dropdown:</label>
<select class="form-control selectsch_items" name="cashacc" id="cashacc" required>
<option value="">Choose an items</option>
<option value="acc1">joe 1</option>
<option value="acc2">joe 2</option>
<option value="acc3">joe 3</option>
</select>
</div>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr style="background-color: #680779; color: #fff;">
<th class="text-center">
Code
</th>
<th class="text-center">
Name*
</th>
<th class="text-center">
Text*
</th>
<th class="text-center">
Initial amount*
</th>
<th class="text-center">
First Payment
</th>
</tr>
</thead>
<tbody>
<a id="add_row" class="btn btn-default pull-left adRow">Add Row</a><a id='delete_row' class="pull-right btn btn-default adRow" style="margin-right: 5px;">Delete Row</a>
<tr id='addr0'>
<td>
<input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter Code' class="form-control" />
</td>
<td>
<select class="form-control" name="cashacc_sel" id="cashacc_sel">
<option value="">Second dropdown</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter your text here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td>
<input type="number" id="cashdeb" name='cashdebt' placeholder='Amount 1' data-action="sumDebit" class="form-control" />
</td>
<td>
<input type="number" id="cashcredit" name='cashcredit' placeholder='Amount 2' data-action="sumCredit" class="form-control" readonly />
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
</div>
Please check this link Clik for more details
Html Code
<div class="form-group col-4" style="margin-bottom: 20px;"> <label class="col-sm-12 control-label p-sm-0 input-group"> First Dropdown:</label> <select class="form-control selectsch_items" name="cashacc" id="cashacc" required>
<option value="">Choose an items</option>
<option value="acc1">joe 1</option>
<option value="acc2">joe 2</option>
<option value="acc3">joe 3</option> </select> </div>
<div class="container"> <div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr style="background-color: #680779; color: #fff;">
<th class="text-center">
Code
</th>
<th class="text-center">
Name*
</th>
<th class="text-center">
Text*
</th>
<th class="text-center">
Initial amount*
</th>
<th class="text-center">
First Payment
</th>
</tr>
</thead>
<tbody>
<a id="add_row" class="btn btn-default pull-left adRow">Add Row</a><a id='delete_row' class="pull-right btn btn-default adRow" style="margin-right: 5px;">Delete Row</a>
<tr id='addr0'>
<td>
<input type="text" id="cashacc_code" name='cashacc_code' placeholder='Enter Code' class="form-control" />
</td>
<td>
<select class="form-control" name="cashacc_sel" id="cashacc_sel">
<option value="">Second dropdown</option>
</select>
</td>
<td>
<input type="text" class="form-control" id="acc_narrat" placeholder="Enter your text here" name="acc_narrat" data-toggle="modal" data-target="#accnarratModal" />
</td>
<td>
<input type="number" id="cashdeb" name='cashdebt' placeholder='Amount 1' data-action="sumDebit" class="form-control" />
</td>
<td>
<input type="number" id="cashcredit" name='cashcredit' placeholder='Amount 2' data-action="sumCredit" class="form-control" readonly />
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div> </div> </div>
Jquery Code
$(document).ready(function() {
$("#cashacc_sel").html($('#cashacc').html());
var i = 1;
$("#add_row").click(function() {
var oSelectedValue = $('#cashacc').val();
$('#addr' + i).html("<td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter code' id='cashacc_code' class='form-control input-md'/></td><td><select class='form-control input-md' name='cashpayment[" + i + "].name' id='dynamic_sel'><option>Second dropdown</option></select></td><td><input name='cashpayment[" + i + "].name' type='text' placeholder='Enter your text here' class='form-control input-md' id='acc_narrat' data-toggle='modal' data-target='#accnarratModal' /> </td><td><input name='cashdebt[" + i + "].name' type='text' placeholder='Amount 1' class='form-control input-md' id='cashdeb'data-action='sumDebit'></td><td><input name='cashcredit[" + i + "].name' type='text' placeholder='Amount 2' data-action='sumCredit' class='form-control input-md' readonly></td>");
// {/* <td>" + (i + 1) + "</td> */}
$("#cashacc_sel").find("select").append().appendTo($("#dynamic_sel"));
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
// $('#cashacc_sel').append($('#dynamic_sel').html());
$("select[name='cashpayment[" + i + "].name']").html($('#cashacc option:not(:selected)'));
$("#cashacc").html($('#cashacc_sel').html());
$("#cashacc").val(oSelectedValue);
i++;
});
$("#delete_row").click(function() {
if (i > 1) {
$("#addr" + (i - 1)).html('');
i--;
}
});
});

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>

Cannot add dynamic bootstrap select to 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>

Calculate Total value for two input fields based on items selected from a select option tag in table

I want to get the value of the Amount pass to either Debit Amount or Credit Amount base on the Type selected if DR is select, then the value should be pass to Debit Amount and if CR is selected, then the value should be pass to Credit Amount. Total Amount should be passed in case of multiple Type options are selected
The HTML
<div>
<label style="margin-bottom:3px;">Debit Amount</label><span>
<input type="text" name="total_debit" id="totalDebit"/></span>
</div>
<div>
<label>Credit Amount</label><span>
<input type="text" name="total_credit" id="totalCredit" /></span>
</div>
<table class="table-bordered table-hover">
<thead>
<tr>
<th width="2%"><input id="check_all" type="checkbox"/></th>
<th width="5%">Type</th>
<th width="5%">Account Code</th>
<th width="15%">Account Name</th>
<th width="10%">Fund</th>
<th width="10%">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><select name="account_id[]" class=" mySelect" id="type_1">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_1">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_1"></td>
<td>
<select name="fund_id[]" >
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_1" class="totalLineAmount">
</td>
</tr>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><select name="account_id[]" class=" mySelect" id="type_2">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_2">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_2"></td>
<td>
<select name="fund_id[]" >
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_2" class="totalLineAmount">
</td>
</tr>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><select name="account_id[]" class=" mySelect" id="type_3">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_3">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_3"></td>
<td>
<select name="fund_id[]" >
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_3" class="totalLineAmount">
</td>
</tr>
<tr>
<td><input class="case" type="checkbox"/></td>
<td><select name="account_id[]" class=" mySelect" id="type_4">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_4">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_4"></td>
<td>
<select name="fund_id[]" >
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_4" class="totalLineAmount">
</td>
</tr>
</tbody>
</table>
Jquery Script
<script>
$(function(){
$(document).on("change",".mySelect",function(e){
e.preventDefault();
var _this=$(this);
var id =_this.val();
if ( id == 1) {
calculateTotalDebit();
}else if (id == 2) {
calculateTotalCredit();
}
function calculateTotalDebit(){
total = 0;
$('.totalLineAmount').each(function(){
if($(this).val() != '' )total += parseFloat( $(this).val() );
$('#totalDebit').val( total.toFixed(2) );
});
}
function calculateTotalCredit(){
total = 0;
$('.totalLineAmount').each(function(){
if($(this).val() != '' )total += parseFloat( $(this).val() );
});
$('#totalCredit').val( total.toFixed(2) );
}
});
});
</script>
$('.totalLineAmount') is selecting all of the amount inputs, so the calculateTotalDebit and calculateTotalCredit functions are adding them all regardless of the DR/CR type. You can check for the type inside the functions, for calculateTotalDebit for example:
function calculateTotalDebit(){
var total = 0;
$('.totalLineAmount').each(function(){
var thisNumber = $(this).attr('id').slice(-1);
// select the type of this amount
var type = $('#type_' + thisNumber);
// add only if the type is DR (val == 1)
if($(this).val() != '' && type.val() == 1)total += parseFloat( $(this).val() );
$('#totalDebit').val( total.toFixed(2) );
});
$(function() {
$(document).on("change", ".mySelect", function(e) {
e.preventDefault();
var _this = $(this);
var id = _this.val();
if (id == 1) {
calculateTotalDebit();
} else if (id == 2) {
calculateTotalCredit();
}
function calculateTotalDebit() {
total = 0;
$('.totalLineAmount').each(function() {
var thisNumber = $(this).attr('id').slice(-1);
// select the type of this amount
var type = $('#type_' + thisNumber);
// add only if the type is DR (val == 1)
if ($(this).val() != '' && type.val() == 1) total += parseFloat($(this).val());
$('#totalDebit').val(total.toFixed(2));
});
}
function calculateTotalCredit() {
total = 0;
$('.totalLineAmount').each(function() {
var thisNumber = $(this).attr('id').slice(-1);
// select the type of this amount
var type = $('#type_' + thisNumber);
// add only if the type is CR (val == 2)
if ($(this).val() != '' && type.val() == 2) total += parseFloat($(this).val());
});
$('#totalCredit').val(total.toFixed(2));
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<label style="margin-bottom:3px;">Debit Amount</label><span>
<input type="text" name="total_debit" id="totalDebit"/></span>
</div>
<div>
<label>Credit Amount</label><span>
<input type="text" name="total_credit" id="totalCredit" /></span>
</div>
<table class="table-bordered table-hover">
<thead>
<tr>
<th width="2%">
<input id="check_all" type="checkbox" />
</th>
<th width="5%">Type</th>
<th width="5%">Account Code</th>
<th width="15%">Account Name</th>
<th width="10%">Fund</th>
<th width="10%">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input class="case" type="checkbox" />
</td>
<td>
<select name="account_id[]" class=" mySelect" id="type_1">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_1">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_1">
</td>
<td>
<select name="fund_id[]">
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_1" class="totalLineAmount">
</td>
</tr>
<tr>
<td>
<input class="case" type="checkbox" />
</td>
<td>
<select name="account_id[]" class=" mySelect" id="type_2">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_2">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_2">
</td>
<td>
<select name="fund_id[]">
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_2" class="totalLineAmount">
</td>
</tr>
<tr>
<td>
<input class="case" type="checkbox" />
</td>
<td>
<select name="account_id[]" class=" mySelect" id="type_3">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_3">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_3">
</td>
<td>
<select name="fund_id[]">
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_3" class="totalLineAmount">
</td>
</tr>
<tr>
<td>
<input class="case" type="checkbox" />
</td>
<td>
<select name="account_id[]" class=" mySelect" id="type_4">
<option value="000"></option>
<option value="1">DR</option>
<option value="2">CR</option>
</select>
</td>
<td>
<input type="text" name="accountCode[]" id="accountCode_4">
</td>
<td>
<input type="text" name="accountName[]" id="accountName_4">
</td>
<td>
<select name="fund_id[]">
<option></option>
</select>
</td>
<td>
<input type="text" name="amount[]" id="amount_4" class="totalLineAmount">
</td>
</tr>
</tbody>
</table>
I guess you have to update both "Debit Amount" and "Credit Amount" boxes, so you have to call both functions each time. It may be better to merge both functions into one calculateAmounts function. I'd also add event listeners to the .totalLineAmount boxes to update the totals automatically.
Try this code instead (demo):
$(function() {
function calculateTotals() {
var DRTotal = 0,
CRTotal = 0;
$('.totalLineAmount').each(function() {
var $this = $(this),
val = $this.val() || 0,
type = $this.closest('tr').find('.mySelect').val();
if (val && type === "1") {
DRTotal += parseFloat(val);
} else if (val && type === "2") {
CRTotal += parseFloat(val);
}
});
$('#totalDebit').val(DRTotal.toFixed(2));
$('#totalCredit').val(CRTotal.toFixed(2));
}
$(document).on("change", ".mySelect, .totalLineAmount", function(e) {
e.preventDefault();
calculateTotals();
});
});
In my opinion, you should add event listener on each input, calculate and put proper data into total amount in your callback function like
$('.myInputClass').on('change', function() {
// your code here..
updateAmountField(amount);
});
function updateAmountField(amount) {
$('.myTotalAmountInput').value(amount);
}

Categories