Sum values Javascript - javascript

Here http://webmark.pt/sharepics/orders.png is the sales order layout (./sharepics/add.zip the full code) that I need to customize.
Problem:
Dynamically sum the cells between size 39 and 50, and put the value in the Pairs (quantity).
Already managed to add the lines, but the result is added to the lines immediately below.
The code that does this operation:
var newTr = $('<tr id="row_' + count + '"></tr>');
newTr.html('<td><input name="product' + count + '" type="hidden" value="' + item_code + '"><input class="span5 tran" name="item' + count + '" type="text" value="' + item_code + '"></td>
.......
<td><input class="input-block-level text-center" name="sort' + count + '" type="text" value="" id="sort-' + count + '" onClick="this.select();"></td>
<td><input class="input-block-level text-center" name="size39' + count + '" type="text" value="" id="size39-' + count + '" onClick="this.select();"></td>
......
<td><input class="input-block-level text-center" name="size50' + count + '" type="text" value="" id="size50-' + count + '" onClick="this.select();"></td>
<td><input class="input-block-level text-center" name="quantity' + count + '" type="text" value="1" id="quantity-' + count + '" onClick="this.select();"></td>
<td><input class="span2 tran" style="text-align:right;" name="unit_price' + count + '" type="text" id="price-' + count + '" value="' + item_price + '"></td>
<?php echo '<td><input class="span2 tran2" name="cart\'+ count +\'" type="text" value="" required="required" data-error="' . $this->lang->line("cart") . ' ' . $this->lang->line("is_required") . '"></td>';
if (DISCOUNT_OPTION == 2) {
echo '<td><select class="span2 select tran" data-placeholder="Select..." name="discount\' + count + \'" id="discount-\' + count + \'">';
foreach ($discounts as $discount) {
echo "<option value=" . $discount->id;
if ($discount->id == DEFAULT_DISCOUNT) {
echo ' selected="selected"';
}
echo ">" . $discount->name . "</option>";
}
echo '</select></td>';
}
?>
<td><input class="input-block-level text-center" name="subtotalpares' + count + '" type="text" value="" id="subtotalpares" disabled onClick="this.select();"></td>
<td><i class="icon-trash tip del" id="' + count + '" title="Remove this Item" style="cursor:pointer;" data-placement="right"></i></td>');
newTr.prependTo("#dyTable");
count++;
an++;
total += parseFloat(item_price);
$("input[id^=size]").keyup(function () {
var sum = 0;
$("input[id^=size]").each(function () {
sum += (parseInt(this.value) ? parseInt(this.value) : 1);
});
$("input[id^=quantity]").val(sum);
});
I look forward to some help!

Related

Chrome crashes when printing 2000+ entries on ajax call / Page unresponsive in Chrome

facing an issue when printing more than 2000 entry lines on ajax call. The list of entries may be up to 10000 but when my ajax function calls, all data come but browse shows Page unresponsive when prints.
I have Javascript function to generate invoice lines but when generate and print It shows unresponsive alert.
Here is my javascript code
var contentBody = '';
for (var i = 0; i < data.length; i++) {
var applyToInvoice = (data[i].apply_to_invoice == null)?"":data[i].apply_to_invoice;
var referenceNo = (data[i].reference_no == null)?"":data[i].reference_no;
var referenceNo2 = (data[i].reference_no2 == null)?"":data[i].reference_no2;
var currentBalance = (data[i].invoice_type !='Invoice' && data[i].invoice_type !='Debit Note')? -data[i].current_balance : data[i].current_balance;
var appliedAmount = (data[i].invoice_type !='Invoice' && data[i].invoice_type !='Debit Note')? -data[i].applied_amount : data[i].applied_amount;
var netBalance = (data[i].invoice_type !='Invoice' && data[i].invoice_type !='Debit Note')? -data[i].net_balance : data[i].net_balance;
contentBody = '<tr>' +
'<td><input class="form-check-input form-switch apply-amount" type="checkbox" name="receiptEntryDetailsList[' + i + '].apply" onclick=applyAmount(this) checked></td>' +
'<td class="index-number" id="indexNumber"><input class="receipt-details-id" type="hidden" name="receiptEntryDetailsList[' + i + '].id" value="' + data[i].receipt_entry_details_id + '"></td>' +
'<td><input type="text" class="frm-cntrl invoice-type" name="receiptEntryDetailsList[' + i + '].invoiceType" value="' + data[i].invoice_type + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].invoiceNo" value="' + data[i].invoice_no + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input type="text" class="frm-cntrl invoice-date" name="receiptEntryDetailsList[' + i + '].invoiceDate" value="' + data[i].invoice_date + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].referenceNo" value="' + referenceNo + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].referenceNo2" value="' + referenceNo2 + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input style="text-align:right;" type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].currentBalance" value="' + currentBalance + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input style="text-align:right;" type="text" class="frm-cntrl applied-amount balance-calculate" name="receiptEntryDetailsList[' + i + '].appliedAmount" value="' + appliedAmount + '" onkeyup="calculation(this)" onClick="this.select();"></td>' +
'<td><input style="text-align:right;" type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].netBalance" value="' + netBalance + '" readonly="readonly" tabindex="-1"></td>' +
'<td><input type="text" class="frm-cntrl" name="receiptEntryDetailsList[' + i + '].applyToInvoice" value="' + applyToInvoice + '" readonly="readonly" tabindex="-1"></td>' +
'</tr>'
$('#table2 tbody').append(contentBody);
}

