How to populate a dropdown menu using JavaScript on multiple rows - javascript

Am trying out an invoice generation system from, https://www.phpzag.com/build-invoice-system-with-php-mysql/. Demo on https://phpzag.com/demo/build-invoice-system-with-php-mysql-demo/create_invoice.php. Everything works just fine but the fields given as examples are just input fields. However, I need to use select options from my mysql database. The fields given in the “htmlRows” are supposed to be added as much as when the user wants using the add buttons in the html form. I have created a separate function for pulling the products from the database and now I don’t know why they are not being populated in the option values on the “htmlRows”.
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click', '#checkAll', function() {
$(".itemRow").prop("checked", this.checked);
});
$(document).on('click', '.itemRow', function() {
if ($('.itemRow:checked').length == $('.itemRow').length) {
$('#checkAll').prop('checked', true);
} else {
$('#checkAll').prop('checked', false);
}
});
var count = $(".itemRow").length;
$(document).on('click', '#addRows', function() {
count++;
//Load products
$.getJSON("load.php?task=products",{ajax: 'true'}, function(j){
var options = '<option value="">--------------------------- select -------------------------</option>';
count++;
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].id + '">' + j[i].display + '</option>';
}
$("select#productCode_'"+count+"'").html(options);
});
var htmlRows = '';
htmlRows += '<tr>';
htmlRows += '<td><input class="itemRow" type="checkbox"></td>';
//This should be a drop down menu
htmlRows += '<td><select name="productCode[]" id="productCode_'+count+'" class="form-control" autocomplete="off" style="width:450px;font-weight:bold;"> <option value="">--------------------------- select -------------------------</option></select></td>';
htmlRows += '<td><input type="number" name="quantity[]" id="quantity_'+count+'" class="form-control quantity" autocomplete="off"></td>';
htmlRows += '<td><input type="number" name="price[]" id="price_'+count+'" class="form-control price" autocomplete="off"></td>';
htmlRows += '<td><input type="number" name="total[]" id="total_'+count+'" class="form-control total" autocomplete="off"></td>';
htmlRows += '</tr>';
$('#invoiceItem').append(htmlRows);
});
</script>
load.php
case 'products':
try
{
require_once("connect.php");
$sql="CALL sp_getProducts()";
$pdo = new PDOConfig();
$resultset = $pdo->query($sql);
foreach($resultset as $row)
{
$data[] = array(
'id' => $row['ProductID'],
'display' => $row['ProductDetails']
);
}
echo json_encode($data);
}
catch(PDOException $e) {
die("Could not connect to the database\n");
}
break;

Replace your javascript code with following:
<script type="text/javascript">
$(document).ready(function(){
$(document).on('click', '#checkAll', function() {
$(".itemRow").prop("checked", this.checked);
});
$(document).on('click', '.itemRow', function() {
if ($('.itemRow:checked').length == $('.itemRow').length) {
$('#checkAll').prop('checked', true);
} else {
$('#checkAll').prop('checked', false);
}
});
var count = $(".itemRow").length;
$(document).on('click', '#addRows', function(options) {
count++;
//Load products
$.getJSON("load.php?task=products",{id: $(this).val(), ajax: 'true'}, function(j){
count++;
var options = '<option value="">--------------------------- select -------------------------</option>';
for (var i = 0; i < j.length; i++) {
options += '<option value="' + j[i].id + '">' + j[i].display + '</option>';
}
console.log(options);
var htmlRows = '';
htmlRows += '<tr>';
htmlRows += '<td><input class="itemRow" type="checkbox"></td>';
//This should be a drop down menu
htmlRows += '<td><select name="productCode[]" id="productCode_'+count+'" class="form-control" autocomplete="off" style="width:450px;font-weight:bold;">'+options+'</select></td>';
htmlRows += '<td><input type="number" name="quantity[]" id="quantity_'+count+'" class="form-control quantity" autocomplete="off"></td>';
htmlRows += '<td><input type="number" name="price[]" id="price_'+count+'" class="form-control price" autocomplete="off"></td>';
htmlRows += '<td><input type="number" name="total[]" id="total_'+count+'" class="form-control total" autocomplete="off"></td>';
htmlRows += '</tr>';
$('#invoiceItem').append(htmlRows);
});
});
});
</script>

Related

