Updating the total when any of a set of spinners changes its value

Question

I'm new person who working on jQuery and I need your help.

$('.spinner-input, #flight-class').change(function() {
    var ap = parseInt($('#adult-passenger').val());
    var sp = parseInt($('#student-passenger').val());
    var cp = parseInt($('#child-passenger').val());
    var bp = parseInt($('#baby-passenger').val());
    var fc = $('#flight-class option:selected').text();

    var totalCount = ap + sp + cp + bp;
    $('#kisi-sayisi').val(totalCount + ' - ' + fc);
});

You can see my code in here

And working demo is here

So, here is the situtation: There is nothing bad about this code, its working normally when you click "number of people" in form. You can see, if you click minus or plus sign, form is updating itself. But when I look this code, I'm feeling like repeating myself.

When I tried turn this code to DRY format, i do this:

('.spinner-input, #flight-class').change(function() {
    var passengerId = parseInt($(this).val());
});

Now I get value of input. I need to get sum of values but I can't because something is missing here.

How can I DRY this code?

Answer 1

You can list the four types of input spinners in an array.

$('.spinner-input, #flight-class').change(function() {
    var ids = ['adult', 'student', 'child', 'baby'];
    var totalCount = ids.reduce((prev, id) => parseInt($(`#${id}-passenger`).val()) + prev , 0);
    var fc = $('#flight-class option:selected').text();

    $('#kisi-sayisi').val(totalCount + ' - ' + fc);
});

Answer 2

You could use a jQuery object to query all four of the spinners.

function sum(values) {
    return values.reduce(function (prev, next) { return prev + next; }, 0);
}

function inputToInt(input) {
    return parseInt($(input).val());
}

$('.spinner-input, #flight-class').change(function() {
    var passengerCounts = $('.passenger-list .spinner-input');
    var totalCount = sum(passengerCounts.toArray().map(inputToInt));

    var fc = $('#flight-class option:selected').text();

    $('#kisi-sayisi').val(totalCount + ' - ' + fc);
});