jQuery updating function with input change from JS

Question

I have a few functions and events in place that update invoice totals on change, paste, keyup and touchend which works great. However I have coded something that allows you to insert item data from a dropdown select and copies some things to input values however that does not update and now sure what changes I need to make for this to happen. Anyone have any ideas?

JSFiddle: http://jsfiddle.net/9m7q0mp8/ (if you click select product and add your see what I mean, it adds name and value, but I need it to update the subtotal and also the totals at bottom like it does, when you manually enter values in for an item).

JS:

$(document).on('click', ".item-select", function(e) {

        e.preventDefault;

        var product = $(this);

        $('#insert').modal({ backdrop: 'static', keyboard: false }).one('click', '#selected', function(e) {

            var itemText = $('#insert').find("option:selected").text();
            var itemValue = $('#insert').find("option:selected").val();

            $(product).closest('tr').find('#invoice_product').val(itemText);
            $(product).closest('tr').find('#invoice_product_price').val(itemValue);

            //updateTotals('#invoice_table');
            //calculateTotal();

        });

        return false;

    });

// add new product row on invoice
    var cloned = $('#invoice_table tr:last').clone();
    $(".add-row").click(function(e) {
        e.preventDefault();
        cloned.clone().appendTo('#invoice_table'); 
    });

    calculateTotal();

    $('#invoice_table').on('change keyup paste touchend', '.calculate', function() {
        updateTotals(this);
        calculateTotal();
    });

    $('#invoice_totals').on('change keyup paste touchend', '.calculate', function() {
        calculateTotal();
    });

    function updateTotals(elem) {

        var tr = $(elem).closest('tr'),
            quantity = $('[name="invoice_product_qty[]"]', tr).val(),
            price = $('[name="invoice_product_price[]"]', tr).val(),
            isPercent = $('[name="invoice_product_discount[]"]', tr).val().indexOf('%') > -1,
            percent = $.trim($('[name="invoice_product_discount[]"]', tr).val().replace('%', '')),
            subtotal = parseInt(quantity) * parseFloat(price);

        if(percent && $.isNumeric(percent) && percent !== 0) {
            if(isPercent){
                subtotal = subtotal - ((parseFloat(percent) / 100) * subtotal);
            } else {
                subtotal = subtotal - parseFloat(percent);
            }
        } else {
            $('[name="invoice_product_discount[]"]', tr).val('');
        }

        $('.calculate-sub', tr).val(subtotal.toFixed(2));
    }

    function calculateTotal() {

        var grandTotal = 0,
            disc = 0,
            c_ship = parseInt($('.calculate.shipping').val()) || 0;

        $('#invoice_table tbody tr').each(function() {
            var c_sbt = $('.calculate-sub', this).val(),
                quantity = $('[name="invoice_product_qty[]"]', this).val(),
                price = $('[name="invoice_product_price[]"]', this).val() || 0,
                subtotal = parseInt(quantity) * parseFloat(price);

            grandTotal += parseFloat(c_sbt);
            disc += subtotal - parseFloat(c_sbt);
        });

        // VAT, DISCOUNT, SHIPPING, TOTAL, SUBTOTAL:
        var subT = parseFloat(grandTotal),
            finalTotal = parseFloat(grandTotal + c_ship),
            vat = parseInt($('.invoice-vat').attr('data-vat-rate'));

        $('.invoice-sub-total').text(subT.toFixed(2));
        $('#invoice_subtotal').val(subT.toFixed(2));
        $('.invoice-discount').text(disc.toFixed(2));
        $('#invoice_discount').val(disc.toFixed(2));

        if($('.invoice-vat').attr('data-enable-vat') === '1') {

            if($('.invoice-vat').attr('data-vat-method') === '1') {
                $('.invoice-vat').text(((vat / 100) * subT).toFixed(2));
                $('#invoice_vat').val(((vat / 100) * subT).toFixed(2));
                $('.invoice-total').text((finalTotal).toFixed(2));
                $('#invoice_total').val((finalTotal).toFixed(2));
            } else {
                $('.invoice-vat').text(((vat / 100) * subT).toFixed(2));
                $('#invoice_vat').val(((vat / 100) * subT).toFixed(2));
                $('.invoice-total').text((finalTotal + ((vat / 100) * finalTotal)).toFixed(2));
                $('#invoice_total').val((finalTotal + ((vat / 100) * finalTotal)).toFixed(2));
            }
        } else {
            $('.invoice-total').text((finalTotal).toFixed(2));
            $('#invoice_total').val((finalTotal).toFixed(2));
        }

    }

I'm checking, however I have noticed that each time you add a new item you create an `input` with the same `id="invoice_product"` andthis is not fine. — Razorphyn, May 09 '15 at 09:53
Ahh that i do, ill update that to use a class instead, i did add input to that list but done nothing but let me try with just that. — James, May 09 '15 at 09:55
So i updated to what you suggested and does not seem to work still: http://jsfiddle.net/9m7q0mp8/1/ — James, May 09 '15 at 09:59

score 0 · Accepted Answer · edited May 23 '17 at 10:29

JSFIDDLE

The id problem is that it must be unique, this will not the solve problem but will prevent others, it an HTML rule (W3SCHOOLS Id description):

The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.

The input event should contain all the other events that you have listed alone, with some difference (input event answer):

Occurs when the text content of an element is changed through the user interface.

This was another problem: e.preventDefault;, you missed the parenthesis:e.preventDefault();

The real problem was that updateTotals(); was sending the wrong element identifier, this is the correct one:updateTotals('.calculate');

$(document).on('click', ".item-select", function (e) {
    e.preventDefault();
    var product = $(this);

    $('#insert').modal({backdrop: 'static',keyboard: false}).one('click', '#selected', function (e) {
        var itemText = $('#insert').find("option:selected").text();
        var itemValue = $('#insert').find("option:selected").val();

        $(product).closest('tr').find('#invoice_product').val(itemText);
        $(product).closest('tr').find('#invoice_product_price').val(itemValue);

         updateTotals('.calculate');
        calculateTotal();

    });

    return false;

});

Perfect thanks mate, knew was something a little more simple. Appreciate it! — James, May 09 '15 at 10:15

jQuery updating function with input change from JS

1 Answers1