jQueryUI spinner: iterate over inputs and sum values

Question

I have a huge order form with multiple inputs in each line (different variations per product).

I iterate over the inputs and sum up the values to get the total count of units of the product.

$('input', $tr).each(function() { // iterate over inputs
    units += Number($(this).val()) || 0; // parse and add value, if NaN then add 0
});

This works very well with normal inputs.

Because some products are only available in multiples of 10 (10 pieces, 20, 30, ...) I used the jQueryUI Spinner with the step option - so the user can only use the spinner to insert a valid value.

<input class="spinner" name="[ean-code] readonly>

var spinner = $('.spinner').spinner({
    min: 0,
    step: 5
});

Unfortunately this does not work with my code above and I have not found a way to fix it yet...

Any ideas how to go on..? Thank you!

Answer 1

This example with mixed normal inputs and spinners works fine for me.

Here the Javascript code:

$(function() {
    $(".spinner").spinner({
        min:0,
        step:5
    });

    $("#calculate").on("click", function() {
        var units = 0;

        $('input').each(function() {
            units += Number($(this).val()) || 0;
        });

        alert(units);
    });
});

And here the HTML code:

<input class="spinner" readonly>
<input type="text">
<button id="calculate">Sum values</button>

Are you sure is not that name="[ean-code] bit the one that is causing the issues? You are not closing the quotes there.