How to detect change in ajax when changing the values from the increase and decrease buttons?-CodePudding

When I change the input field values manually without the ajax buttons or the code detects the change and updates the data without any problem.

The only problem that I present is with the increase and decrease buttons that ajax does not detect the change of the input field values after being modified from the buttons, it does not update the data.

This is my complete code, I have commented the ajax thing to make the buttons work here in SO.

$(function() {
    $('.min').click(function(){
        var currentVal = parseInt($(this).siblings(".quantity").val());
        if (currentVal != 1) {
            $(this).siblings(".quantity").val(currentVal - 1);
        }
    });
    $('.plus').click(function(){
        var currentVal = parseInt($(this).siblings(".quantity").val());
        $(this).siblings(".quantity").val(currentVal   1);
    });
    /*$(document).ajaxStop(function(){

        $('.min').click(function(){
            var currentVal = parseInt($(this).siblings(".quantity").val());
            if (currentVal != 1) {
                $(this).siblings(".quantity").val(currentVal - 1);
            }
        });
        $('.plus').click(function(){
            var currentVal = parseInt($(this).siblings(".quantity").val());
            $(this).siblings(".quantity").val(currentVal   1);
        });

        $(this).find('.quantity').keyup(function(evt) {
            evt.preventDefault();

            var formData = [];
            $('input[name^="qtyupdate"]').each(function() {
                formData.push(this.value);
            });
            var formData = $(this).serializeArray();

            var url = "item_cart.php";
            $.ajax({
                url: url,
                type: "POST",
                data: formData,
                cache: false,
            })
            .done(function(data) {
                let res = JSON.parse(data);
                if(res.status){
                    $("#wrapp-basket").load(" #wrapp-basket").fadeIn('slow');
                    $("#qty").load(" #qty").fadeIn('slow');
                    $('.alert-success').fadeIn();
                    $('.alert-success').html(res.message).delay(2000).fadeOut(2000);
                } else {
                    $('.alert-danger').fadeIn();
                    $('.alert-danger').html(res.message).delay(2000).fadeOut(2000);
                }
            })
            .fail(function( jqXHR, textStatus ) {
                console.log(jqXHR.responseText);
                console.log("Request failed: "   textStatus );
            })
        });
    });*/
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="bsk-quantity">
    <input type="text"
        name="qtyupdate[1][color-blue][XXL]"
        value="1"
        class="quantity"
        autocomplete="off"
        data-validation="number"
        data-validation-allowing="float">
    <input type="button" value=" " class="plus">
    <input type="button" value="-" class="min">
</div>
<div class="bsk-quantity">
    <input type="text"
        name="qtyupdate[1][color-red][XL]"
        value="1"
        class="quantity"
        autocomplete="off"
        data-validation="number"
        data-validation-allowing="float">
    <input type="button" value=" " class="plus">
    <input type="button" value="-" class="min">
</div>

So what changes do I need to add to make the changes in ajax work both manually as well as the increase and decrease buttons?

CodePudding user response：

You can use trigger(eventName) on the input so it performs the same ajax as when user triggers the event manually

Simplified example:

$('.btn-increment').click(function() {
  const $btn = $(this),
    isPlus = $btn.hasClass('plus'),
    $qty = $(this).siblings(".quantity");

  let currVal =  $qty.val();

  const newVal = isPlus ?   currVal : currVal > 1 ? --currVal : currVal;

  $qty.val(newVal).trigger('input');

});


$('.quantity').on('input', function(evt) {
  console.clear()
  console.log('Do ajax value = ', this.value);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="bsk-quantity">
  <input type="text" name="qtyupdate[1][color-blue][XXL]" value="1" class="quantity" autocomplete="off" data-validation="number" data-validation-allowing="float">
  <input type="button" value=" " class="btn-increment plus">
  <input type="button" value="-" class="btn-increment min">
</div>
<div class="bsk-quantity">
  <input type="text" name="qtyupdate[1][color-red][XL]" value="1" class="quantity" autocomplete="off" data-validation="number" data-validation-allowing="float">
  <input type="button" value=" " class="btn-increment plus">
  <input type="button" value="-" class="btn-increment min">
</div>