Calculation with Jquery

Question

(function ($) {

    "use strict";

    $(document).ready(function () {

        $('.bookinginput').on('change', function(){

            var adults = $('#t_adults_qty').val(),
                    child =  $('#t_children_qty').val(),
                    pickup = $('#pick_up_list').val(),
                    priceBase = priceBooking.adult * adults,
                    priceChild = priceBooking.child * child;

            var price = priceBase + priceChild

            $('#price_total').val(price);
        })

    });
}(jQuery));

I will explain my code a bit, basically it is a small mathematical calculation based on the value of the inputs.

I have a json with the variable priceBooking, which has two values (Adult and Child), and I have several inputs with the numbers of the (adults and children).

I simply calculate the number of (Adults for the Adult price) the same with the children.

and the result I put it in the value of another hidden input (#price_total)

I would like to simplify this code or improve it. I want to be able to work with variables globally and not have to duplicate code.

Any suggestions?

Answer 1

[1] Try to separate responsibilities.
Functions are things that can be (mostly) separated in three parts:

Input -> Processing -> Output

If you can, you should try to write functions that follow this logic. If one day someone need to change from where the data comes its easy to what needs to be changed and where its is used;

[2] Make clear of what type is each variable
In JavaScript you don't need to specify the type of each variable so its the job of the programmer figure out what the type is.

When you see a variable called adults, you imagine that this variable hold a list of adults, but that is not the case in your code so you should name it as something like number_of_adults or adults_quantity to make its content obvious.

So following my suggestions your code would be something like;

(function ($) {
    "use strict";
    $(document).ready(function () {
        $('.bookinginput').on('change', function(){

            // "Input" <-- without the commentary, it here just to exemplify
            var number_of_adults = $('#t_adults_qty').val();
            var number_of_children = $('#t_children_qty').val();
            var pickup = $('#pick_up_list').val();

            // "Processing"
            var priceBase = priceBooking.adult * number_of_adults,
            var priceChild = priceBooking.child * number_of_children;
            var price = priceBase + priceChild

            // "Output"
            $('#price_total').val(price);
        })

    });
}(jQuery));

Answer 2

pickup is defined, but never used.

You should terminate your statements with semicolons consistently.