Javascript calculation (Products sum without Vat)

Hello I have a problem with some calculation in javascript(see image)
The cell that is with red border calculate product price sum with vat.
What im trying to do but didnt success is to calculate product price sum WITHOUT VAT(the cell with red broder should be 2000 not 2200)
Here is the code that im using,
var row_no = (new Date).getTime();
var newTr = $('<tr id="row_' + row_no + '" class="row_' + item_id + '" data-item-id="' + item_id + '"></tr>');
tr_html = '<td><input name="product_id[]" type="hidden" class="rid" value="' + product_id + '"><input name="product[]" type="hidden" class="rcode" value="' + item_code + '"><input name="product_name[]" type="hidden" class="rname" value="' + item_name + '"><input name="product_option[]" type="hidden" class="roption" value="' + item_option + '"><input name="part_no[]" type="hidden" class="rpart_no" value="' + item_supplier_part_no + '"><span class="sname" id="name_' + row_no + '">' + item_code +' - '+ item_name +(sel_opt != '' ? ' ('+sel_opt+')' : '')+' <span class="label label-default">'+item_supplier_part_no+'</span></span> <i class="pull-right fa fa-edit tip edit" id="' + row_no + '" data-item="' + item_id + '" title="Edit" style="cursor:pointer;"></i></td>';
if (site.settings.product_expiry == 1) {
tr_html += '<td><input class="form-control date rexpiry" name="expiry[]" type="text" value="' + item_expiry + '" data-id="' + row_no + '" data-item="' + item_id + '" id="expiry_' + row_no + '"></td>';
}
tr_html += '<td class="text-right"><input class="form-control input-sm text-right rcost" name="net_cost[]" type="hidden" id="cost_' + row_no + '" value="' + item_cost + '"><input class="rucost" name="unit_cost[]" type="hidden" value="' + unit_cost + '"><input class="realucost" name="real_unit_cost[]" type="hidden" value="' + item.row.real_unit_cost + '"><span class="text-right scost" id="scost_' + row_no + '">' + formatMoney(item_cost) + '</span></td>';
tr_html += '<td><input name="quantity_balance[]" type="hidden" class="rbqty" value="' + item_bqty + '"><input class="form-control text-center rquantity" name="quantity[]" type="text" tabindex="'+((site.settings.set_focus == 1) ? an : (an+1))+'" value="' + formatQuantity2(item_qty) + '" data-id="' + row_no + '" data-item="' + item_id + '" id="quantity_' + row_no + '" onClick="this.select();"><input name="product_unit[]" type="hidden" class="runit" value="' + product_unit + '"><input name="product_base_quantity[]" type="hidden" class="rbase_quantity" value="' + base_quantity + '"></td>';
if (po_edit) {
tr_html += '<td class="rec_con"><input name="ordered_quantity[]" type="hidden" class="oqty" value="' + item_oqty + '"><input class="form-control text-center received" name="received[]" type="text" value="' + formatDecimal(unit_qty_received) + '" data-id="' + row_no + '" data-item="' + item_id + '" id="received_' + row_no + '" onClick="this.select();"><input name="received_base_quantity[]" type="hidden" class="rrbase_quantity" value="' + qty_received + '"></td>';
}
if (site.settings.product_discount == 1) {
tr_html += '<td class="text-right"><input class="form-control input-sm rdiscount" name="product_discount[]" type="hidden" id="discount_' + row_no + '" value="' + item_ds + '"><span class="text-right sdiscount text-danger" id="sdiscount_' + row_no + '">' + formatMoney(0 - (item_discount * item_qty)) + '</span></td>';
}
tr_html += '<td class="text-right"><span class="text-right ssubtotal" id="subtotal_' + row_no + '">' + formatMoney((parseFloat(item_cost) * parseFloat(item_qty))) + '</span></td>';
if (site.settings.tax1 == 1) {
tr_html += '<td class="text-right"><input class="form-control input-sm text-right rproduct_tax" name="product_tax[]" type="hidden" id="product_tax_' + row_no + '" value="' + pr_tax.id + '"><span class="text-right sproduct_tax" id="sproduct_tax_' + row_no + '">' + (pr_tax_rate ? '(' + pr_tax_rate + ')' : '') + ' ' + formatMoney(pr_tax_val * item_qty) + '</span></td>';
}
tr_html += '<td class="text-right"><span class="text-right ssubtotal" id="subtotal_' + row_no + '">' + formatMoney(((parseFloat(item_cost) + parseFloat(pr_tax_val)) * parseFloat(item_qty))) + '</span></td>';
tr_html += '<td class="text-center"><i class="fa fa-times tip podel" id="' + row_no + '" title="Remove" style="cursor:pointer;"></i></td>';
newTr.html(tr_html);
newTr.prependTo("#poTable");
total += formatDecimal(((parseFloat(item_cost) + parseFloat(pr_tax_val)) * parseFloat(item_qty)), 4);
count += parseFloat(item_qty);
an++;
if(!belong)
$('#row_' + row_no).addClass('warning');
});
var col = 2;
if (site.settings.product_expiry == 1) { col++; }
var tfoot = '<tr id="tfoot" class="tfoot active"><th colspan="'+col+'">Total</th><th class="text-center">' + formatQty(parseFloat(count) - 1) + '</th>';
if (po_edit) {
tfoot += '<th class="rec_con"></th>';
}
if (site.settings.product_discount == 1) {
tfoot += '<th class="text-right">'+formatMoney(product_discount)+'</th>';
}
tfoot += '<th class="text-right">'+formatMoney(total)+'</th>';
if (site.settings.tax1 == 1) {
tfoot += '<th class="text-right">'+formatMoney(product_tax)+'</th>';
}
tfoot += '<th class="text-right">'+formatMoney(total)+'</th><th class="text-center"><i class="fa fa-trash-o" style="opacity:0.5; filter:alpha(opacity=50);"></i></th></tr>';
$('#poTable tfoot').html(tfoot);
You set the total which you display right here:
total += formatDecimal(((parseFloat(item_cost) + parseFloat(pr_tax_val)) * parseFloat(item_qty)), 4);
For you to display a price without vat you need another variable for it
var totalNoVAT = 0;
and in the loop:
totalNoVAT += formatDecimal((parseFloat(item_cost) * parseFloat(item_qty)), 4);
and finally display it by changing this:
tfoot += '<th class="text-right">'+formatMoney(total)+'</th>';
to this:
tfoot += '<th class="text-right">'+formatMoney(totalNoVAT)+'</th>';