row number not update when delete a row in JavaScript

I have a table and I append some rows if it is needed, when I add a row to my table the row number increase like 1, 2, 3, 4, and so on. but if I delete a row for example row number 4, it broke, and if add a new row it not start from number 4 it starts from number 5, how can I solve this problem.
this is my js code:-
$(document).ready(function () {
var rowcount, addBtn, tableBody;
addBtn = $('#addNew');
rowcount = $('#autocomplete_table tbody tr').length + 1;
tableBody = $('#autocomplete_table');
addBtn.click(function () {
$.ajax({
method: "get",
url: "book/getDepartment/" ,
success: function (data) {
console.log(data)
//rowcount=rowcount+1;
console.log(rowcount);
html = '<tr id="row_' + rowcount + '">';
html += '<td><button type="button" id="delete_' + rowcount + '" class=" btn btn-danger btn-sm remove delete_row"><i class="glyphicon glyphicon-remove-sign"></i></button></td>';
html += '<td><input type="text" data-field-name="book_name" name="book_name[]" id="book_name_' + rowcount + '" class=" form-control input-sm "></td>';
html += '<td><input type="text" data-field-name="edition" name="edition[]" id="edition_' + rowcount + '" class="form-control input-sm "></td>';
html += '<td><input type="text" required data-field-name="number" name="number[]" id="number_' + rowcount + '" class="form-control input-sm number"></td>';
html += '<td><input type="text" data-field-name="by_price" name="by_price[]" id="by_price_' + rowcount + '" class="form-control input-sm by_price"></td>';
html += '<td><input type="text" data-field-name="sell_price" name="sell_price[]" id="sell_price_' + rowcount + '" class="form-control input-sm sell_price"></td>';
html += '<td><input type="text" data-field-name="total_payment" name="total_payment[]" id="total_payment_' + rowcount + '" class="form-control input-sm total_payment"></td>';
html += '<td><select data-field-name="department" name="department[]" id="department_' + rowcount + '" class=" form-control input-sm department">';
html += '<option> انتخاب کنید...</option>';
$.each(data, function (i, item) {
html += '<option value="' + item.department_id + '">' + item.department_name + '</option>';
});
html += '</select></td>';
html += '</tr>';
rowcount++;
tableBody.append(html);
},
error: function () {
}
})
})
function delete_Row() {
var rowNo;
id = $(this).attr('id');
//console.log(id);
id_arr = id.split("_");
// console.log(id_arr);
rowNo = id_arr[id_arr.length - 1];
if (rowNo > 1) {
$('#row_' + rowNo).remove();
} else {
alert("شما نمی توانداین سطر را جذف کندید");
}
//console.log($(this).parent());
// $(this).parent().parent().remove();
}
function registerEvent() {
$(document).on('click', '.delete_row', delete_Row);
}
registerEvent();
});
success: function (data) {
rowcount = $('#autocomplete_table tbody tr').length + 1;
You have declare rowcount At Global scope that's why its value is equals to total row you add. when you delete any row you are not recounting total rows rowcount = $('#autocomplete_table tbody tr').length + 1; and it start with wrong number.just put your rowcount in side success function

unable to call the same javascript function onfocusout="getPrize()" dynamically

$(document).ready(function () {
var counter = 0;
var j=0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td><input type="text" class="form-control" name="eway_bill_no2' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="item_name' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" name="item_hsn' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" id="quantity'+j+'" name="quantity' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" id="price'+j+'" onfocusout="getsubTotal2()" name="amount' + counter + '" id="page"/></td>';
cols += '<td><input type="text" class="form-control" id="subtotal'+j+'" name="subtotal' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" id="discount'+j+'" onfocusout="getPrice2()" name="discount' + counter + '"/></td>';
cols += '<td><input type="text" class="form-control" id="total'+j+'" name="total' + 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++;
j++;
});
/*here we are using this to add row in this auto calculation of prize and discount is in below functions*/
getsubTotal2 = function() {
var k=0;
var numVal3 = Number(document.getElementById("quantity"+k).value);
var numVal4 = Number(document.getElementById("price"+k).value);
var totalValue2 = (numVal3 * numVal4)
document.getElementById("subtotal"+k).value = totalValue2.toFixed(2);
k++;
}
getPrice2 = function() {
var l=0;
var numVal1 = Number(document.getElementById("subtotal"+l).value);
var numVal2 = Number(document.getElementById("discount"+l).value) / 100;
var totalValue = numVal1 - (numVal1 * numVal2)
document.getElementById("total"+l).value = totalValue.toFixed(2);
l++;
}
/*the function is getting called only once help me with this i am new here
its just an GST calculating form just want auto calculation of quantity*amount and amount-discount=total;
help with this
/*the function is getting called only once help me with this i am new here
its just an GST calculating form just want auto calculation of quantity*amount and amount-discount=total;
help with this
/*the function is getting called only once help me with this i am new here
its just an GST calculating form just want auto calculation of quantity*amount and amount-discount=total;
help with this

How can i get all value of updated row when checkbox is changed and select box is updated?

I am trying to saved current updated row. My row contain select box and checkbox.If i change select box then selected value and checkbox status is updated.
function assignValue(itemsAll, itemLinked) {
var flage = true;
$.each(itemsAll, function (key, d) {
var tblRow = '<tr>';
tblRow += '<input id="hdnID" type="hidden" value="' + d.ItemCode + '" />';
tblRow += '<td style="width:20%"></span> ' + d.ItemCode + '</td>';
tblRow += '<td style="width:70%">' + d.ItemName + '</td>';
//alert("data"+d.Itme1);
if (itemPrice != null) {
var option = null;
for (var i = 0; i < itemPrice.d.length; i++) {
option += '<option value=' + itemPrice.d[i].ListNum + '>' + itemPrice.d[i].ListName + '</option>';
}
} else {
SessioExp(response.statusText);
}
tblRow += '<td style="width:20%"><div id="' + d.ItemCode + '"><select class="customSelect" name="dropdown">' + option + '</select></div></td>';
$.each(itemLinked, function (k, v) {
if (d.ItemCode == v.ITEMCODE) {
if (v.ISLINKED) {
tblRow += '<td style="width:10%" align="center"><span id="existingData" class="fa fa-times" aria-hidden="false" style="display: none;"></span></td>';
tblRow += '<td style="width:10%" align="center"><input type="checkbox" id="chkLinked" checked /></td>';
flage = false;
}
}
});
if (flage) {
tblRow += '<td style="width:10%" align="center"><span id="latestData" class="fa fa-check"></span></td>';
tblRow += '<td style="width:10%" align="center"><input type="checkbox" id="chkLinked"/></td>';
} else {
flage = true;
}
tblRow += '</tr>';
$("#tblStockTranslist tbody").append(tblRow);
});
}
Above code is set the row of table and my output is
Change id to class, as id must be unique in HTML like(for hidden field),
tblRow += '<input class="hdnID" type="hidden" value="' + d.ItemCode + '" />';
You can try onchange event like,
$('#tblStockTranslist').on('change','select,:checkbox',function(){
$tr = $(this).closest('tr');
code=$tr.find('.hdnID').val();
name=$tr.find('td:eq(1)').text();
value = !$(this).is(':checkbox') ? this.value : '';
// and so on...
console.log({code:code,name:name,value:value}); // make object like this
});
use this code
$("table").on("change","select",function()
{
var changed_row = $(this).parents("tr:eq(0)"),
selected_value = $(this).val();
});

Removing & Updating Table Rows Using jQuery

I am a novice when it comes to jQuery so please bear with me a little and I apologies for my poor coding in advance.
The logic to my code is simple or at least that was the aim.
A jQuery script checks a type field and then gets its values and builds a table. That all works 100%.
The issue comes when deleting rows and then updating the table id's on the new appended rows that is generated by clicking on the new row button.
The new rows do not delete.
Here is the code but I have also created a jsfiddle so you can check it out live, but there are some bugs that are not there on the site - for instance you need to double click the button for some reason for it to work
JS:
$('.purchase-order-button').on('click', function(){
var buildcotable = '';
var buildtrs = $('#formentry15').val();
var coArray = '';
var coArrayNumber = 1;
buildcotable += '<div class="table-responsive">';
buildcotable += '<table class="table table-bordered">';
buildcotable += '<thead>';
buildcotable += '<th class="text-center">CO Number</th>';
buildcotable += '<th class="text-center">CO Price</th>';
buildcotable += '<th class="text-center">Options</th>';
buildcotable += '</thead>';
buildcotable += '<tbody id="jquerypotable">';
//lets do a check and see how many are listed
if(buildtrs.indexOf(',') !== -1){
coArray = buildtrs.split(',');
$.each(coArray, function(){
var splitCoArray = this.split('=');
var coArrayPrice = splitCoArray[1].trim().replace('£', '');
var coArrayCode = splitCoArray[0].trim();
buildcotable += '<tr id="jqueryporow'+coArrayNumber+'">';
buildcotable += '<td><input type="text" value="'+coArrayCode+'" id="jqueryponumber'+coArrayNumber+'" class="form-control"></td>';
buildcotable += '<td><input type="text" value="'+coArrayPrice+'" id="jquerypovalue'+coArrayNumber+'" class="form-control"></td>';
buildcotable += '<td class="text-center"><a class="btn btn-danger delete-co-row" id="deletepo'+coArrayNumber+'">Delete CO Number</a></td>';
buildcotable += '</tr>';
coArrayNumber += 1;
});
} else {
if(buildtrs == '' || buildtrs == 'TBC'){
buildcotable += '<tr id="jqueryporow1">';
buildcotable += '<td><input type="text" value="" id="jqueryponumber1" class="form-control"></td>';
buildcotable += '<td><input type="text" value="" id="jquerypovalue1" class="form-control"></td>';
buildcotable += '<td class="text-center"><a class="btn btn-danger delete-co-row" id="deletepo1">Delete CO Number</a></td>';
buildcotable += '</tr>';
} else {
var splitSingleCoArray = buildtrs.split('=');
var coSinglePrice = splitSingleCoArray[1].trim().replace('£', '');
var coSingleCode = splitSingleCoArray[0].trim();
buildcotable += '<tr id="jqueryporow1">';
buildcotable += '<td><input type="text" value="'+coSingleCode+'" id="jqueryponumber1" class="form-control"></td>';
buildcotable += '<td><input type="text" value="'+coSinglePrice+'" id="jquerypovalue1" class="form-control"></td>';
buildcotable += '<td class="text-center"><a class="btn btn-danger delete-co-row" id="deletepo1">Delete CO Number</a></td>';
buildcotable += '</tr>';
}
}
buildcotable += '</tbody>';
buildcotable += '</table>';
buildcotable += '<p>Add New CO Number</p>';
buildcotable += '<p>Done</p>';
buildcotable += '</div>';
$('.ubl-section-7').html(buildcotable);
$('.ubl-section-7').show();
$('.model-background').fadeIn(500);
//add new row
$('#addnewpo').on('click', function(e){
e.preventDefault();
var numPoRows = $("#jquerypotable > tr").length;
var makeNewRowNum = numPoRows + 1;
var createnewporow = '<tr id="jqueryporow'+makeNewRowNum+'">';
createnewporow += '<td><input type="text" value="" id="jqueryponumber'+makeNewRowNum+'" class="form-control"></td>';
createnewporow += '<td><input type="text" value="" id="jquerypovalue'+makeNewRowNum+'" class="form-control"></td>';
createnewporow += '<td class="text-center"><a class="btn btn-danger delete-co-row-new" id="deletepo'+makeNewRowNum+'">Delete CO Number</a></td>';
createnewporow += '</tr>';
$('#jquerypotable').append(createnewporow);
});
//delete row
$('#jquerypotable > tr').on('click', '.delete-co-row', function(e){
e.preventDefault();
var getCoId = $(this).attr('id');
var coLastChar = parseInt(getCoId.substr(getCoId.length - 1));
var coHowManyRows = parseInt($("#jquerypotable > tr").length);
var makeMinusId = '';
var newi = coLastChar;
if(coLastChar == coHowManyRows){
$('#jqueryporow'+coLastChar).remove();
} else {
//before removing rows we need to rebuild the information given.
for(newi; newi <= coHowManyRows; newi++){
if(newi == coLastChar){
$('#jqueryporow'+newi).remove();
} else {
makeMinusId = (newi - 1);
$('#jqueryporow'+newi).attr('id', 'jqueryporow'+makeMinusId);
$('#jqueryponumber'+newi).attr('id', 'jqueryponumber'+makeMinusId);
$('#jquerypovalue'+newi).attr('id', 'jquerypovalue'+makeMinusId);
$('#deletepo'+newi).attr('id', 'deletepo'+makeMinusId);
}
}
}
});
});
enter link description here
Any help is gratefully received
You added an eventListener to the delete buttons at the initialization of the page but didnt do it again when creating the rows. I suggest adding the following code to your addnewpo button:
$('#addnewpo').on('click', function(e){
// your original code here
//...
//now add an event listener to the new deletebuttons
$('#jquerypotable > tr').on('click', '.delete-co-row-new', function(e){
e.preventDefault();
$(this).closest('tr').remove();
});
});
I Found the issue, the issue was the listener needed to remove the tr.
so instead of:
/now add an event listener to the new deletebuttons
$('#jquerypotable > tr').on('click', '.delete-co-row', function(e){
It needed to be:
/now add an event listener to the new deletebuttons
$('#jquerypotable').on('click', '.delete-co-row', function(e){
Thanks everyone for trying to help :)

Add row after click

Hi gladly I want to add a task row after I have clicked the save button. However what I have tried didn't seem to work unfortunately.
To show you the problem that I have. I will show you through a video where I have recorded myself. Here is the link: https://www.youtube.com/watch?v=d7L75HflxYo&feature=youtu.be
This is what I have tried:
var orderId=$('#id_order').val();
var $table = $('#taskTable');
$table.empty();
loadOrderTable(orderId);
And I have also tried this:
var orderId=$('#id_order').val();
var $table = $('#taskTable');
$table.empty();
//loadOrderTable(orderId);
$table.html(loadOrderTable(orderId));
Both attemps were placed in the body of the click function $('#saveOrder').click(function(e).
Now I will show you there rest of my code, in case if you need it.
$(function(){
$('#saveOrder').click(function(e){
e.preventDefault();
var form = $('#orderForm');
var allInput=form.serialize();
//var allInputJSON = JSON.stringify(allInput);
console.log('form serialize value: '+form.serialize());
//console.log('allInputJSON value: '+allInputJSON);
$.ajax( {
url: absUrl + "/user/orders/update/ordertasks",
data: {'allInput' : allInput},
success: function( response ) {
console.log('response value: '+ response );
//tried this after a user has added a task and that the gets filled with the new added row. But unfortunately it doesn't works.
var orderId=$('#id_order').val();
var $table = $('#taskTable');
$table.empty();
loadOrderTable(orderId);
}
} );
});
//addRowOnTaskTable(6);
var orderId=$('#id_order').val();
loadOrderTable(orderId);
//updateTotal();
//absUrl is declared in user/_layouts/template_head.blade.php
function loadOrderTable(order_id){
var order_id=order_id;
$.ajax({
url: absUrl+"/user/orders/load/tasks",
data: {'order_id' : order_id}
}).done(function(data) {
var data = $.parseJSON(data);
console.log('result loading table');
console.log(JSON.stringify(data));
$.each(data, function(index, value) {
$('#taskTable').append(
'<tr>'+
'<td>'
+value.task_name+
'</td>'+
'<td>'
+value.task_hour+
'</td>'+
'<td>'+ //pak load id ordertask ipv load hour voor je backend
'<input type="text" class="form-control hour" id="hour'+value.id+'" name="load_hour[]" value='+value.hour+' data-row='+value.id+' style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<input type="text" class="form-control hour_salary" id="hour_salary'+value.id+'" name="load_hour_salaries[]" value='+value.hourprice+' data-row='+value.id+' style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<input type="text" class="form-control" id="total_salary'+value.id+'" name="load_total_salaries[]" value='+value.totalprice+' readonly style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<div class="dropdown">'+
'<button type="button" class="btn btn-danger dropdown-toggle selDelete" data-toggle="dropdown">'+
'<input id="check1" name="checkbox[]" type="checkbox" class="check" >'+
'<span class="caret-hover caret"></span>'+
'</button>'+
' <input type="hidden" name="load_id_task[]" value="'+value.id_task+'"/>'+
' <input type="hidden" name="load_id_ordertask[]" value="'+value.id+'"/>'+
'<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">'+
'<li><a class="deleteOrdertask" id="deleteOrdertask' + value.id + '" value="deleteOrdertask' + value.id + '" data-row='+value.id+' href= "#" data-method="delete" >Delete</a></li>'+
'</ul>'+
'</div>'
+'</td>'+
'</tr>');
});
$('.deleteOrdertask').click(function(e){
e.preventDefault();
var $this = $(this);
var rowId = $this.data('row');
deleteOtRow( rowId );
});
var deleteOtRow = function(rowId){
$deleteOrdertask = $("#deleteOrdertask" + rowId);
$($deleteOrdertask).parents('tr').remove();
var temp = $('#delete_ordertasks').val();
$('#delete_ordertasks').val(temp + rowId + ",");
//$(this).parents('tr').remove();
};
var updateTotal = function(rowId){
var rowId = rowId,
$hour_salary = $("#hour_salary" + rowId),
$total_salary = $("#total_salary" + rowId);
var hour = parseFloat($("#hour" + rowId).val()),
hour_salary = parseFloat($hour_salary.val());
if ( hour_salary.length > 0 )
$total_salary.val("0");
else
$total_salary.val( hour_salary * hour );
};
//updates elke totaal veld zonder dat een user een knop heeft ingedrukt.
$('.hour_salary').each(function() {
var $this = $(this);
updateTotal($this.data('row'));
});
$(".hour_salary").keyup(function() {
console.log('test keyup ');
var $this = $(this);
var rowId = $this.data('row');
$this.val( $this.val().replace(/\D/g,'') );
updateTotal( rowId );
});
$(".hour").keyup(function() {
var $this = $(this);
var rowId = $this.data('row');
$this.val( $this.val().replace(/\D/g,'') );
updateTotal( rowId );
});
});
}
function addRowOnTaskTable( id_task ){
var id_task=id_task;
console.log('addrow id '+ id_task);
$.ajax({
url: absUrl+"/user/orders/post/task",
data: {'id_task' : id_task}
}).done(function(data) {
var data = $.parseJSON(data);
console.log('add row JSON stringify'+JSON.stringify(data));
$('#taskTable').append(
'<tr>'+
'<td>'
+data.task_name+
'</td>'+
'<td>'
+data.task_hour+
'</td>'+
'<td>'+
'<input type="text" class="form-control hour" value="" data-row="'+data.id+'" name="hour[]" style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<input type="text" class="form-control hour_salary" value="" data-row='+data.id+' name="hour_salary[]" style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<input type="text" class="form-control" name="total_salary[]" value="" readonly style="max-width:50%" placeholder="">'+
'</td>'+
'<td>'+
'<div class="dropdown">'+
'<button type="button" class="btn btn-danger dropdown-toggle selDelete" data-toggle="dropdown">'+
'<input id="check1" name="checkbox[]" type="checkbox" class="check" >'+
'<span class="caret-hover caret"></span>'+
'</button>'+
' <input type="hidden" name="id_task[]" value="'+data.id+'"/>'+
' <input type="hidden" name="id_ordertask[]" value=""/>'+
' <input type="hidden" name="id_task[]" value="'+data.id+'"/>'+
'<ul class="dropdown-menu" aria-labelledby="selDelete" role="menu">'+
'<li><a class="deleteOrdertask' + data.id + '" href= "'+absUrl+"/user/orders/delete/ordertask"+'" data-method="delete" >Delete</a></li>'+
'</ul>'+
'</div>'
+'</td>'+
'</tr>');
$('.deleteOrdertask' + data.id ).click(function(e){
e.preventDefault();
$(this).parents('tr').remove();
});
var updateTotal = function(rowId){
var rowId = rowId,
$hour_salary = $("#hour_salary" + rowId),
$total_salary = $("#total_salary" + rowId);
var hour = parseFloat($("#hour" + rowId).val()),
hour_salary = parseFloat($hour_salary.val());
if ( hour_salary.length > 0 )
$total_salary.val("0");
else
console.log('tot ja '+ hour_salary * hour);
$total_salary.val( hour_salary * hour );
};
$(".hour_salary").keyup(function() {
console.log('test keyup ');
var $this = $(this);
var rowId = $this.data('row');
$this.val( $this.val().replace(/\D/g,'') );
updateTotal( rowId );
});
$(".hour").keyup(function() {
var $this = $(this);
var rowId = $this.data('row');
$this.val( $this.val().replace(/\D/g,'') );
updateTotal( rowId );
});
});
}
});

Categories

Resources