var tvalue = [];
function add_purchase(value){
if (value in tvalue) {
return 0;
}else{
tvalue.push(value);
}
var obj = document.getElementById('item');
var item = obj.options[obj.selectedIndex].text;
$('#show_item').append(' <tr class="warning" >'+
' <td class="title-text">'+
item+
' </td> '+
' <td class="title-text">'+
' <input type="hidden" value="'+value+'" name="item_id[]">'+
' </td>'+
' <td class="title-text">'+
' <input type="text" id="txt2" name="quantity[]">'+
' </td>'+
' <td class="hidden-xs"> '+
' <input type="text" name="price[]">'+
'</td>'+
' <td class="hidden-xs" > '+
'<p> the total of every caculate must be here </p>'+
' </td>'+
' </tr>');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label class="control-label col-md-3">Items
<span class="required"> * </span>
</label>
<div class="col-md-5">
<select class="form-control select2me" id="item"
onchange="add_purchase(this.value)">
<option value=""></option>
#foreach($items as $item)
<option value="{{ $item->id }}"> {{ $item->name }} </option>
#endforeach
</select>
</select>
</div>
</div>
<hr>
<table class="table table-striped table-hover">
<thead>
<tr class="active">
<th colspan="2" class="hidden-xs"> Material </th>
<th class="hidden-xs" style="width:10%">Quantity </th>
<th class="hidden-xs" style="width:10%">Price</th>
<th class="hidden-xs" style="width:10%">Total</th>
</tr>
</thead>
<tbody id="show_item">
</tbody>
<tfoot>
<tr class="success">
<th colspan="2">Total</th>
<th class="ltr" style="text-align:center"></th>
<th class="ltr" style="text-align:left">($)</th>
<th class="ltr" style="text-align:center"></th>
</tr>
</tfoot>
</table>
there is a dropdown for items that we can select as many items as want, and every item has price, quantity and total. What I want here is to make a function that makes (price * quantity) real time and put the result in total, but don't know how to write onkeyup or any method like onkeyup in the append.
Thanks in advance for your help.
Try changing this.value to $(this).val()
Related
I have the following table:
Lot Table View
I am using three ng-repeat to show the following response.
Response from backend overview
Detailed response from backend
The first ng-repeat is in <tbody> . The second ng-repeat is in <tr>. And the third one is for repeating the Lot Details, Trx Qty and Balance which is <span>.
Following is my html code:
<table id="lotTable" class="table table-striped table-bordered table-vmiddle">
<thead>
<tr>
<th>S No.</th>
<th>Lot No.</th>
<th>Lot Qty</th>
<th>Unit Cost</th>
<th>Lot Details</th>
<th>Trx Qty</th>
<th>Balance</th>
</tr>
</thead>
<tbody ng-if="isDataLot=='yes'" ng-repeat-start="l in lotData track by $index"
ng-init="parentIndex = $index" id=parentRow{{$index}}
data-id="{{l.lotNo}}">{{$index}}
<tr ng-repeat="k in l track by $index">
<td class="indextrack" >{{$index+1}}
</td>
<td class="lotNo">
<input type="hidden" class="hiddenLotNo" value="{{l.lotNo}}"/>
{{ k.lotNo }} <br>
{{k.grnNo}} ({{k.grnDate}}) <br>
{{k.inPermit}} {{k.physicalLocationName}}
</td>
<td class="lotQty">{{k.lotQty}}
</td>
<td class="cost">{{ k.unitPrice | number:4}}
</td>
<!-- Lot Details -->
<td class="lotDetails" style=" line-height: 28px; ">
<span ng-repeat="c in k.lotDetails">
<input type="hidden" class="hiddenLotDetails m-b-5"
id="lotDetails{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}"
ng-model="xxx[$index]" value="{{c}}"/>
{{c | ctnchange : c}}<br>
{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}
</span>
</td>
<!-- Transaction Quantity -->
<td class="trxQty" style="padding-top: 10px; padding-bottom: 10px;">
<span ng-repeat="c in k.lotDetails track by $index" >
<input class="trxQuantity m-b-5 text-right"
id="trx{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}"
autocomplete="off"
ng-model="trx[$parent.$index][$index]"
ng-keyup="calculateBal($parent.$index,$index); checkParentCheckbox($event);addTrxQty();"
style="width: 60px;" integers-only/><br>
</span>
</td>
<!-- Balance -->
<td class="balanceNew" style="padding-top: 10px; padding-bottom: 10px;">
<span ng-repeat="c in k.lotDetails track by $index">
<input ng-disabled="true" class="balanceNew m-b-5 text-right"
id="balNew{{$parent.$parent.$index}}{{$parent.$index}}{{$index}}"
type="text" style="width: 60px;"/>
<br>
</span>
</td>
</tr>
</tr>
</tbody>
<tbody ng-repeat-end></tbody>
I want to dynamically name the models of Lot Details, Trx Qty and Balance . I have named there ids using id="trx{{$parent.$parent.$index}}{{$parent.$index}}{{$index}} for transaction quantity. I want to achieve the same for ng-model.
I have used ng-model="trx[$parent.$index][$index]. But I have three nested ng-repeat. This is good for two nested ng-repeat. How can it be done for three ng-repeat?
Also I have to set the $scope.trx[i][j] values in controller.
What is the right way to name the model so that we can also set its value in controller?
I changed my HTML code to this :
<table id="lotTable" ng-table="tableSorting" class="table table-striped table-bordered table-vmiddle">
<thead>
<tr>
<th ng-hide="true"></th>
<th>S No.</th>
<th>Lot No.</th>
<th>Lot Qty</th>
<th>Unit Cost</th>
<th>Lot Details</th>
<th>Trx Qty</th>
<th ng-hide="true">Balance</th>
<th>Balance</th>
</tr>
</thead>
<tbody ng-if="isDataLot=='yes'" ng-repeat-start="l in lotData track by $index" ng-init="parentIndex = $index" id=parentRow{{$index}} data-id="{{l.lotNo}}">
<tr ng-repeat="k in l track by $index" ng-init="lotDataChildIndex = $index">
<td header-class="'text-center'" ng-hide="true">
<div class="checkbox">
<label>
<input type="checkbox" class="checkhead" id="lotHiddenCheckbox{{parentIndex}}{{lotDataChildIndex}}">
<em class="input-helper"></em>
</label>
</div>
</td>
<td class="indextrack" >{{$index+1}}
<input type="hidden" class="hiddenalcoholPer" value="{{k.alcoholPer}}" />
<input type="hidden" class="hiddencascCode" value="{{k.cascCode}}" />
<input type="hidden" class="hiddencreditorCode" value="{{k.creditorCode}}" />
<input type="hidden" class="hiddencreditorName" value="{{k.creditorName}}" />
<input type="hidden" class="hiddencustomAmnt" value="{{k.customAmnt}}" />
<input type="hidden" class="hiddenduty" value="{{k.duty}}" />
<input type="hidden" class="hiddendutyPaid" value="{{k.dutyPaid}}" />
<input type="hidden" class="hiddenhsCode" value="{{k.hsCode}}" />
<input type="hidden" class="hiddenidUom" value="{{k.idUom}}" />
<input type="hidden" class="hiddenunitPrice" value="{{k.unitPrice}}" />
<input type="hidden" class="hiddenuomCode" value="{{k.uomCode}}" />
<input type="hidden" class="hiddenidGrnforLot" value="{{k.idGrn}}" />
<input type="hidden" class="hiddenidPhysicalLocation" value="{{k.idPhysicalLocation}}" />
</td>
<td class="lotNo">
<input type="hidden" class="hiddenLotNo" value="{{k.lotNo}}"/>
{{ k.lotNo }} <br>
{{k.grnNo}} ({{k.grnDate}}) <br>
{{k.inPermit}} {{k.physicalLocationName}}
</td>
<td class="lotQty">
<input type="hidden" class="hiddenLotQty" value="{{k.lotQty}}" />{{k.lotQty}}
</td>
<td class="cost"><input type="hidden" class="hiddencost" value="{{k.unitPrice}}" />{{ k.unitPrice | number:4}}
</td>
<td class="lotDetails" style=" line-height: 28px; ">
<span ng-repeat="c in k.lotDetails" ng-init="lotDetailsIndex = $index;">
<input type="hidden" class="hiddenLotDetails m-b-5" id="lotDetails{{parentIndex}}{{lotDataChildIndex}}{{lotDetailsIndex}}" value="{{c}}"/>{{c | ctnchange : c}}<br>
</span>
</td>
<td class="trxQty p-t-10 p-b-10">
<span ng-repeat="c in k.lotDetails track by $index" ng-init="trxQtyIndex = $index;">
<!-- lotDetailsValues Hidden field -->
<input type="hidden" class="lotDetailsValues"
id="lotDetailsValues{{parentIndex}}{{lotDataChildIndex}}{{trxQtyIndex}}"
ng-model="lotDetailsValues[parentIndex + '' + lotDataChildIndex + '' + $index]" ng-init="(lotDetailsValues[parentIndex + '' + lotDataChildIndex + '' + $index]) = k.lotDetailsValues[$index];"
value="{{k.lotDetailsValues[$index]}}" />
<!-- Transaction Quantity -->
<input class="trxQuantity m-b-5 text-right"
id="trx{{parentIndex}}{{lotDataChildIndex}}{{trxQtyIndex}}"
autocomplete="off"
ng-model="trx[parentIndex + '' + lotDataChildIndex + '' + trxQtyIndex]"
ng-keyup="calculateBalanceTxtQty(parentIndex,lotDataChildIndex,trxQtyIndex);
checkParentCheckbox($event,parentIndex,lotDataChildIndex);addTrxQty();"
style="width: 60px;" integers-only/><br>
</span>
</td>
<!-- BALANCE AMOUNT HIDDEN -->
<td class="balance p-t-10 p-b-10" ng-hide="true">
<span ng-repeat="c in k.lotDetails track by $index" ng-init="balanceIndex = $index;">
<input ng-disabled="true"
class="balanceAmt m-b-5"
id="balAmt{{parentIndex}}{{lotDataChildIndex}}{{balanceIndex}}"
type="text"
ng-model="balAmt[parentIndex + '' + lotDataChildIndex + '' + balanceNewIndex]"/><br>
</span>
</td>
<!-- BALANCE NEW AFTER CALCULATION -->
<td class="balanceNew p-t-10 p-b-10">
<span ng-repeat="c in k.lotDetails track by $index" ng-init="balanceNewIndex = $index;">
<input type="text" style="width: 60px;"
ng-model="balNew[parentIndex + '' + lotDataChildIndex + '' + balanceNewIndex]"
ng-disabled="true"
class="balanceNew m-b-5 text-right"
id="balNew{{parentIndex}}{{lotDataChildIndex}}{{balanceNewIndex}}"/>
<br>
</span>
</td>
</tr>
</tbody>
<tbody ng-repeat-end></tbody>
<tbody>
<tr ng-if="isDataLot=='no'" class="no_records"><td colspan="8">No Record(s) found.</td></tr>
<tr ng-if="isDataLot=='yes'" >
<td></td>
<td></td>
<td></td>
<td></td>
<td class="text-right">
<strong>Total:</strong>
</td>
<td class="text-right p-r-12">{{(addedTrxQty > 0) ? addedTrxQty : ''}}</td>
<td class="text-right p-r-12">{{(totalTrxValBal > 0) ? totalTrxValBal : ''}}</td>
</tr>
</tbody>
</table>
In order to get it in controller I used the following code:
var quantity = $scope.lotDetailsValues[parentIndex+ '' +childIndex+ '' +index];
If you are looking for Angular 7 version:
<div class="row" [ngClass]="index != 0 ? 'backgroundColor' : ''"
*ngFor="let t of edu.test_scores;trackBy: trackByItems;let si = index">
<!-- Test Score Value -->
<div class="col-md-3">
<div class="form-group">
<label class="alumni-label">Test Score</label>
<ng-select class="custom" name="test_scores_{{index}}_{{si}}" #test_scores[si]="ngModel" [(ngModel)]="t.id"
[items]="test_list" bindValue="id" placeholder="Select Score" bindLabel="name" notFoundText="No results found."
(change)="checkTest(index,$event)" (clear)="t.marks= null;t.marks_out_of=null;"></ng-select>
</div>
</div>
</div>
This was working fine before without the <select> and <option> drop-downs...
but trying to add a drop-down menu to this, it is functioning improperly (see the fiddle or more details below). Not seeing any errors popping up in console.
JSFiddle (Working): https://jsfiddle.net/zxqrpLvo/
JSFiddle (Not Working*): https://jsfiddle.net/a2a4584z/1/
Working (without Select Drop-Down):
HTML
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6" id="inputform">
<form id="inventorytoadd">
<table class="table table-striped table-responsive table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center" width="10%">
#
</th>
<th class="text-center" width="68%">
SKU
</th>
<th class="text-center" width="22%">
Quantity
</th>
</tr>
</thead>
<tbody>
<tr id='addi0'>
<td class="text-center numcell" width="10%">
1
</td>
<td width="68%">
<input type="text" name='sku[]' id="sku0" placeholder='SKU' class="form-control"/>
</td>
<td width="22%">
<input type="text" name='qty[]' id="qty0" placeholder='Quantity' class="form-control"/>
</td>
</tr>
<tr id='addi1'></tr>
</tbody>
</table>
</form>
</div>
<div class="col-md-3">
</div>
</div>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6 add-delete-rows" id="inventory-add">
<button id="add_row" class="btn btn-primary pull-left">Add Row</button><button id='delete_row' class="pull-right btn btn-danger">Delete Row</button>
</div>
<div class="col-md-3">
</div>
</div>
Along with accompanying jquery code
jQuery/Javascript
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addi' + i).html("<td class='text-center numcell'>" + (i + 1) + "</td><td><input name='sku[]' type='text' placeholder='SKU' class='form-control input-md' /> </td><td><input name='qty[]' type='text' placeholder='Quantity' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addi' + (i + 1) + '"></tr>');
i++;
});
$("#delete_row").click(function() {
if (i > 1) {
$("#addi" + (i - 1)).html('');
i--;
}
});
});
Not Working with Select Drop-Down
HTML
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-10" id="inputform">
<form id="inventorytoadd">
<table class="table table-striped table-responsive table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
SKU
</th>
<th class="text-center">
Category
</th>
<th class="text-center">
Quantity
</th>
</tr>
</thead>
<tbody>
<tr id='addi0'>
<td class="text-center numcell">
1
</td>
<td>
<input type="text" name='sku[]' id="sku0" placeholder='SKU' class="form-control"/>
</td>
<td>
<div class="select">
<select name="category[]">
<option title="Gaskets" value="Gaskets">Gaskets</option>
<option title="Oil Filters" value="Oil Filters">Oil Filters</option>
<option title="Air Filters" value="Air Filters">Air Filters</option>
</select>
</div>
</td>
<td>
<input type="text" name='qty[]' id="qty0" placeholder='Quantity' class="form-control"/>
</td>
</tr>
<tr id='addi1'></tr>
</tbody>
</table>
</form>
</div>
<div class="col-md-1">
</div>
</div>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6 add-delete-rows" id="inventory-add">
<button id="add_row" class="btn btn-primary">Add Row</button><button id='delete_row' class="btn btn-danger">Delete Row</button>
</div>
<div class="col-md-3">
</div>
</div>
jQuery/Javascript
$(document).ready(function() {
var i = 1;
$('#add_row').click(function() {
$('#addi' + i).html('<td class="text-center numcell">' + (i + 1) + '</td><td><input name="sku[]" type="text" placeholder="SKU" class="form-control input-md" /></td><td><div class="select"><select name="category[]"><option title="Gaskets" value="Gaskets">Gaskets</option><option title="Oil Filters" value="Oil Filters">Oil Filters</option><option title="Air Filters" value="Air Filters">Air Filters</option></select></div></td><td><input name="qty[]" type="text" placeholder="Quantity" class="form-control input-md"></td>');
$('tab_logic').append('<tr id="addi' + (i + 1) + '"></tr>');
i++;
});
$('#delete_row').click(function() {
if (i > 1) {
$('#addi' + (i - 1)).html("");
i--;
}
});
});
As you can see by the fiddle, it is only allowing me to add a row once.. and for some reason it takes two clicks to delete a row. It appears to be identical code functionality from what I can see, what is the issue here?
you miss "#" on your selector: $('#tab_logic')
$(document).ready(function() {
var i = 1;
$('#add_row').click(function() {
$('#addi' + i).html('<td class="text-center numcell">' + (i + 1) + '</td><td><input name="sku[]" type="text" placeholder="SKU" class="form-control input-md" /></td><td><div class="select"><select name="category[]"><option title="Gaskets" value="Gaskets">Gaskets</option><option title="Oil Filters" value="Oil Filters">Oil Filters</option><option title="Air Filters" value="Air Filters">Air Filters</option></select></div></td><td><input name="qty[]" type="text" placeholder="Quantity" class="form-control input-md"></td>');
$('#tab_logic').append('<tr id="addi' + (i + 1) + '"></tr>');
i++;
});
$('#delete_row').click(function() {
if (i > 1) {
$('#addi' + (i - 1)).html("");
i--;
}
});
});
I need to add the items from simpleCart to a form. I can't find any built-in functions that will do this so I'm trying to create my own script.
On the checkout page simpleCart adds the items like this:
<div class="simpleCart_items">
<table>
<thead>
<tr class="headerRow">
<th class="item-name">Name</th>
<th class="item-price">Price</th>
<th class="item-size">Size</th>
<th class="item-color">Color</th>
<th class="item-decrement"></th>
<th class="item-quantity">Qty</th>
<th class="item-increment"></th>
<th class="item-total">SubTotal</th>
<th class="item-remove"></th>
</tr>
</thead>
<tbody>
<tr class="itemRow row-0 odd" id="cartItem_SCI-1">
<td class="item-name">Deer Shirt</td>
<td class="item-price">฿400.00</td>
<td class="item-size">Small</td>
<td class="item-color">Blue</td>
<td class="item-decrement">-</td>
<td class="item-quantity">2</td>
<td class="item-increment">+</td>
<td class="item-total">฿800.00</td>
<td class="item-remove">Remove</td>
</tr>
<tr class="itemRow row-1 even" id="cartItem_SCI-2">
<td class="item-name">Deer Shirt</td>
<td class="item-price">฿400.00</td>
<td class="item-size">Medium</td>
<td class="item-color">Clay</td>
<td class="item-decrement">-</td>
<td class="item-quantity">1</td>
<td class="item-increment">+</td>
<td class="item-total">฿400.00</td>
<td class="item-remove">Remove</td>
</tr>
</tbody>
</table>
</div>
On that same checkout page I have a form where the customer adds their name, mailing address, etc. I'd like to add each item above as an input to the form like this:
<input type="hidden" name="Item 1" value="Deer Shirt">
...
It seemed using jQuery's .each would work, but it's not producing the desired result.
This is what I've got now:
simpleCart.ready(function() {
$('.itemRow').each(function(){
$('form').append('<input type="hidden" name="' + $('.itemRow').attr('id') + '" value="' + $('.item-name').text() + '">');
$('form').append('<input type="hidden" name="' + $('.itemRow').attr('id') + '" value="' + $('.item-color').text() + '">');
});
});
Expected output:
<input type="hidden" name="cartItem_SCI-1" value="Deer Shirt">
<input type="hidden" name="cartItem_SCI-1" value="Blue">
<input type="hidden" name="cartItem_SCI-2" value="Deer Shirt">
<input type="hidden" name="cartItem_SCI-2" value="Clay">
Actual output:
<input type="hidden" name="cartItem_SCI-1" value="NameDeer ShirtDeer Shirt">
<input type="hidden" name="cartItem_SCI-1" value="ColorBlueClay">
<input type="hidden" name="cartItem_SCI-1" value="NameDeer ShirtDeer Shirt">
<input type="hidden" name="cartItem_SCI-1" value="ColorBlueClay">
Maybe .each isn't the best way. Any ideas on how to get the expected output?
First error is here
$('.itemRow').each(function(){
$('form').append('<input type="hidden" name="' + $(this).attr('id') + '" value="' + $(this).find('.item-name').text() + '">');
$('form').append('<input type="hidden" name="' + $(this).attr('id') + '" value="' + $(this).find('.item-color').text() + '">');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="simpleCart_items">
<table>
<thead>
<tr class="headerRow">
<th class="item-name">Name</th>
<th class="item-price">Price</th>
<th class="item-size">Size</th>
<th class="item-color">Color</th>
<th class="item-decrement"></th>
<th class="item-quantity">Qty</th>
<th class="item-increment"></th>
<th class="item-total">SubTotal</th>
<th class="item-remove"></th>
</tr>
</thead>
<tbody>
<tr class="itemRow row-0 odd" id="cartItem_SCI-1">
<td class="item-name">Deer Shirt</td>
<td class="item-price">฿400.00</td>
<td class="item-size">Small</td>
<td class="item-color">Blue</td>
<td class="item-decrement">-</td>
<td class="item-quantity">2</td>
<td class="item-increment">+</td>
<td class="item-total">฿800.00</td>
<td class="item-remove">Remove</td>
</tr>
<tr class="itemRow row-1 even" id="cartItem_SCI-2">
<td class="item-name">Deer Shirt</td>
<td class="item-price">฿400.00</td>
<td class="item-size">Medium</td>
<td class="item-color">Clay</td>
<td class="item-decrement">-</td>
<td class="item-quantity">1</td>
<td class="item-increment">+</td>
<td class="item-total">฿400.00</td>
<td class="item-remove">Remove</td>
</tr>
</tbody>
</table>
</div>
<form></form>
And as for me same hidden input name for color and name is error
Pavlo's answer above is correct per the way I asked the original question but due to xDreamCoding's comment I did some digging and found that simpleCart has it's own .each operator. In the end I'm able to get what I need with this:
simpleCart.each(function( item , x ){
$('form').append('<input type="hidden" name="' + item.get('id') + ' Name" value="' + item.get('name') + '">');
$('form').append('<input type="hidden" name="' + item.get('id') + ' Color" value="' + item.get('color') + '">');
});
I think I got problem with js and html (bootstrap),
I got these snippet from bootsnip and try to modified it for need of my job.
but on the third lines, sorry for typo or bad using english.
the bootsnip here (my modification) : http://bootsnipp.com/snippets/o8r0G
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><select class='form-control' name='slct"+i+"' placeholder='Select'><option value='1'>1</option><option value='2'>2</option></select></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
$('.buttonx').click(function() {
var total = 0;
$('#tab_logic tbody tr').each(function(index) {
var price = parseInt($(this).find('.optx sltx option value').text());
var quantity = parseInt($(this).find('.optx sltx option').val());
var value = $(this).find('.value');
var subTotal = price * quantity;
value.text(subTotal);
value.text(price);
total = total + subTotal;
testotal = price;
});
$('.totality').text('Total : '+testotal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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 >
<th class="text-center">
#
</th>
<th class="text-center">
Value1
</th>
<th class="text-center">
Value2
</th>
<th class="text-center">
Select
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input type="text" name='va10' placeholder='Val1' class="form-control"/>
</td>
<td>
<input type="text" name='va20' placeholder='Val2' class="form-control"/>
</td>
<td class="optx">
<select class="form-control sltx" name="slct0" placeholder="Select"><option value="1">1</option><option value="2">2</option></select>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th><a id="buttonx" class="btn btn-default btn-danger pull-right">Calculate</a></th>
<th id="totality" style="vertical-align: middle;">Total : </th>
</tr>
</tfoot>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
I'm trying to create the total from the table but I can't load the value from table with js, maybe I got wrong on the script which I got from other answer on stack. Reference is here : getting values from a html table via javascript/jquery and doing a calculation
I want to ask, how can I got the calculation from select option on table, alternatively from input textbox and without I push the button (real time calculation).
Thanks before.
Well, as per my understand-ability, you need a real time calculator, which calculate value as user entering and leave any textbox or change the select without using the calculate button.
In your code there are some error, I have built and change some of your function to implement the real time calculator. calculation formula is different because I am not able to understand how you are going to calculate. I am implementing it using the class selector of the element and fetching the value with the use of this.
Here is the updated code which is using both, on click button and also real time calculator.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<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 >
<th class="text-center">
#
</th>
<th class="text-center">
Value1
</th>
<th class="text-center">
Value2
</th>
<th class="text-center">
Select
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input type="text" name='va10' placeholder='Val1' class="form-control va10"/>
</td>
<td>
<input type="text" name='va20' placeholder='Val2' class="form-control va20"/>
</td>
<td class="optx">
<select class="form-control sltx slct0" name="slct0" placeholder="Select"><option value="1">1</option><option value="2">2</option></select>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th></th>
<th><a id="buttonx" class="btn btn-default btn-danger pull-right">Calculate</a></th>
<th id="totality" style="vertical-align: middle;">Total : </th>
</tr>
</tfoot>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
<script type="text/javascript">
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#tab_logic').append("<tr id='addr"+i+"'><td>"+ (i+1) +"</td><td><input name='name'"+i+" type='text' class='form-control va10' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail'"+i+"' type='text' placeholder='Mail' class='va20 form-control input-md'></td><td><select class='form-control slct0' name='slct'"+i+" placeholder='Select'><option value='1'>1</option><option value='2'>2</option></select></td></tr");
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
function calculator(){
var total = 0;
$('#tab_logic tbody tr').each(function(index) {
var val1 = $(this).find('.va10').val().length==0?0:parseInt($(this).find('.va10').val());
var val2 = $(this).find('.va20').val().length==0?0:parseInt($(this).find('.va20').val());
var select = $(this).find('.slct0').val().length==0?0:parseInt($(this).find('.slct0').val());
var subTotal = (val1 + val2)*select;
total+=subTotal;
});
$('#totality').text(total);
}
$('#tab_logic').on('blur change','.va10,.va20,.slct0',function(){
calculator()
})
$('#buttonx').click(function() {
calculator();
});
</script>
I am trying to do Sum on oninput method. Means as the button press the function will be called and show sum of two input in a paragraph <p> tag.
I have my javascript function like this:
quote:function(){
var button = document.getElementById('insert');
var table = document.getElementById('table');
$("#insert").click(function(){
var position=Math.round(table.rows.length - 3);
var row = table.insertRow(position);
var i=1;
row.innerHTML = '<td><input type="integer" name="qty[]" class="form-control" id="qty_' +position +'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discription[]" class="form-control"></td><td><input type="text" name="price[]" class="form-control" placeholder="0.00" id="price_'+ position+'" oninput="myFunction(demo'+position+', event)"></td><td><input type="text" name="discount[]" class="form-control" placeholder="0.00"><td><input type="text" name="discountper[]" class="form-control" placeholder="0.00%"></td></td><td><p id="demo'+position+'"></p></td><td><input type="checkbox" name="taxed[]" class="form-control"></td> <td><a class="btn btn-circle red-haze btn-sm" href="javascript:void(0);" id="remCF"><i class="fa fa-times"></i></a></td>';
$("#remCF").live('click',function(){
$(this).parent().parent().remove();
});
});
},
After append it looks like this.
I would like to calculate Total Amount using quantity * price.
But i am not able to do that. It seems like Rows are appending fine. But when i try to call the function i am unable to specify the text are in the myFunction.
here is how myFuntion looks like:
function myFunction(place, event) {
var x =parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what QTY is clicked and which input is clicked -->
var y= parseInt(document.getElementById(event.target.id).value); <!----now the problem is here i am not able to specify what PRICE is clicked and which input is clicked -->
var z=x*y;
document.getElementById(place).innerHTML = z;
}
I would like to perform calculation row wise.
And if for reference if you want to know how my HTML looks then here is how it looks like.
<table class="table table-striped table-bordered table-hover" id="sample_3">
<thead>
<tr>
<th style="width:7%;">
Qty
</th>
<th style="width:50%;">
Description
</th>
<th style="width:10%;">
Unit Price
</th>
<th style="width:10%;">
Discount(Rs/$)
</th>
<th style="width:10%;">
Discount%
</th>
<th style="width:7%;">
Total
</th>
<th style="width:2%;">
Taxed
</th>
<th style="width:2%;">
Action
</th>
</tr>
</thead>
<tbody id="table">
<tr class="odd gradeX" id="p_scents" name="p_scnt">
<td>
<input type="integer" name="qty[]" class="form-control" value="1" id="myInput1" oninput="myFunction('demo', event)" >
</td>
<td>
<input type="text" name="discription[]" class="form-control">
</td>
<td>
<input type="text" name="price[]" class="form-control" placeholder="0.00" id="myInput2" oninput="myFunction('demo', event)">
</td>
<td>
<input type="text" name="discount[]" class="form-control" placeholder="0.00">
</td>
<td>
<input type="text" name="discountper[]" class="form-control" placeholder="0.00%">
</td>
<td>
<p id="demo"></p>
</td>
<td>
<div align="center"><input type="checkbox" name="taxed[]" class="form-control"></div>
</td>
<td></td>
</tr><!-- to add new column -->
<tr>
<td colspan="4" >
<div align="right">
<b>Sub Total:</b>
</div>
</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="6" >
<a id="insert">Add a New Service</a><br>
<a id="ajax-demo" data-toggle="modal">
Predifined Services </a><td>
</tr>
</tbody>
</table>
here is the Jsfiddle link:
https://jsfiddle.net/5xaaneor/2/
Thank you!