I am dynamically generating a form using AJAX and on the click of a button I add more input fields. But when I enter values in the input field and inspect in developer console,I don't see any value in the input text box.
Code for generating the form
$.ajax({
method: 'GET',
url: 'api/PayrollSystem/GetEmployeeSalaryAmount?AdminId=' + 1,
success: function(data) {
if (Object.keys(data).length == 0) {
$.alert({
title: 'Saved',
content: 'Account Number Saved!',
});
var row = ('<tr ><td colspan="3" text-align="center"> <b>No Registered Users</b></td></tr>');
$('.EmpTable').append(row);
} else {
$.each(data, function(index, value) {
var rows = ('<div id="form_div"><form method="post"><table class="table table-hover employee_table' + index + ' " align=center><thead><tr><td><b>Employee</td> <td><b>Amount</td></tr></thead><tbody><tr><td><b>' + value.FullName + '</b></td><td><input type="hidden" class="form-control Leavename" name="Leavename[]" value="Basic" placeholder="Enter Leave Name"> <input readonly class="form-control LeaveAmount" type="number" name="LeaveAmount[]" value=' + value.SalaryAmount + ' /><input class="form-control EmpId" type="hidden" name="Id[]" value=' + value.Id + ' /></td></tr><tr id="row' + index + 1 + '"><td><input type="text" class="form-control Leavename" name="Leavename[]" placeholder="Enter Leave Name"> </td><td> <input type="number" class="form-control LeaveAmount" name="LeaveAmount[]" placeholder="Enter Leave Amount"></td> </tr></tbody> </table> <input type="button" class="btn btn-success addRow" onclick="add_row(' + index + '); " value=" + Add More Payroll Item"></form> </div><hr />');
$('.EmpTable').append(rows);
});
}
}
});
Code for appending the row containing the new text box to the form
function add_row(index) {
$rowno = $(".employee_table tr").length;
$rowno = $rowno + 1;
$(".employee_table" + index + " tr:last").after("<tr id= 'row" + $rowno + "' > <td><input type='text' class='form-control Leavename' name='Leavename[]' placeholder='Enter Leave Name'> </td><td> <input type='number' name='LeaveAmount[]' class='form-control LeaveAmount' placeholder='Enter Leave Amount'></td><td> <input type='button' value='x' onclick=delete_row('row" + $rowno + "') ><br></td></tr>");
}
Immediate help will be well appreciated.
EDIT: My loop logic that gave no value when looping through the text boxes of each form generated.
$('#saveAdj').click(function() {
$('form').each(function() {
var thisForm = this;
alert($('.EmpId', thisForm).val());
alert($('.Leavename', thisForm).val());
alert($('.LeaveAmount', thisForm).val());
});
})
Related
The following code will get the lowest value entered in first 3 columns, it is running fine. But after adding the row (Add Row) i am unable to get the lowest value from next 3 columns. Also i want to get the sum of all 3 lowest values from as much columns as user will add. Your kind help is required in this regard.
$(document).ready(function() {
var i = 1;
$("#Add_BDSP").click(function() {
$('#BDSP' + i).html("<td><input type='text' name='QuotedAmount1[" + i + "]' placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount2[" + i + "]'placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount3[" + i + "]' placeholder='Quoted Amount' class='form-control'/></td>");
$('#Tab_BDSP').append('<tr id="BDSP' + (i + 1) + '"></tr>');
i++;
});
$("#Delete_BDSP").click(function() {
if (i > 1) {
$("#BDSP" + (i - 1)).html('');
i--;
}
});
});
var input = $('[name="QuotedAmount1[0]"],[name="QuotedAmount2[0]"],[name="QuotedAmount3[0]"]'),
QuotedAmount1 = $('[name="QuotedAmount1[0]"]'),
QuotedAmount2 = $('[name="QuotedAmount2[0]"]'),
QuotedAmount3 = $('[name="QuotedAmount3[0]"]'),
MulRes = $('[name="ServiceTotalCost"]');
input.change(function() {
var Qoute1 = (isNaN(parseInt(QuotedAmount1.val()))) ? 0 : parseInt(QuotedAmount1.val());
var Qoute2 = (isNaN(parseInt(QuotedAmount2.val()))) ? 0 : parseInt(QuotedAmount2.val());
var Qoute3 = (isNaN(parseInt(QuotedAmount3.val()))) ? 0 : parseInt(QuotedAmount3.val());
MulRes.val(Math.min(Qoute1, Qoute2, Qoute3));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-float">
<table class="table table-bordered table-hover" id="Tab_BDSP">
<thead>
<tr>
<td>Amount</td>
</tr>
</thead>
<tbody>
<tr id='BDSP0'>
<td>
<input type="text" name='QuotedAmount1[0]' placeholder='Quoted Amount' class="form-control" required />
<input type="text" name='QuotedAmount2[0]' placeholder='Quoted Amount' class="form-control" required />
<input type="text" name='QuotedAmount3[0]' placeholder='Quoted Amount' class="form-control" required />
</td>
</tr>
<tr id='BDSP1'></tr>
</tbody>
</table>
</div>
<a id="Add_BDSP" class="btn btn-default pull-left">Add Row</a><a id='Delete_BDSP' class="pull-right btn btn-default">Delete Row</a>
</div>
<div class="col-md-4">
<div class="input-group form-group">
<span class="input-group-addon">
<i class="material-icons">business_center</i>
</span>
<div class="form-line">
<input type="number" class="form-control" name="ServiceTotalCost" id="ServiceTotalCost" required>
</div>
</div>
</div>
But after adding the row (Add Row) i am unable to get the lowest value
from next 3 columns
Your main problem is:
QuotedAmount1 = $('[name="QuotedAmount1[0]"]'),
QuotedAmount2 = $('[name="QuotedAmount2[0]"]'),
QuotedAmount3 = $('[name="QuotedAmount3[0]"]'),
Because you just select QuotedAmount1[0] to QuotedAmount3[0], after you append row new input has QuotedAmount1[1] .. , also you used change and for new row you need to use change with document selector, to get live change. And you should move your variable inside of change event. Important things is, you should select your input without name, here is working snippet:
$(document).ready(function() {
var i = 1;
$("#Add_BDSP").click(function() {
$('#BDSP' + i).html("<td><input type='text' name='QuotedAmount1[" + i + "]' placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount2[" + i + "]'placeholder='Quoted Amount' class='form-control' /><input type='text' name='QuotedAmount3[" + i + "]' placeholder='Quoted Amount' class='form-control'/></td>");
$('#Tab_BDSP').append('<tr id="BDSP' + (i + 1) + '"></tr>');
i++;
});
$("#Delete_BDSP").click(function() {
if (i > 1) {
$("#BDSP" + (i - 1)).html('');
i--;
}
});
});
$(document).on('change', '#Tab_BDSP tbody tr td input[type="text"]', function() {
let result = 0;
var MulRes = $('input#ServiceTotalCost');
var QuotedAmount1 = $(this).parent().find('input[type="text"]').eq(0),
QuotedAmount2 = $(this).parent().find('input[type="text"]').eq(1),
QuotedAmount3 = $(this).parent().find('input[type="text"]').eq(2);
var Qoute1 = (isNaN(parseInt(QuotedAmount1.val()))) ? 0 : parseInt(QuotedAmount1.val()),
Qoute2 = (isNaN(parseInt(QuotedAmount2.val()))) ? 0 : parseInt(QuotedAmount2.val()),
Qoute3 = (isNaN(parseInt(QuotedAmount3.val()))) ? 0 : parseInt(QuotedAmount3.val());
var min = Math.min(Qoute1, Qoute2, Qoute3);
$(this).parent().attr('data-lowest', min)
$('#Tab_BDSP tbody tr td').each(function() {
result += +$(this).attr('data-lowest')
});
MulRes.val(result)
});
Thank you for kind response,
the code is running perfect,
but the issue is if i change the value in additional rows,
it adds the lowest into the sum,
e.g. 1st row have 300000 400000 500000 and second row have 600000 700000 800000 The total sum will be 900000 which is perfect. but if i change the value from 600000 to 200000 it should shows 700000 but it gives value of 1100000. Your kind help is needed to rectify this issue in the given code. – ADIL I.T 8 mins ago
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-float">
<table class="table table-bordered table-hover" id="Tab_BDSP">
<thead>
<tr>
<td>Amount</td>
</tr>
</thead>
<tbody>
<tr id='BDSP0'>
<td>
<input type="text" name='QuotedAmount1[0]' placeholder='Quoted Amount' class="form-control" required />
<input type="text" name='QuotedAmount2[0]' placeholder='Quoted Amount' class="form-control" required />
<input type="text" name='QuotedAmount3[0]' placeholder='Quoted Amount' class="form-control" required />
</td>
</tr>
<tr id='BDSP1'></tr>
</tbody>
</table>
</div>
<a id="Add_BDSP" class="btn btn-default pull-left">Add Row</a><a id='Delete_BDSP' class="pull-right btn btn-default">Delete Row</a>
</div>
<div class="col-md-4">
<div class="input-group form-group">
<span class="input-group-addon">
<i class="material-icons">business_center</i>
</span>
<div class="form-line">
<input type="number" class="form-control" name="ServiceTotalCost" id="ServiceTotalCost" required>
</div>
</div>
</div>
Also i want to get the sum of all 3 lowest values from as much columns
as user will add
For get sum you need to get min and also old lowest value
This code works. I just made all of the script run separately so it worked.
$(".input0").keyup(function() {
var val10 = $("[name='a1[0]']").val();
var val20 = $("[name='a2[0]']").val();
var val30 = $("[name='a3[0]']").val();
var lowestValue0 = Math.min(val10, val20, val30);
$("[name='answer[0]']").val(lowestValue0);
$("[name='total']").val(lowestValue0);
});
$(document).keyup(function() {
var sum = "";
$('.inputClass').each(function() {
sum += this.value;
});
$("[name='total']").val(sum);
});
$(document).ready(function() {
var a = "1";
$(".add").click(function() {
$('<div class="valueDiv' + a + '"><input name="a1[' + a + ']" class="input' + a + '" placeholder="Value 1"><input name="a2[' + a + ']" class="input' + a + '" placeholder="Value 2"><input name="a3[' + a + ']" class="input' + a + '" placeholder="Value 3"><br><h5>Lowest Value = <\/h5><input name="answer[' + a + ']" class="inputClass" readonly placeholder="Lowest Value"><hr><\/div>').appendTo("#mainDiv");
$('#scripts').append('<script type="text/javascript" id="script' + a + '">$(".input' + a + '").keyup(function() { var val1' + a + ' = $("[name=\'a1[' + a + ']\']").val(); var val2' + a + ' = $("[name=\'a2[' + a + ']\']").val(); var val3' + a + ' = $("[name=\'a3[' + a + ']\']").val(); var lowestValue' + a + ' = Math.min(val1' + a + ', val2' + a + ', val3' + a + '); $("[name=\'answer[' + a + ']\']").val(lowestValue' + a + '); });<\/script>');
a++;
});
$(".delete").click(function() {
if (a > 1) {
$(".valueDiv" + (a - 1)).remove();
$("script" + (a - 1)).remove();
a--;
}
var sum = "";
$('.inputClass').each(function() {
sum += this.value;
});
$("[name='total']").val(sum);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div id="mainDiv" style="width: 100%; height: 100%; padding: 50px;">
<div class="valueDiv0">
<hr>
<input name="a1[0]" class="input0" placeholder="Value 1">
<input name="a2[0]" class="input0" placeholder="Value 2">
<input name="a3[0]" class="input0" placeholder="Value 3">
<br>
<h5>Lowest Value = </h5>
<input name="answer[0]" class="inputClass" readonly placeholder="Lowest Value">
<hr>
</div>
</div>
<div style="width: 100%; height: 100%; padding: 0px 50px;">
<h5>Sum of All Lowest Values</h5>
<input style="width: 230px;" name="total" readonly placeholder="Total Value of All Lowest Values">
</div>
<div id="scripts">
</div>
<br>
<div>
<button class="btn btn-primary add">Add Row</button>
<button class="btn btn-danger delete">Delete Row</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
I want to calculate sum of all totals in the below js fiddle, using the following code: http://jsfiddle.net/hEByw/7/
For reference i given the screenshot below. The total calculates the according to the qty*price dynamically. I want to add all totals and display as a grand total. Please anyone can help me regarding this. Thanks in advance
<script type='text/javascript'>
//<![CDATA[
$(window).load(function () {
var counter = 1;
$(document).ready(function () {
//To multiply two textbox values
$('#qty' + counter).keyup(calculate);
$(this).keyup(calculate);
function calculate(e) {
$('#total' + e.target.title).val($('#qty' + e.target.title).val() * $('#rates' + e.target.title).val());
}
$('#btnCalc').click(function () {
alert($('#qty').val());
});
$("#addButton").click(function () {
if (counter > 27) {
alert("Only 27 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>Product #' + counter + ' : </label>' +
'<input type="text" size="60" name="product[]" placeholder="Product"\n\
id="product' + counter + '" value="" title = ' + counter + ' > \n\
<label>Quantity #' + counter + ' : </label>' +
'<input type="text" size="2" title = ' + counter + ' name="qty[]" \n\
id="qty' + counter + '" value="" > \n\
<label>Rate #' + counter + ' : </label>' +
'<input type="text" title = ' + counter + ' size="2" name="rates[]"\n\
id="rates' + counter + '" value="" > \n\
<label>Total #' + counter + ' : </label>' +
'<input type="text" title = ' + counter + ' size="3" name="total[]" id="total' + counter + '" value="" class="txt" onchange="calculate();"> ');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if (counter == 0) {
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
});//]]>
</script>
<table>
<tr>
<td><strong>Select the products</strong>
<input type='button' value='Add Products' id='addButton'>
<input type='button' value='Remove Products' id='removeButton'>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div id='TextBoxesGroup'></div>
</td>
</tr>
<tr>
<td>
<input type="hidden" id="countervalue" name="countervalue" style="display:none;">
</td>
</tr>
</table>
Grand Total : <p id="inputSum"></p>
Check this solution
http://jsfiddle.net/mgc2f5xj/
added a function to get total of all items
function getTotal(){
var totals = document.getElementsByName("total[]");
var total = 0;
for (var i=0; i< totals.length; i++){
total+= Number(totals[i].value);
}
document.getElementById("inputSum").innerText = total;
}
<div class= "button">
<button id="More" type="submit">Add more Parameters</button>
<button id="Remove" type="submit">Remove Parameters</button>
</div>
<script>
var count = 2;
$('#More').click(function(){
if (count==11) {
}
else {
$("div2").append("<div class='fieldBlock'><fieldset><legend>Parameter " + count + "</legend><label >Parameter Name: </label><select type=text id='name" + count + "' name='name' ><option></option></select></br></br><label >Address: </label><select type=text id='address" + count + "' name='address' ><option></option></select></br></br><label >Data Size: </label> </br><select type=text id='size" + count + "' name='size' ><option></option></select> </select> </br> </br><label >Write Data: </label> </br><input type=text id='data" + count + "' name='data' style='width: 14em;'></br> </br></fieldset></div>");
count++;
}
});
$('#Remove').click(function(){
....
});
Can someone show me how if a user clicks on a remove button, the div that was appended can be removed? Also if user appends multiple times, I want the remove button to only remove one div at a time.
If you convert the id of Remove button to class, you may add the remove button to each new created div:
$(function () {
var count = 2;
$('#More').on('click', function(){
if (count==11) {
}
else {
$(".div2").append("<div class='fieldBlock'><fieldset><legend>Parameter " + count + "</legend><label >Parameter Name: </label><select type=text id='name" + count + "' name='name' ><option></option></select></br></br><label >Address: </label><select type=text id='address" + count + "' name='address' ><option></option></select></br></br><label >Data Size: </label> </br><select type=text id='size" + count + "' name='size' ><option></option></select> </select> </br> </br><label >Write Data: </label> </br><input type=text id='data" + count + "' name='data' style='width: 14em;'></br> </br><button class=\"Remove\" type=\"submit\">Remove Parameters</button></fieldset></div>");
count++;
}
});
$('#Last').on('click', function(){
$('div.fieldBlock:last').remove();
count--;
});
$(document).on('click', '.Remove', function(e){
$(this).closest('div.fieldBlock').remove();
count--;
});
});
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<div class="div2">
<div class= "button">
<button id="More" type="submit">Add more Parameters</button>
</div>
<div class= "button">
<button id="Last" type="submit">Remove last Parameters</button>
</div>
</div>
This code will remove the last appended div only.
I've created div with id (div2) where all the divs will be appended.
var count = 2;
$('#More').click(function(){
if (count==11) {
}
else {
$("#div2").append("<div class='fieldBlock'><fieldset><legend>Parameter " + count + "</legend><label >Parameter Name: </label><select type=text id='name" + count + "' name='name' ><option></option></select></br></br><label >Address: </label><select type=text id='address" + count + "' name='address' ><option></option></select></br></br><label >Data Size: </label> </br><select type=text id='size" + count + "' name='size' ><option></option></select> </select> </br> </br><label >Write Data: </label> </br><input type=text id='data" + count + "' name='data' style='width: 14em;'></br> </br></fieldset></div>");
count++;
}
});
$('#Remove').click(function(){
$('#div2').find('div').last().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class= "button">
<button id="More" type="submit">Add more Parameters</button>
<button id="Remove" type="submit">Remove Parameters</button>
</div>
<div id="div2"></div>
$(document).ready(function(){
$('body').on('click','div',function(){
$('div').removeAttr('current'); //removes attr from all divs
$(this).attr('current','true'); // adds attr to div clicked
})
$('body').on('click','#remove',function(){
$('current="true"').remove();//removes div with attr current='true'
})
});
I used the .on method to delegate the events since you are dynamically adding them.
I am building an expense template an am having an issue regarding using jQuery Calculations and click functionality to append a set of input fields.
I am combining twooncodes, one to calculate the sum of the values in input fields, and the other to Add a new row of input fields when the user clicks so (these are also to be added to the sum). Problem is, the sum is not adding to the total from the newly appended rows. Only the default row of fields adds.
Any help is appreciated (Fiddle ex: http://jsfiddle.net/NicoleScotsburn/o8x02sjh/4/ )
Appending table with inputs code:
//Increment Variables
var items = $('#items');
var i = $('#items td').size() + 1;
var mileage = $('#mileage');
var j = $('#mileage td').size() + 1;
//Append Table Rows
$('#addItem').on('click', function() {
$('<tr><td> <label for="date"><input type="text" id="date" size="10" name="date_' + i +'" value="" placeholder="mm/dd/yyyy" /></label></td>' +
'<td> <label for="desc"><input type="text" id="desc" size="30" name="desc_' + i +'" /></label></td>' +
'<td> $<label for="entmt"><input type="text" id="sum" size="10" name="entmt_' + i +'" placeholder="0.00" /></label></td>' +
'<td> $<label for="meals"><input type="text" id="sum" size="10" name="meals_' + i +'" placeholder="0.00" /></label></td>' +
'<td> $<label for="other"><input type="text" id="sum" size="10" name="other_' + i +'" placeholder="0.00" /></label></td>' +
'<td> $<label for="travel"><input type="text" id="sum" size="10" name="travel_' + i +'" placeholder="0.00" /></label></td>' +
'<td> $<label for="lodging"><input type="text" id="sum" size="10" name="lodging_' + i +'" placeholder="0.00" /></label></td>' +
'<td> $<label for="hst"><input type="text" id="sum" size="10" name="hst_' + i +'" placeholder="0.00" /></label></td>' +
'<td> Remove</td></tr>').appendTo(items);
i++;
return false;
});
$('#addMileage').on('click', function() {
$('<tr><td> <label for="mdate"><input type="text" id="mdate" size="10" name="mdate' + j +'" value="" placeholder="mm/dd/yyyy" /></label></td>' +
'<td> <label for="mlocation"><input type="text" id="mlocation" size="30" name="mlocation' + j +'" value="" placeholder="" /></label></td>' +
'<td> <label for="km"><input type="text" id="km" size="10" name="km' + j +'" value="" placeholder="" />KM</label></td>' +
'<td> Remove</td></tr>').appendTo(mileage);
j++;
return false;
});
//Remove Buttons
$('body').on('click', '#remItem', function() {
if( i > 2 ) {
$(this).parents('tr').remove();
i--;
}
return false;
});
$('body').on('click', '#remMileage', function() {
if( j > 2 ) {
$(this).parents('tr').remove();
j--;
}
return false;
});
Calculation function: (This works assuming the id of the input is id="sum" and gets outputted to another input called totalsum.
$("input[id^=sum]").sum("keyup", "#totalSum");
I am not familiar with jQuery Calculations, but it looks like what you are doing can be achieved using plain jQuery or javascript. I did a quick google search for jquery sum and I found this other stackoverflow post that might help you. stackoverflow sum
You can add a class attribute called "sum" to all the fields you want to sum up and use the jquery marked as the answer. Once you get done calculating the total you can assign it to the total amount input field.
$('.sum').blur(function () {
var sum = 0;
$('.sum').each(function() {
sum += Number($(this).val());
});
$("#totalsum").val(sum);
});
My structure is like this
Itemid
itemname
itemdescription
itemprice
itemquantity
totalamount.
In this structure I have function to calculate the total (price*quantity). I have a add row function that lets add a row and a Grantotal function(adding all the totals). All I need to have is delete function, I have tried deleting the rows in many things but it is not working.
Here is my code:
$(document).ready(function () {
var counter = 2;
$("#addButton").click(function () {
if (counter > 100) {
alert("Only 100 textboxes allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('tr'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<td class="first"><input placeholder="Item Code ' + counter + '" class="itmcode" type="text" name="data[' + counter + '][0]" id="itemcode' + counter + '" ></td>' + '<td><input class="itmname" placeholder="Item Name ' + counter + '" type="text" name="data[' + counter + '][1]" id="itemname' + counter + '" ></td>' + '<td><input class="itmdesc" placeholder="Item DESC' + counter + '" type="text" name="data[' + counter + '][2]" id="itemdesc' + counter + '" ></td>' + '<td><input class="itmamnt" placeholder="Item AMT' + counter + '" type="text" name="data[' + counter + '][3]" id="itemamnt' + counter + '" /></td>' + '<td><input class="itmqty" placeholder="Item QTY ' + counter + '" type="text" name="data[' + counter + '][4]" id="itemqty' + counter + '" /></td>' + '<td><input type="text" name="total' + counter + '" id="total' + counter + '" class="total" /></td><td><button class="del">Delete</button></td>');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$(document).on('keyup', '.itmqty', function (ev) {
// grab ID to get row number
thisID = $(this).attr("id");
rowNum = thisID.slice(-1);
//get Amount entered
amt = $('#itemamnt' + rowNum).val();
//get QTY
qty = $('#itemqty' + rowNum).val();
$('#total' + rowNum).val(amt * qty);
currentCount = counter - 1;
var tot = 0;
$('.total').each(function () {
tot += parseFloat($(this).val());
});
$('#running_total').val(tot);
});
//$('#total').val($('#itm-qty').val() * $('#itm-amnt').val());
});
('#TextBoxesGroup').on('click','.del', function(){
if(counter==2){
alert("No More Rows to Remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
// $('#TextBoxesGroup').on('click','.del', function(){
// $(this).parents('tr:eq(0)').remove();
// });
I have tried this code also:
$('#TextBoxesGroup').on('click','.del', function(){
$(this).parents('tr:eq(0)').remove();
});
HTML
<input type="button" id="addButton" value=" Add Row " />
<table id="TextBoxesGroup">
<tr>
<td>
<input id="itemcode1" placeholder="Item Code 1" class="itmcode" />
</td>
<td>
<input id="itemname1" placeholder="Item Name 1" />
</td>
<td>
<input id="itemdesc1" placeholder="Item Description 1" />
</td>
<td>
<input id="itemamnt1" placeholder="Item Amount 1" class="itmamnt" />
</td>
<td>
<input id="itemqty1" placeholder="Item Qty 1" class="itmqty" />
</td>
<td>
<input id="total1" placeholder="Item Total 1" class="total" />
</td>
<td><button class="del">Delete</button></td>
</tr>
</table>
<table>
<tr>
<td>Running Total</td>
<td>
<input name="running_total" id="running_total" />
</td>
</tr>
</table>
Please let me know what mistake I made and help me in getting this.
The fiddle link simplied. few mistake like ('#TextBoxesGroup) here no $ symbol.And brace are not well balanced.
Instead count variable you code will be obsolete so use $('#TextBoxesGroup tr').length.
1)
$('#TextBoxesGroup').on('click','.del', function(){
$(this).closest("tr").remove();
});
2) Runningtotal value refresh code snippet.
var tot1 = 0;
$('#TextBoxesGroup tr td input.total').each(function () {
tot1 += parseFloat($(this).val());
});
$('#running_total').val(tot1);
Working Fiddle Demo