This is a Javascript file that creates new table row when add new button is clicked however I have no Idea on how to save data coming from the HTML file passed on the JQuery going into the database
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function(){
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row =
'<tr id="tables" onload="add()">' +
'<td><input type="text" class="form-control" name="studentID" id="studentID"></td>' +
'<td><input type="text" class="form-control" name="lastname" id="lastname"></td>' +
'<td><input type="text" class="form-control" name="firstname" id="firstname"></td>' +
'<td><input type="text" class="form-control" name="middleInitial" id="middleInitial"></td>' +
'<td><input type="text" class="form-control" name="course" id="course"></td>' +
'<td><input type="text" class="form-control" name="section" id="section"></td>' +
'<td><input type="text" class="form-control" name="studentNo" id="studentNo"></td>' +
'<td><input type="text" class="form-control" name="schoolYear" id="schoolYear"></td>' +
'<td><input type="text" class="form-control" name="existingViolation" id="existingViolation"></td>' +
'<td><input type="text" class="form-control" name="existingCommunityService" id="existingCommunityService"></td>' +
'<td><input type="text" class="form-control" name="existingCommunityServicetime" id="existingCommunityServiceTime"></td>' +
'<td><input type="text" class="form-control" name="remainingCommunityServicetime" id="remainingCommunityServiceTime"></td>' +
'<td>' + actions + '</td>' +
'</tr>';
$("table").append(row);
$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function(){
let empty = false;
let input = $(this).parents("tr").find('input[type="text"]');
input.each(function(){
if(!$(this).val()){
$(this).addClass("error");
empty = true;
} else{
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if(!empty){
input.each(function(){
var array = [$(this).val()]
array.push
$(array.push).parent('td').html(array.push)
console.log(array)
localStorage.setItem('result', (array));
console.log(localStorage.getItem('result'))
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}});
$(document).on("click", ".edit", function(){
$(this).parents("tr").find("td:not(:last-child)").each(function(){
$(this).html('<input type="text" class="form-control" value="' + $(this).text() + '">');
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function(){
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
});
});
There is a row that adds the value but never been saved into the database I know how to incorporate from HTML to PHP by using form action but JQuery is a different level for me so can you help me please? THANK YOU!
Related
I have problem with multirow form script modified by me. I added function who is filling ean, product_description and category_id inputs by values from ProductsData json array on the basis of manufacturer_catalog_nr value. Everything is OK when I'm adding rows singly and at once I fill manucaturer_catalog_nr. Script is filling rest of inputs. But when I add two or more rows script is filling only last ean, product_description and category_id inputs. The same problem is when remove row and add next one.
I know only that the problem is in counting but I don't have idea how can I fix this.
$(document).ready(function(){
var count = 0;
$('#add').click(function(){
count = document.getElementById("product_table_rows").rows.length;
var html_code = '';
var html_code = "<tr id='row"+(count+1)+"'>";
html_code += '<td><div class="input-group"><div class="input-group-addon">P</div><input list="manufacturer_catalog_nr_list" autocomplete="off" type="text" id="manufacturer_catalog_nr_'+count+'" name="manufacturer_catalog_nr['+count+']" class="form-control catalog-filter" title="Numer katalogowy producenta. Jeśli go nie znasz, wpisz numer dystrybutora." required /></div><div class="input-group"><div class="input-group-addon">D</div><input type="text" id="supplier_catalog_nr_'+count+'" name="supplier_catalog_nr['+count+']" class="form-control catalog-filter" title="Numer katalogowy dystrybutora. Jeśli go nie znasz wpisz numer producenta." required /></div>';
html_code += '<td><input type="text" id="ean_'+count+'" name="ean['+count+']" pattern="[0]|.{8,8}|.{13,13}" required title="Wpisz 8 lub 13 cyfr numeru EAN lub 0 jeżeli go nieznasz" class="form-control ean-filter" /></td>';
html_code += '<td><input type="text" id="quantity_'+count+'" name="quantity['+count+']" class="form-control qty-filter" required/></td>';
html_code += '<td><select id="unit_'+count+'" name="unit['+count+']" class="form-control"><option value="szt.">szt.</option><option value="m">m</option><option value="kg">kg</option><option value="kpl.">kpl.</option></select></td>';
html_code += '<td><textarea rows="2" cols="50" style="width:100%; height:66px; resize: vertical; min-height:34px;" id="product_description_'+count+'" name="product_description['+count+']" class="form-control" /></textarea></td>';
html_code += '<td><div class="input-group"><input type="text" id="price_'+count+'" name="price['+count+']" class="form-control price-filter"/><div class="input-group-addon">zł</div></div></td>';
html_code += '<td><select id="category_id_'+count+'" name="category_id" class="form-control" required></select><select onchange="this.className=this.options[this.selectedIndex].className" id="" name="" value="" class="form-control green"><option class="form-control green" selected>Normalny</option><option class="form-control red">Wysoki</option></select></td></td>';
html_code += '<td><textarea rows="1" cols="50" style="width:100%; height:66px; resize: vertical; min-height:34px;" id="assembly_'+count+'" name="assembly['+count+']" class="form-control" /></textarea></td>';
html_code += "<td><button type='button' name='remove' data-row='row"+(count+1)+"' class='btn btn-danger btn-xs remove'><span class='glyphicon glyphicon-minus'></span></button></td>";
html_code += "</tr>";
$.getJSON('../manage_categories.php', function(data) {
var html = "";
html += '<option hidden selected disabled>Wybierz kategorię</option>';
for(var option in data){
html += `<optgroup label="`+ option +`">`;
data[option].forEach(function(item){
html += `<option value="` + item["pc_option_value"] + `" >`+ item["pc_option_name"] +`</option>`
});
html += `</optgroup>`;
}
$('#category_id_'+count).append(html);
});
$('#product_table').append(html_code);
$('#manufacturer_catalog_nr_'+count).change(function () {
var input_catalog_nr = $(this).val();
var check = false;
for (var index = 0; index < ProductsData.length; ++index) {
var product = ProductsData[index];
if(product.manufacturer_catalog_nr == input_catalog_nr){
check = true;
break;
}
}
if(check == true) {
$('#ean_'+count).val(ProductsData[index].ean);
$('#product_description_'+count).val(ProductsData[index].product_description);
$('#category_id_'+count).val(ProductsData[index].category_id);
}
});
$.getScript("js/input_filters.js",function(){
Inputs_filters();
});
});
$(document).on('click', '.remove', function(){
var delete_row = $(this).data("row");
$('#' + delete_row).remove();
});
});
I found the solution:
Add an attribute data-line='+count+' in manufacturer_catalog_nr input,
Set var "input_line" with data-line value in input filling function,
var input_line = $(this).data("line");`
Add var input_line to input to be filled,
$('#ean_'+input_line).val(ProductsData[index].ean);
$('#product_description_'+input_line).val(ProductsData[index].product_description);
$('#category_id_'+input_line).val(ProductsData[index].category_id);
Enjoy.
I want to open 3 row defult after addrow and remove row and apply remove defult 3 row using javascript
please share valuable idea sir
I have need example:-
$(document).ready(function (){
$("body").on('click', '.btn-add-more', function (e) {
e.preventDefault();
var $sr = ($(".jdr1").length + 1);
var rowid = Math.random();
var $html = '<tr class="jdr1" id="' + rowid + '">' +
'<td><span class="btn btn-sm btn-default">' + $sr + '</span><input type="hidden" name="count[]" value="'+Math.floor((Math.random() * 10000) + 1)+'"></td>' +
'<td><input type="text" required="" class="form-control input-sm title" placeholder="Medicine" name="medicine[]"></td>' +
'<td><input type="text" name="medicine_qty[]" placeholder="Potency" class="form-control input-sm"></td>' +
'<td><input type="text" name="medicine_time[]" placeholder="Description" class="form-control input-sm"></td>' +
'<td><input type="text" name="remark[]" placeholder="Add/Note" class="form-control input-sm"></td>' + '<td><button class="btn btn-sm btn-warning btn-remove-detail-row"><i class="glyphicon glyphicon-remove">Remove</i></button> </td>'+
'</tr>';
$("#table-details").append($html);
});
You can wrap the function in a for loop and edit the for loop limit according to your needs.
$("body").on('click', '.btn-add-more', function (e) {
e.preventDefault();
var rows = $(".jdr1").length;
var limit = 1;
// In the first click append 3 rows, then 1 row per click
if (rows < 3) limit = 3;
for (let i=0; i<limit; i++) {
var $sr = ($(".jdr1").length + 1);
var rowid = Math.random();
var $html = '<tr class="jdr1" id="' + rowid + '">' +
'<td><span class="btn btn-sm btn-default">' + $sr + '</span><input type="hidden" name="count[]" value="'+Math.floor((Math.random() * 10000) + 1)+'"></td>' +
'<td><input type="text" required="" class="form-control input-sm title" placeholder="Medicine" name="medicine[]"></td>' +
'<td><input type="text" name="medicine_qty[]" placeholder="Potency" class="form-control input-sm"></td>' +
'<td><input type="text" name="medicine_time[]" placeholder="Description" class="form-control input-sm"></td>' +
'<td><input type="text" name="remark[]" placeholder="Add/Note" class="form-control input-sm"></td>' + '<td><button class="btn btn-sm btn-warning btn-remove-detail-row"><i class="glyphicon glyphicon-remove">Remove</i></button> </td>'+
'</tr>';
$("#table-details").append($html);
}
})
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<table id="table-details"></table>
<button class="btn-add-more">Add Rows</button>
</html>
I am using Codeigniter but my issue is not related to Codeigniter. I am getting some issues in my jQuery.
On page load, I am displaying the Add more button so when the user clicks on Add more then it will display the dropdown dynamically. (Note: The second dropdown will display from ajax success. So now I am displaying only text for understanding).
Below are the two dropdowns.
Now if you choose from the dropdown then it will display dynamically input field some think like this
The user can add more one the dropdown field only clicking on Add more.
check below image
Now my main issue is, I increment the name of the input field but not getting increment value. I am getting the below output
For example
First dropdown
<select name="pp_fileStatus2" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled="" selected="">Status</option>//dropdown option</select>
<input type="text" name="reasonDate2" class="form-control datetimepicker" placeholder="Date">
Second dropdown
<select name="pp_fileStatus2" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled="" selected="">Status</option>//dropdown option</select>
<input type="text" name="reasonDate2" class="form-control datetimepicker" placeholder="Date">
Notice here every time i am getting name="pp_fileStatus2" for every dropdown and name="reasonDate2" for every input field.
$(document).ready(function() {
var maxField = 10; //Input fields increment limitation
var x = 1; //Initial field counter is 1
var count = 2;
var numberIncr = 1; // used to increment the name for the inputs
var addrm = '';
$.ajax({
type: "POST",
async: false,
url: "/access_control/getRMname",
//data: {},
dataType: 'json',
success: function(response) {
addrm += '<select name="addrm' + numberIncr + '" class="form-control multipleselect dynamicVal"><option value="" selected disabled>Select</option>';
$.each(response, function(key, data) {
addrm += '<option value="' + data.rmid + '">' + data.rmfirstname + ' ' + data.rmlastname + '</option>';
//rm_details.push(addrm);
});
addrm += '</select>';
}
});
//Once add button is clicked
$(document).on('click', '#clicktoadd', function() {
//Check maximum number of input fields
if (x < maxField) {
x++; //Increment field counter
$(".medication_info").append('<select name="pp_fileStatus' + numberIncr + '" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled selected>Status</option><option value="1">Open</option><option value="2">Close</option><option value="3">Pending</option></select><p>One more dropdown. It will come from ajax</p>' + addrm);
}
count++;
});
$(document).on('change', '.pp_fileStatus', function(event) {
if (($(this).val() == '1') || ($(this).val() == '3')) {
$(".medication_info").append('<div class="addbankField input-wrapper padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '" class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="reasonAmt' + numberIncr + '" class="form-control commnumber" placeholder="amt"></div></div><input type="hidden" name="remark' + numberIncr + '" class="form-control" placeholder="Remark">');
} else {
$(".medication_info").append('<div class="addbankField input-wrapper lbpflex padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '" class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="remark' + numberIncr + '" class="form-control" placeholder="Remark"></div></div><input type="hidden" name="reasonAmt' + numberIncr + '" class="form-control" placeholder="amt">');
}
});
numberIncr++;
});
<div id="clicktoadd">Add More</div>
<div class="row">
<div class="medication_info">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
You need to increment value inside the .click callback since you are generating form name inside the .click event.
Increment numberIncr when you trigger a click. Also remove numberIncr++ at the end script.
$(document).ready(function() {
var maxField = 10; //Input fields increment limitation
var x = 1; //Initial field counter is 1
var count = 2;
var numberIncr = 1; // used to increment the name for the inputs
var addrm = '';
$.ajax({
type: "POST",
async: false,
url: "/access_control/getRMname",
//data: {},
dataType: 'json',
success: function(response) {
addrm += '<select name="addrm' + numberIncr + '" class="form-control multipleselect dynamicVal"><option value="" selected disabled>Select</option>';
$.each(response, function(key, data) {
addrm += '<option value="' + data.rmid + '">' + data.rmfirstname + ' ' + data.rmlastname + '</option>';
//rm_details.push(addrm);
});
addrm += '</select>';
}
});
//Once add button is clicked
$(document).on('click', '#clicktoadd', function() {
//Check maximum number of input fields
if (x < maxField) {
x++; //Increment field counter
// CHECK: Added this to increment number on click
numberIncr++;
$(".medication_info").append('<select name="pp_fileStatus' + numberIncr + '" class="form-control multipleselect pp_fileStatus dynamicVal"><option value="" disabled selected>Status</option><option value="1">Open</option><option value="2">Close</option><option value="3">Pending</option></select><p>One more dropdown. It will come from ajax</p>' + addrm);
}
count++;
});
$(document).on('change', '.pp_fileStatus', function(event) {
if (($(this).val() == '1') || ($(this).val() == '3')) {
$(".medication_info").append('<div class="addbankField input-wrapper padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '" class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="reasonAmt' + numberIncr + '" class="form-control commnumber" placeholder="amt"></div></div><input type="hidden" name="remark' + numberIncr + '" class="form-control" placeholder="Remark">');
} else {
$(".medication_info").append('<div class="addbankField input-wrapper lbpflex padding0"><div class="form-group"> <input type="text" name="reasonDate' + numberIncr + '" class="form-control datetimepicker" placeholder="Date"></div></div><div class="addbankField input-wrapper"><div class="form-group"> <input type="text" name="remark' + numberIncr + '" class="form-control" placeholder="Remark"></div></div><input type="hidden" name="reasonAmt' + numberIncr + '" class="form-control" placeholder="amt">');
}
});
// CHECK: remove the below numberIncr logic
// numberIncr++; --> remove this
});
<div id="clicktoadd">Add More</div>
<div class="row">
<div class="medication_info">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
html code we can get the value
<input type="text" name="value1[]" id="value1"/>
<input type="mail" name="value2[]" id="value2"/>
<input type="text" name="total[]" id="total" />
i can try with this in jQuery i can get only html value result, after add new row i can't get the value
$(document).ready(function () {
var counter = 0;
$("#addrow").on("click", function () {
var newRow = $("<tr>");
var cols = "";
cols += '<td>Item1</td>';
cols += '<td><input type="text" class="form-control" name="value1[]" id="value2' + counter + '"></td>';
cols += '<td><input type="text" class="form-control" name="foreign_milion[]" id="foreign_milion_' + counter + '"></td>';
cols += '<td><input type="text" readonly class="form-control" name="total_milion[]" id="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++;
});
$("#value2").keyup(function () {
var value1 = $("#value1").val();
var value2 = $("#value2").val();
var totalincome = parseInt(value1) + parseInt(value2);
//alert(totalincome);
$("#total").val(totalincome);
})
});
First of all the id must be unique in the same document, else you'll end up with incorrect HTML code, so you need to replace the ids with common classes instead in your code as a first step.
Then you need to use event delegation to attach the event to your inputs since the must of them are created dynamically with the JS code.
I prefer the use of input event instead of keyup when you track the user inputs, so the event will be something like:
$(document).ready(function() {
var counter = 1;
$("body").on("input", ".calculated_value", function() {
var parent_row = $(this).closest('tr');
var totalincome = 0;
parent_row.find('.calculated_value').each(function() {
totalincome += parseInt($(this).val() || 0);
});
parent_row.find(".total").val(totalincome);
});
$("#addrow").on("click", function() {
var newRow = $("<tr>");
var cols = "";
cols += '<td>Item ' + counter + '</td>';
cols += '<td><input type="text" class="form-control calculated_value" name="value1[]"></td>';
cols += '<td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>';
cols += '<td><input type="text" class="form-control total" name="total_milion[]" readonly></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++;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="order-list">
<tr>
<td>Item </td>
<td><input type="text" class="form-control calculated_value" name="value1[]"></td>
<td><input type="text" class="form-control calculated_value" name="foreign_milion[]"></td>
<td><input type="text" class="form-control total" name="total_milion[]" readonly></td>
</tr>
</table>
<button id="addrow">Add row</button>
I have tried this one, may be this is what you are looking into.
please take a look at the snippet.
jQuery(document).ready(function () {
var count = 1;
jQuery('#add').on('click', function(){
var el = `<section id="inpFields">
<input type="text" name="value1[]" id="value`+count+`" placeholder="value `+count+`"/>
<input type="text" name="value2[]" id="value2`+count+`" placeholder="value `+count+`"/>
<input type="text" name="total[]" id="total`+count+`" placeholder="total" />
<button class="totalBtn" data-id="`+count+`">Total</button>
</section>`;
jQuery('#inpFields').append(el);
count++;
});
jQuery('#add').click();
jQuery(document).on('click', '.totalBtn', function(){
var i = this.dataset.id;
var value1 = jQuery('#value'+i).val();
var value2 = jQuery('#value2'+i).val();
var totalincome = parseInt(value1) + parseInt(value2);
//alert(totalincome);
jQuery('#total'+i).val(totalincome);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button id="add">Add Fields</button>
<section id="inpFields">
</section>
i have add dynamic row using jquery now i want to add those column of the row. Down below is my code i am not able to add the column that is created dynamically.the first textbox is calculated and answer is displayed in grandtotal textbox but the rest textbox cannot be calculated.
<tbody>
<tr class="data-contact-person">
<td>
<input type="text" name="a" class="form-control a" />
</td>
<td>
<input type="text" name="b" class="form-control b" />
</td>
<td>
<input type="text" name="c" class="form-control c" />
</td>
<td>
<input type="text" name="d" class="form-control d" />
</td>
<td>
<button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Grand-Total</td>
<td>
<input data-val="true" id="grdtol1" name="grdtol1" value="" class="form-control text-box single-line" type="text">
</td>
<td>
<input data-val="true" id="grdtol" name="grdtol2" value="" class="form-control text-box single-line" type="text">
</tr>
</tfoot>
$(document).ready(function () {
$(document).on("click", ".classAdd", function () { //
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
});
$(document).on("click", ".deleteContact", function () {
$(this).closest("tr").remove(); // closest used to remove the respective 'tr' in which I have my controls
});
$(document).ready(function (e) {
$("input").change(function () {
var grdtol1 = 0;
$("input[name=c]").each(function () {
grdtol1 = grdtol1 +parseInt( $(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
});
})
First, a piece of advice, don't create multiple $(document).ready() functions in the same javascript file, you just need one.
You haven't post your html code, so I'm guessing here, but I suppose you initially have row with the inputs and you also have an input with name="grdtol1" where you want to calculate the sum of the values of the column, and it has to refresh when you change the value in any of the inputs.
According to that, I see this problems...
You need to use event delegation for the input onchange event (like you do for the .deleteContact button). You're associating the event directly, so it only applies to the elements that are in the DOM when the page loads, and not for the rows you add dinamically. You can associate the event to the table and delegate it to the input, for example.
Inside of the event, you're selecting $("input[name=c]"), but according to the previous code, your inputs will have name="c' + rowCount + '". You chould use the class to select them.
If you delete one row, you should also recalculate the sum, because the input of that row will disappear.
Putting all together...
$(document).ready(function () {
$(document).on("click",".classAdd",function() {
var rowCount = $('.data-contact-person').length + 1;
var contactdiv = '<tr class="data-contact-person">' +'<td><input type="text" name="a' + rowCount + '" class="form-control a" /></td>' +
'<td><input type="text" name="b' + rowCount + '" class="form-control b" /></td>' +
'<td><input type="text" name="c' + rowCount + '" class="form-control c" /></td>' +
'<td><input type="text" name="d' + rowCount + '" class="form-control d" /></td>' +
'<td><button type="button" id="btnAdd" class="btn btn-xs btn-primary classAdd">Add More</button>' +
'<button type="button" id="btnDelete" class="deleteContact btn btn btn-danger btn-xs">Remove</button></td>' +
'</tr>';
$('#maintable').append(contactdiv); // Adding these controls to Main table class
});
function calculateGrandtotal() {
var grdtol1 = 0;
$('input.c').each(function() {
grdtol1 += parseInt($(this).val());
})
$("input[name=grdtol1]").val(grdtol1);
}
$('#maintable').on('click','.deleteContact',function () {
$(this).closest('tr').remove();
calculateGrandtotal()
})
.on('change','input.c',function() {
calculateGrandtotal()
});
});
I hope it helps