jQuery getting back NaN and [object Object] from variables

Question

I have some problems getting my script to work. My script calculates the number of orders and the weight of each order. My form is actually created by javascript when pressed the "New Line" button. I am trying to make it so whenever 3 values (number of items, number of items in a box, number of boxes per order) are filled in, it automatically gives you the total number of orders. Also, when given the weight of a single item, it gives you the total weight of the order. All this happens on keyup using jquery. I need help only in the javaScript part. I handle my form with AJAX later on and everything worked but it broke when I tried to implement this.

Whenever I use alert() to see what values my code is assigning to the updateForm() function I get for alert($totalitems) -> [object Object] and alert($weightperpal) -> NaN. Could anybody help me solve this? Heres my code:

HTML:

JavaScript:

$("#addLine").click(function(e){
    e.preventDefault();
    lineNum++;

    var cont = ''+
        'Total # of items'+
        ''+
        ''+
        'Not mandatory'+
        ''+
        ''+
        ''+
        'Items per box'+
        ''+
        ''+
        '#'+
        ''+
        ''+
        ''+
        'Boxes per order'+
        ''+
        ''+
        '#'+
        ''+
        ''+
        ''+
        'Weight per Item'+
        ''+
        ''+
        '#'+
        ''+
        ''+
        ''+
        'Total number of Orders'+
        ''+
        ''+
        '# of pallets'+
        ''+
        ''+
        ''+
        'Weight per order'+
        ''+
        ''+
        'Total number of boxes'+
        ''+
        ''+
        '';

    $(document).on('keyup','.weightpiF',function(){
        var valueField = $(this).attr('no');
        updateFormRoe(valueField);
    });
    $(document).on('keyup','.weightppF',function(){
        var valueField = $(this).attr('no');
        updateFormRoe(valueField);

    });
    $(document).on('keyup','.itemspbF',function(){
        var valueField = $(this).attr('no');
        updateFormRoe(valueField);
    });
    $(document).on('keyup','.boxesppF',function(){
        var valueField = $(this).attr('no');
        updateFormRoe(valueField);
    });

    function updateFormRoe(number){
        alert(number);
        var $totalitems = $('#totalitF'+number);
        alert($totalitems);
        var $itemspb = $('#itemspbF'+number).val();

        var $boxespp = $('#boxesppF'+number).val();

        var $weightperitem = $('#weightpiF'+number).val();

        var $itemsinpallet = $itemspb * $boxespp;

        var $totalpals = $totalitems / $itemsinpallet;

        var $weightperpal = ($itemsinpallet) * $weightperitem;
        alert($weightperpal);
        if($totalitems !== '' && $itemspb !== '' && $boxespp !== ''){
            if($totalpals == Infinity){
                $('#palletsF'+number).val('0');
            }else{
                $('#palletsF'+number).val($totalpals);  
            }

            $('#weightppF'+number).val($weightperpal);
        }
    }

Thanks in advance!

Barmar · Accepted Answer

None of your selectors like $('#totalitF'+number) will work, because you're not appending numbers to your IDs. Instead of:

id="totalitF" no="'+ lineNum +'"/>'

it should be:

id="totalitF'+ lineNum +'" data-no="'+ lineNum +'"/>'

You shouldn't create your own attributes. If you want to add additional attributes to an element, use data- attributes. Then in jQuery you can access this as

$(this).data('no')

to get the value. Use this in your other functions in place of $(this).attr('no').

jQuery getting back NaN and [object Object] from variables

Answers (1)

Related Questions