0

I have a number of fields to which I have added plus and minus buttons for the users to be able to increment the value.

These fields act as a 'quantity' field which has another input field above it with the price.

There is also another field which calculates the total of all the products selected and multiplies it by their quantity.

The problem I am having is that although the value in the input field is updating, it is not affecting the 'total' field. If however I manually type the input in with the keyboard, it works fine.

The code is as follows:

$('<span class="add" uk-icon="plus"></span>').insertAfter('.product-cotainer .product-quantity input');
    $('<span class="sub" uk-icon="minus"></span>').insertBefore('.product-cotainer .product-quantity input'); 


    //Add functinoality to + button
    $('.add').click(function () {
        if ($(this).prev().val() < 10) {
            $(this).prev().val(parseInt(+$(this).prev().val() + 1));
        }
    });
    //Add functinoality to - button
    $('.sub').click(function () {
        if ($(this).next().val() > 0) {
            if ($(this).next().val() > 0) 
            $(this).next().val(+$(this).next().val() - 1);
        }
    });
Ruben Kretek
  • 55
  • 1
  • 8
  • The issue is because when you programmatically set the value of an `input` no event is raised. You need to `trigger()` one manually – Rory McCrossan Jan 08 '20 at 08:39
  • Do I need to trigger the click event on $(this)? When I do that, it automatically adds the max value – Ruben Kretek Jan 08 '20 at 08:56
  • You need to trigger the event on whichever element is listening for it. You've not shown that part of the code so we can't give you an example. – Rory McCrossan Jan 08 '20 at 09:00

0 Answers0