Расчет входных полей

Question

У меня есть форма, у нее есть поля ввода для ящиков.

<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>

Когда я изменяю количество ящиков, например extrasmall на 1, я хотел бы показать итоговое число в общем количестве единиц поле ввода, и если есть, например, 1 extrasmall и 1 small, в поле единицы измерения будет введено число 2.

Вот моя попытка сделать это через 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>

Однако он говорит мне [объект HTMLInputElement] 00000NaN0 в поле общего количества единиц, кто-нибудь может мне помочь?

Answer 1

Вы также должны упростить свой код, используя -

$('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

Вы получаете значение пустых входных данных и приводите их к числам:

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

Впоследствии вы можете добавить чек для преобразования NaN в 0:

if (isNaN(tripleextralarge)) tripleextralarge = 0;

Существует определенно более аккуратный способ сделать это, но если это исправит вашу проблему. Вот рабочий пример: https://jsfiddle.net/qgjp58Lu/

Вы также можете сделать это как один вкладыш в ваших объявлениях что-то вроде:

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