js tablesort not sorting with table that has values with dynamic cont

I have a PHP file that calls a JS file. The PHP has two tables that use the table sorter plugin, one works and one doesn't. The one that works comes straight from an Ajax call, the one that doesn't is populated with information from the same Ajax call as well as some js var. I am able to sort by columns that are filled by Ajax return, but I am unable to sort by the 4 columns (Code, QtyOrder, $, Comments) which are filled by JS variable values and are editable. I am using PHP 5.3.24 and jqueryui/1.10.0, is it possible to sort by editable and js filled columns and if so how?
thanks
$(document).ready(function() {
$('#loading').hide();
$("#guides").tablesorter();
$("#inv").tablesorter();
function populate(cnt) {
$("#cheggNote").hide();
$("#getting").hide();
$("#getting").hide();
$("#getting2").hide();
$("#getting3").hide();
$("#getting4").hide();
$("#guides tbody").remove();
$("#inv tbody").remove();
$("#detailSales tbody").remove();
$("#detailSales2 tbody").remove();
var po = $('#po').val();
$.ajax({
type: "POST",
url: "poInfo2.php",
//async:false,
dataType: "json",
data: ({
po: po,
filter: $('#filter').val(),
cnt: cnt,
end: $('#end').html()
}),
success: function(data) {
var isbn = data.isbn;
$("#qtyA").val(data.qty);
$("#price").val(data.price);
$("#priceOffered").val(data.pr_off);
$("#title").val(data.title);
$("#isbn10").val(data.isbn10);
$("#publisher").val(data.Publisher);
$("#copy").val(data.Copyright);
$("#weight").val(data.Weight);
$("#isbn13").val(data.isbn);
$("#list").val(data.list);
$("#AmzLow").val(data.AmzLow);
$("#AmzNewPrice").val(data.AmzNew);
$("#Rank").val(data.Rank);
$("#source").val(data.source);
$("#end").html(data.pages);
$("#start").html(cnt + 1);
if (data.isbn == null) {
$("#guides").append('<tr><td>No Records Found</td></tr>');
$("#inv").append('<tr><td>No Records Found</td></tr>');
} else {
for (var x = 0; x < data.PurPO.length; x++) {
$("#inv").append('<tr><td id=tableDATE>' + data.PurDate[x] + '</td><td id=tablePO>' + data.PurPO[x] +
'</td><td id=tableQtyOrdered>' + data.PurQty[x] + '</td><td id=tablePrice>' + data.PurPrice[x] + '</td></tr>');
}
$("#inv").trigger("update");
$("#guides").append('<tr><td>' + data.AMGprice + '</td><td>Amtext</td><td><input type="text" class="qty" id="ACode" value="' + data.ACode +
'"</td><td><input type="text" class="qty" id="AQty" value="' + data.AQty +
'"</td><td id="ANewPricemarg">' + ANewPricemarg + '</td><td><input type="text" class="qty" id="ANewPrice" value="' + data.ANewPrice +
'"</td><td><input type="text" class="qty" id="Acomments" value="' + data.Acomments +
'"/></td><td class="price">' + data.Atitle +
'</td></tr><tr><td>' + data.FGnew + '</td><td>Follett N</td><td><input type="text" class="qty" id="FNewCode" value="' + data.FNewCode +
'"</td><td><input type="text" class="qty" id="FNewQty" value="' + data.FNewQty +
'"</td><td id="FNewmarg">' + FNewmarg + '</td><td><input type="text" class="qty" id="FNew" value="' + data.FNew +
'"</td><td><input type="text" class="qty" id="Fcomments" value="' + data.Fcomments +
'"/></td><td class="price">' + data.Ftitle +
'</td></tr><tr><td>' + data.FGused + '</td><td>Follett U</td><td><input type="text" class="qty" id="FUsedCode" value="' + data.FUsedCode +
'"</td><td><input type="text" class="qty" id="FUsedQty" value="' + data.FUsedQty +
'"</td><td id="FUsedPricemarg">' + FUsedPricemarg + '</td><td><input type="text" class="qty" id="FUsedPrice" value="' + data.FUsedPrice +
'"</td><td><input type="text" class="qty" id="FUsedcomments" value="' + data.FUsedcomments +
'"/></td><td class="price">' + data.Ftitle +
'</td></tr><tr><td>' + data.NEBGPrice + '</td><td>Nebraska</td><td></td><td><input type="text" class="qty" id="NQty" value="' + data.NQty +
'"</td><td id="NPricemarg">' + NPricemarg + '</td><td><input type="text" class="qty" id="NPrice" value="' + data.NPrice +
'"</td><td><input type="text" class="qty" id="Ncomments" value="' + data.Ncomments +
'"</td><td></td></tr><tr><td>' + data.BWGNewPrice +
'</td><td>BkWin N</td><td><input type="text" class="qty" id="BWCode" value="' + data.BWCode +
'"</td><td><input type="text" class="qty" id="BWQty" value="' + data.BWQty +
'"</td><td id="BWmarg">' + BWmarg + '</td><td><input type="text" class="qty" id="BW" value="' + data.BW +
'"</td><td><input type="text" class="qty" id="BWcomments" value="' + data.BWcomments +
'"</td><td></td></tr><tr><td>' + data.BWGPrice +
'</td><td>BkWin U</td><td><input type="text" class="qty" id="BWCodeU" value="' + data.BWCodeU +
'"</td><td><input type="text" class="qty" id="BWQtyU" value="' + data.BWQtyU +
'"</td><td id="BWUmarg">' + BWUmarg + '</td><td><input type="text" class="qty" id="BWU" value="' + data.BWU +
'"</td><td><input type="text" class="qty" id="BWUcomments" value="' + data.BWUcomments +
'"</td><td></td></tr><tr><td>' + data.BKBGPrice +
'</td><td>BookByte</td><td><input type="text" class="qty" id="BKBCode" value="' + data.BKBCode +
'"</td><td><input type="text" class="qty" id="BKBQty" value="' + data.BKBQty +
'"</td><td id="BKBmarg">' + BKBmarg + '</td><td><input type="text" class="qty" id="BKB" value="' + data.BKB +
'"</td><td><input type="text" class="qty" id="BKBcomments" value="' + data.BKBcomments +
'"</td><td></td></tr><tr><td></td><td>F Qoute N</td><td><input type="text" class="qty" id="FquoteNewCode" value="' + data.FQuoteNewCode +
'"</td><td><input type="text" class="qty" id="FQuoteNewQty" value="' + data.FQuoteNewQty +
'"</td><td id="FQuoteNewmarg">' + FQuoteNewmarg + '</td><td><input type="text" class="qty" id="FQuoteNew" value="' + data.FQuoteNew +
'"</td><td id="FQuoteNewmarg><input type="text" class="qty" id="FQNcomments" value="' + data.FQNcomments + '"/></td><td class="price">' + data.FQtitle +
'</td></tr><tr><td></td><td>F Qoute U</td><td><input type="text" class="qty" id="FQuoteUsedCode" value="' + data.FQuoteUsedCode +
'"</td><td><input type="text" class="qty" id="FQuoteUsedQty" value="' + data.FQuoteUsedQty +
'"</td><td id="FQuoteUsedmarg">' + FQuoteUsedmarg + '</td><td><input type="text" class="qty" id="FQuoteUsed" value="' + data.FQuoteUsed +
'"</td><td><input type="text" class="qty" id="FQUcomments" value="' + data.FQUcomments + '"/></td><td class="price">' + data.FQtitle +
'<td></tr><tr><td></td><td>Valore</td><td></td><td><input type="text" class="qty" id="VLRQty" value="' + data.VLRQty +
'"</td><td id="VLRmarg">' + VLRmarg + '</td><td><input type="text" class="qty" id="VLR" value="' + data.VLR +
'"</td><td><input type="text" class="qty" id="VLRcomments" value="' + data.VLRcomments +
'"</td><td></td><tr><td></td><td>Bkscouter</td><td></td><td><input type="text" class="qty" id="Bookscouter1Qty" value="' + data.Bookscouter1Qty +
'"</td><td id="Bookscouter1marg">' + Bookscouter1marg + '</td><td><input type="text" class="qty" id="Bookscouter1" value="' + data.Bookscouter1 +
'"</td><td><input type="text" class="qty" id="BKScomments" value="' + data.BKScomments +
'"</td><td></td><tr><td></td><td>Recycle</td><td></td><td><input type="text" class="qty" id="ScoutRecycleQty" value="' + data.ScoutRecycleQty +
'"</td><td id="ScoutRecyclemarg">' + ScoutRecyclemarg + '</td><td><input type="text" class="qty" id="ScoutRecycle" value="' + data.ScoutRecycle +
'"</td><td><input type="text" class="qty" id="Recycomments" value="' + data.Recycomments +
'"</td><td></td></tr><tr><td></td><td>Bks Amz</td><td></td><td><input type="text" class="qty" id="ScoutAmzQty" value="' + data.ScoutAmzQty +
'"</td><td id="ScoutAmzmarg">' + ScoutAmzmarg + '</td><td><input type="text" class="qty" id="ScoutAmz" value="' + data.ScoutAmz +
'"</td><td><input type="text" class="qty" id="AMZcomments" value="' + data.AMZcomments +
'"</td><td></td></tr><tr><td></td><td>McKenzie</td><td></td><td><input type="text" class="qty" id="McKenzieQty" value="' + data.McKenzieQty +
'"</td><td id="MCKmarg">' + MCKmarg + '</td><td><input type="text" class="McKenzie" id="McKenzie" value="' + data.McKenzie +
'"</td><td><input type="text" class="qty" id="MCKcomments" value="' + data.MCKcomments +
'"</td><td></td></tr>');
var shipweight = document.getElementById("weight").value;
} //END OF ELSE
$("#cnt").val(data.cnt);
$("#guides").trigger("update");
} // END OF SUCCESS
}); //END OF AJAX
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="inventory" class="noprint">
<table id="inv" class="tablesorter" style="border: 1px solid black;">
<caption class="cap">Order History</caption>
<thead>
<tr>
<th>DATE</th>
<th>PO</th>
<th>QtyOrdered</th>
<th>Price</th>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--INVENTORY-->
<div id="guide">
<table class="tablesorter" id="guides" style="border: 1px solid black;">
<thead>
<tr>
<th>Current</th>
<th>Guide</th>
<th>Code</th>
<th>QtyOrder</th>
<th>Margin</th>
<th>$</th>
<th>Comments</th>
<th>Title</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
<!--GUIDE-->
for anyone with the same issues it is possible in the new version of tablesorter , jut update the tablesorter and you are good to go.

How to add form django to jquery function?

How to add form django to jQuery command? My table have a button inside row, when user click on button will insert new row. In column Product have a combobox load from database for user choose Product. But I have some problem with
Uncaught SyntaxError: Unexpected token class
Code:
<script>
var rowIndex = 0;
$("#addrow").on('click', function () {
rowIndex++;
var newRow = '<tr><td>'{{ item_info.item }}'</td>' +
'<td><input id="Quantity' + rowIndex + '" name="Quantity' + rowIndex + '" type="text" /></td>"' +
'<td><input id="Price' + rowIndex + '" name="Price' + rowIndex + '" type="text" /></td>"' +
'<td><input id="Amount' + rowIndex + '" name="Amount' + rowIndex + '" type="text" /></td>"' +
'<td><button type="button" class="removerow btn btn-white fa fa-minus" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove">' +
'</button></td></tr>';
if ($("#dynamic-table > tbody > tr").is("*"))
$("#dynamic-table > tbody > tr:last").after(newRow)
else $("#dynamic-table > tbody").append(newRow)
});
$(document).on('click', "[class^=removerow]", function () {
$(this).parents("tr").remove();
});
</script>
When I view in browser, it displays errr
Uncaught SyntaxError: Unexpected token class.
And error in here:
var newRow = '<tr><td>' <select class="form-control" id="id_item" name="item"> --red error in here
<option value="" selected="selected">---Select Item---</option>
<option value="1">iPhone 5S</option>
<option value="2">iPhone 6S</option>
<option value="3">iPhone 4S</option>
<option value="4">iPhone 4</option>
<option value="5">Galaxy S7</option>
<option value="6">Galaxy S7 Edge</option>
<option value="7">Galaxy S6</option>
</select> '</td>' +
'<td><input id="Quantity' + rowIndex + '" name="Quantity' + rowIndex + '" type="text" /></td>"' +
'<td><input id="Price' + rowIndex + '" name="Price' + rowIndex + '" type="text" /></td>"' +
'<td><input id="Amount' + rowIndex + '" name="Amount' + rowIndex + '" type="text" /></td>"' +
'<td><button type="button" class="removerow btn btn-white fa fa-minus" id="removerow' + rowIndex + '" name="removerow' + rowIndex + '" value="Remove">' +
'</button></td></tr>';

getting undefined on a row.find jquery function

Why would I be getting an undefined in my console.log output when I update the quantity input box?
I have tried various ways but unable to return the value entered in the input box.
counter = $('#myTable tr').length;
var newRow = $("<tr>");
var cols = "";
cols += '<td row-id="' + counter + '"></td>';
cols += '<td row-id="' + counter + '">Display row counter here</td>';
cols += '<td row-id="' + counter + '"><div class="input-group"><input type="text" class="form-control input-sm" id="material_id_' + counter + '" readonly="true" name="material_id_' + counter + '" style="width:150px" required><span class="btn btn-default btn-sm input-group-addon search_material_modal" id="" onclick="displaymaterialmodal(' + counter + ')" ><span class="glyphicon glyphicon-eye-open" title="' + counter + ' "></span></span></div></td>';
cols += '<td row-id="' + counter + '"><div class="input-group"><input type="text" class="form-control input-sm" id="description_' + counter + '" name="description_' + counter + '" readonly="true" style="width:200px"></div></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="myInputbox form-control input-sm" id="quantity" name="quantity" style="width:70px"></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="bar_code" name="bar_code" style="width:150px"></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="invoice_number" name="invoice_number" style="width:150px"></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="unit_price" name="unit_price" style="width:100px"></td>';
cols += '<td row-id="' + counter + '"><select name="where_found" id="where_found" style="height:30px"><option value="" selected></option><option value="Retour client"><cfoutput>#textconstants.customer#</cfoutput></option><option value="Controle recption"><cfoutput>#textconstants.quality_control#</cfoutput></option></select></td>';
cols += '<td row-id="' + counter + '"><select name="shipment" id="shipment" style="height:30px" class="myInputbox"><option value="" selected></option><option value="Pallette"><cfoutput>#textconstants.pallet#</cfoutput></option><option value="Container"><cfoutput>#textconstants.container#</cfoutput></option></select></td>';
cols += '<td row-id="' + counter + '"><input type="text" class="form-control input-sm myInputbox" id="remarks" name="remarks_' + counter + '" ondblclick="openRemarksModal('+ counter +',$(this).val());"></td>';
cols += '<td row-id="' + counter + '"><select name="rework" id="rework" style="height:30px" class="myInputbox"><option value="" selected></option><cfoutput><option value="#textconstants.no_rework#">#textconstants.no_rework#</option><option value="#textconstants.failed_rework#">#textconstants.failed_rework#</option><option value="#textconstants.rework_ok#">#textconstants.rework_ok#</option></cfoutput></select></td>';
cols += '<td row-id="' + counter + '"><select name="status" id="status" style="height:30px" class="myInputbox"><cfoutput><option value="" selected></option><option value="#textconstants.credit_note#">#textconstants.credit_note#</option><option value="#textconstants.replacement#">#textconstants.replacement#</option><option value="#textconstants.no_action#">#textconstants.no_action#</option></cfoutput></select></td>';
cols += '<td row-id="' + counter + '"><button type="button" class="btn btn-default btn-sm" onclick="addphotos(' + counter + ')"><span class="glyphicon glyphicon-camera"></span></button></td>';
newRow.append(cols);
counter++;
$("table.order-list").append(newRow);
$('#url_total_rows').val(parseInt($('#url_total_rows').val(), 10) + 1);
});
$("#myTable tbody").on("change", ".myInputbox", function(){
var row = $(this).closest("tr");
var tb1 = row.find("input.quantity").val();
console.log(tb1);
});
Any help appreciated.
row.find("input.quantity").val();
ref to an input with CLASS quantity, maybe you want
$("#quantity").val()

Categories