jQuery -- recalculateTotal - add and subtract Price on click event

Question

I'm jQuery's newbie so I go by trial and ask the more experienced help.

This is the part of the code

 click: function () { //Click event
  if (this.status() == 'available') { //optional seat
   var maxSeats = 3;
   var ms = sc.find('selected').length;
   //alert(ms);
   if (ms < maxSeats) {

                price = this.settings.data.price;

                /*
                    $('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+'</option>')
                    .attr('id', 'cart-item-'+this.settings.id)
                    .attr('value', (this.settings.row+1)+'_'+this.settings.label)
                    .data('seatId', this.settings.id)
                    .appendTo($cart);
                */

                    $('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+'</option>')
                    .attr('id', 'cart-item-'+this.settings.id)
                    .attr('value', this.settings.id)
                    .attr('alt', price)
                    .data('seatId', this.settings.id)
                    .appendTo($cart);

                $counter.text(sc.find('selected').length+1);
                $counter.attr('value', sc.find('selected').length+1);

                $total.text(recalculateTotal(sc));
                $total.attr('value', recalculateTotal(sc));

                return 'selected';
            }
                alert('You can only choose '+ maxSeats + ' seats.');
                return 'available';

        } else if (this.status() == 'selected') { //Checked

                //Update Number
                $counter.text(sc.find('selected').length-1);
                $counter.attr('value', sc.find('selected').length-1);
                //update totalnum
                $total.text(recalculateTotal(sc));
                $total.attr('value', recalculateTotal(sc));

                //Delete reservation
                $('#cart-item-'+this.settings.id).remove();
                //optional
                return 'available';

        } else if (this.status() == 'unavailable') { //sold
            return 'unavailable';

        } else {
            return this.style();
        }
    }
});

The problem in particular is in part related to the recalculation of the total

        $total.text(recalculateTotal(sc));
        $total.attr('value', recalculateTotal(sc));

in practice this function calculates the total price for each click on a map and recalculates it when the item (deselecting) is again clicked. When I click to select an item, the function calculates the total correctly, when I click again an item to deselect it, in the first de-selection (or click), the amount is not subtracted.

To be more concrete give you an example: If I select three items for the price of 10 euro each, with each click the total is updated correctly (10 + 10 + 10 = 30); When I deselect the three elements, when i do the first click the total is not updated while in the following click (deselection) the total is updated so it does not return = 0 but 10.

So, I find no element selected, but the total takes me 10!

I tried to include this change but the calculation is completely wrong

...........
...........
                $total.text(recalculateTotal(sc)+this.settings.data.price);
                $total.attr('value', recalculateTotal(sc)+this.settings.data.price);
                return 'selected';

            }

                alert('You can only choose '+ maxSeats + ' seats.');
                return 'available';

        } else if (this.status() == 'selected') { //Checked
......
......
                //update totalnum
                $total.text(recalculateTotal(sc)-this.settings.data.price);
                $total.attr('value', recalculateTotal(sc)-this.settings.data.price);

any suggestion will be appreciated

(Not really sure about the dupe, because relevant HTML code seems to be missing from question. But even if it is not checkboxes, but select fields, I think the issue is the same - `click` fires _before_ the actual change of the value/selection occurs; `change` is the event you want in such cases.) — CBroe, Mar 14 '17 at 12:21
If You look at this `$counter.text(sc.find('selected').length+1); $counter.attr('value', sc.find('selected').length+1);` and this ` $counter.text(sc.find('selected').length-1); $counter.attr('value', sc.find('selected').length-1);` you find that for counter the solution is add +1 and subtract -1. So find something like this — Giumazzi, Mar 14 '17 at 12:42

score 0 · Accepted Answer · answered Mar 14 '17 at 15:40

Here is THE SOLUTION

just move up

            //Delete reservation
            $('#cart-item-'+this.settings.id).remove();

before

            //update totalnum
            $total.text(recalculateTotal(sc));
            $total.attr('value', recalculateTotal(sc));

Here it is the complete correct code

    click: function () { //Click event
  if (this.status() == 'available') { //optional seat
   var maxSeats = 3;
   var ms = sc.find('selected').length;
   //alert(ms);
   if (ms < maxSeats) {

                price = this.settings.data.price;

                /*
                    $('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+'</option>')
                    .attr('id', 'cart-item-'+this.settings.id)
                    .attr('value', (this.settings.row+1)+'_'+this.settings.label)
                    .data('seatId', this.settings.id)
                    .appendTo($cart);
                */

                    $('<option selected>R'+(this.settings.row+1)+' S'+this.settings.label+'</option>')
                    .attr('id', 'cart-item-'+this.settings.id)
                    .attr('value', this.settings.id)
                    .attr('alt', price)
                    .data('seatId', this.settings.id)
                    .appendTo($cart);

                $counter.text(sc.find('selected').length+1);
                $counter.attr('value', sc.find('selected').length+1);

                $total.text(recalculateTotal(sc));
                $total.attr('value', recalculateTotal(sc));

                return 'selected';
            }
                alert('You can only choose '+ maxSeats + ' seats.');
                return 'available';

        } else if (this.status() == 'selected') { //Checked

                //Update Number
                $counter.text(sc.find('selected').length-1);
                $counter.attr('value', sc.find('selected').length-1);

                //Delete reservation
                $('#cart-item-'+this.settings.id).remove();

                //update totalnum
                $total.text(recalculateTotal(sc));
                $total.attr('value', recalculateTotal(sc));


                //optional
                return 'available';

        } else if (this.status() == 'unavailable') { //sold
            return 'unavailable';

        } else {
            return this.style();
        }
    }
});

jQuery -- recalculateTotal - add and subtract Price on click event

1 Answers1