输入值未添加到keyUp jQuery

Question

I have a running code snippet that dynamically adds input boxes to a form that is working so fine, however, am trying to get totals of the values from the input boxes but nothing seem to be working. The total area is only showing 0 but not giving me correct results.

Here is my code:

JAVASCRIPT TO DISPLAY THE TABLE WITH FORM

$(document).ready(function(){

 $(document).on('click', '.add', function(){
  var html = '';
  html += '<tr>';
  html += '<td><input type="text" name="item_name[]" class="form-control item_name" /></td>';
  html += '<td><input class="qty" type="text" value="0" data-cubics="500"/></td>';
  html += '<td><select name="item_unit[]" class="form-control item_unit"><option value="">Select Unit</option><?php echo fill_unit_select_box($connect); ?></select></td>';
  html += '<td width="33%"><span class="cubics"></span>';
  html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
  $('#item_table').append(html);
 });

JAVASCRIPT TO DO THE MATH

<script>
function total() {
    var total1 = 0;
    $('span.cubics').each(function () {
        var n = parseFloat($(this).text());
        total1 += isNaN(n) ? 0 : n;
    });
    $('.totalcubics').text(total1.toFixed(2));
}

$('input.qty').keyup(function () {
    var val = parseFloat($(this).val());
    val = (val ? val * $(this).data('cubics') : '');
    $(this).closest('td').next().find('span.cubics').text(val);
    total();
});

var $form = $('#insert_form'),
    $summands = $form.find('input.qty'),
    $sumDisplay = $('span#totalquantity');

$form.keyup(function () {
    var sum = 0;
    $summands.each(function () {
        var value = Number($(this).val());
        if (!isNaN(value)) sum += value;
    });

    $sumDisplay.text(sum);
});

$('input').on({
    focus: function () {
        if (this.value == '0') this.value = '';
    },
    blur: function () {
        if (this.value === '') this.value = '0';
    }
});
</script>

HTML CODE TO DISPLAY TOTALS

     <tr class="bg">
            <td width="33%">TOTAL</td>
            <td width="33%"><span id="totalquantity"></span>

            </td>
            <td width="33%"><span class="totalcubics"></span>

            </td>
        </tr>

Any assistance to my problem is highly appreciated

Answer 1

You need to recreate $summands each time you add a row to the table. Insert the line to do so after adding the row.

 $(document).ready(function() { $(document).on('click', '.add', function() { var html = ''; html += '<tr>'; html += '<td><input type="text" name="item_name[]" class="form-control item_name" /></td>'; html += '<td><input class="qty" type="text" value="0" data-cubics="500"/></td>'; html += '<td><select name="item_unit[]" class="form-control item_unit"><option value="">Select Unit</option><?php echo fill_unit_select_box($connect); ?></select></td>'; html += '<td width="33%"><span class="cubics"></span>'; html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>'; $('#item_table').append(html); $summands = $form.find('input.qty'); //*************** add this line }); function total() { var total1 = 0; $('span.cubics').each(function () { var n = parseFloat($(this).text()); total1 += isNaN(n) ? 0 : n; }); $('.totalcubics').text(total1.toFixed(2)); } $('input.qty').keyup(function () { var val = parseFloat($(this).val()); val = (val ? val * $(this).data('cubics') : ''); $(this).closest('td').next().find('span.cubics').text(val); total(); }); var $form = $('#insert_form'), $summands = $form.find('input.qty'), $sumDisplay = $('span#totalquantity'); $form.keyup(function () { var sum = 0; $summands.each(function () { var value = Number($(this).val()); if (!isNaN(value)) sum += value; }); $sumDisplay.text(sum); }); $('input').on( { focus: function () { if (this.value == '0') this.value = ''; }, blur: function () { if (this.value === '') this.value = '0'; } }); }); // end of document ready 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form id="insert_form" onsubmit="return false"> <table> <tr class="bg"> <td width="33%">TOTAL</td> <td width="33%"><span id="totalquantity"></span></td> <td width="33%"><span class="totalcubics"></span></td> </tr> </table> <button type="button" class="add">add</button> <table id="item_table"> </table> </form> 

At the moment you are creating summands collection with no elements, before any rows have been added.

Answer 2

I think your problem in

$(this).closest('td').next().find('span.cubics').text(val);

this mean go to the next td and find the span and there is no span in the next td .. you can use

$(this).closest('tr').find('span.cubics').text(val);

or

$(this).closest('td').next().next().find('span.cubics').text(val);

and while you append the row dynamically you need to use

$(document).on('keyup' , 'input.qty' , function () {

instead of

$('input.qty').keyup(function () {

Answer 3

With the help of @tracktor53, i managed to get a fix for my problem, below is my updated code;

    $(document).on('click', '.add', function(){
  var html = '';
  html += '<tr>';
  html += '<td><input type="text" name="item_name[]" class="form-control item_name" /></td>';
  html += '<td><select name="item_unit[]" class="form-control item_unit"><option value="">Select Unit</option><?php echo fill_unit_select_box($connect); ?></select></td>';
  html += '<td><input class="qty" type="text" value="0"/></td>';
  html += '<td width="33%"><span class="cubics"></span>';
  html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>';
 $('#item_table').append(html);
  $summands = $form.find('input.qty'); //***************  added this line
 });

And with @mohamed's help, this line $(this).closest('td').next().find('span.cubics').text(val); was looking for the next <td> which in actual sense, the next <td> was an input field but not the one with <span id='cubics'></span> so, i had to adjust that to this;

 html += '<td><input class="qty" type="text" value="0"/></td>';
  html += '<td width="33%"><span class="cubics"></span>';

Then after i had to use

$(document).on('keyup' , 'input.qty' , function () {

instead of

$('input.qty').keyup(function () {

Now everything is working fine only that i want to multiply select option values with qty input from this line;

html += '<td><select name="item_unit[]" class="form-control item_unit"><option value="">Select Unit</option><?php echo fill_unit_select_box($connect); ?></select></td>'

Any further assistance about this is highly welcome