Calculating field inputs

Question

I have a form, it has input fields for boxes.

<form action="" method="POST" id="registrationform">
            <div class="wrap__content">
                <div class="table1">

                    <label style="width: auto;">Brand</label>
                    <input style="width: 260px;" type="text" name="brand" value="" id="brand" required /></input>

                    <label style="width: auto;">Style</label>
                    <input style="width: 260px;" type="text" name="style" value="" id="style" required /></input>

                    <label style="width: auto;">Color</label>
                    <input style="width: 260px;" type="text" name="color" value="" id="color" required /></input>

                </div>
            </div>

            <br>
            <br>
            <br>
            <br>

            <div class="table2">
                <label>XS</label>
                <label>S</label>
                <label>M</label>
                <label>L</label>
                <label>XL</label>
                <label>XXL</label>
                <label>3XL</label>
                <label>OS</label>

                <input type="text" name="extrasmall" value="" id="extrasmall" required /></input>
                <input type="text" name="small" value="" id="small" required /></input>
                <input type="text" name="medium" value="" id="medium" required /></input>
                <input type="text" name="large" value="" id="large" required /></input>
                <input type="text" name="extralarge" value="" id="extralarge" required /></input>
                <input type="text" name="doubleextralarge" value="" id="doubleextralarge" required /></input>
                <input type="text" name="trippleextralarge" value="" id="trippleextralarge" required /></input>
                <input type="text" name="onesize" value="" id="onesize" required /></input>

            </div>

            <div class="table3">

                <br>

                <label>PO #</label>
                <input type="text" name="ponumber" value="" id="ponumber" required style="width: 180px;"></input>

                <label>TOTAL UNITS</label>
                <input type="text" name="totalunits" value="" id="totalunits" required style="width: 100px;"></input>

                <br>
                <br>

                <label>BOX </label>
                <input type="text" name="boxnumber" value="" id="boxnumber" required style="width: 76px;"></input>

                <label>OF </label>

                <input type="text" name="totalboxes" value="" id="totalboxes" required style="width: 76px;"></input>

                <label>WEIGHT </label>

                <input type="text" name="boxweight" value="" id="boxweight" required style="width: 130px;"></input>

      <button type="submit" sendMessage()>Submit</button>
            </div>

    </div>

    </form>

When I change the amount of box, for example extrasmall to 1, i'd like to show the final number in total units input field, and if there is for example 1 extrasmall and 1 small, it would input number 2 in the total unit field.

Here is my attempt to do it through jquery

<script type="text/javascript">
    $('input').keyup(function(){ 
    var extraSmall  = Number($('#extrasmall').val()); 
    var small = Number($('#small').val()); 
    var medium  = Number($('#medium').val());
    var large = Number($('#large').val());
    var extraLarge= Number($('#extralarge').val()); 
    var doublextralarge  = Number($('#doubleextralarge').val());
    var tripleextralarge = Number($('#triplextralarge').val());
    var onesize = Number($('#onesize').val());

    $('#totalunits').html(extraSmall + small + medium + large + extraLarge + doublextralarge + tripleextralarge + onesize); 
    document.getElementById('totalunits').value = extrasmall + small + medium + large + extraLarge + doublextralarge + tripleextralarge + onesize;

});
    </script>

However it tells me [object HTMLInputElement]00000NaN0 in the total units field, can somebody help me?

Answer 1

You should also simplify your code by using -

$('input').keyup(function(){ 
    var i = 0;
    $('input').each(function(){
        if (isNaN(parseInt($(this).val()))){ 
            parseInt($(this).val()) = 0;
        } 
        i = i + parseInt($(this).val());
        document.getElementById('totalunits').value = i;

    })
})

Answer 2

You're getting the value of empty inputs and casting them to numbers:

// val() returns undefined, casting undefined to a Number returns NaN
var tripleextralarge = Number($('#triplextralarge').val());

You can add in a check afterwards to convert NaN to 0:

if (isNaN(tripleextralarge)) tripleextralarge = 0;

There is definitely a more tidy way to do this, but if fixes your issue. Here is a working example: https://jsfiddle.net/qgjp58Lu/

You could also do it as a one liner in your declarations something like:

var tripleextralarge = (typeof $('#triplextralarge').val() === "undefined") ? 0 : Number($('#triplextralarge').val());