Onchange event is not triggered when the value of an input is changed

Question

I click the plus button the input value changes, but AJAX doesn't fire. AJAX fires only if I TYPE the input value manually.

How can I make it so AJAX fires when I click the plus/minus button?

<div class="eita">
    <h1>Quantidade:&nbsp;&nbsp;
        <button type="button" class="ui circular button" id="menos"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-5 -15 39 39">
                <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-12v-2h12v2z" />
            </svg></button>
        <div class="ui mini icon input focus">
            <input class="itemQty" value="<?= $row['qty'] ?>" type="text" style="padding-right: 8px; padding-left: 12px; width: 34px;" maxlength="1" disabled="">
            <input type="hidden" class="pid" value="<?= $row['id'] ?>">
            <input type="hidden" class="pprice" value="<?= $row['product_price'] ?>">
        </div>
        <button type="button" class="ui circular button" id="mais"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-5 -15 39 39">
                <path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z" />
            </svg></button>
    </h1>
    <div class="price">
        <span>R$ 79.90</span><span>R$ <?= number_format($row['product_price'], 2) ?></span>
    </div>
</div>
<script>
    //on.change event.
    $(function() {
        $('#mais').on('click', function() {
            var $quantidade = $(this).closest('h1').find('.itemQty');
            var currentVal = parseInt($quantidade.val());
            if (!isNaN(currentVal)) {
                $quantidade.val(currentVal + 1);
            }
        });
        $('#menos').on('click', function() {
            var $quantidade = $(this).closest('h1').find('.itemQty');
            var currentVal = parseInt($quantidade.val());
            if (!isNaN(currentVal) && currentVal > 0) {
                $quantidade.val(currentVal - 1);
            }
        });
    });
</script>

<script>
    //ajax.
    $(document).ready(function() {

        $(".itemQty").on('change', function() {
            var $el = $(this).closest('div');

            var pid = $el.find(".pid").val();
            var pprice = $el.find(".pprice").val();
            var qty = $el.find(".itemQty").val();
            console.log(qty);

            $.ajax({
                url: 'action.php',
                method: 'post',
                cache: false,
                data: {
                    qty: qty,
                    pid: pid,
                    pprice: pprice,
                },
                success: function(response) {
                    console.log(response);
                }
            });
        });

        load_cart_item_number();

        function load_cart_item_number() {
            $.ajax({
                url: 'action.php',
                method: 'get',
                data: {
                    cartItem: "cart-item"
                },
                success: function(response) {
                    $('.cart-item').html(response);
                }
            });
        }
    });
</script>

change/input events arent triggered by programmatic changes to value. You need to trigger them manually (or just execute the function/code directly) — Patrick Evans
– Patrick Evans, Commented Nov 25, 2019 at 20:44
"It looks like your post is mostly code; please add some more details." the question wizard says this for a reason, please try not to bypass it with repeated text. — Patrick Evans
– Patrick Evans, Commented Nov 25, 2019 at 20:54
Ok, but, How can I make it so AJAX fires when I click the plus/minus button? — Max
– Max, Commented Nov 25, 2019 at 20:57

Patrick Evans · Accepted Answer · 2019-11-25 21:12:44Z

1

You will need to trigger the event manually or directly call the same code that the change listener uses

Triggering

$quantidade.val(currentVal + 1);
$(".itemQty").trigger('change');

Call the same code directly

function sendUpdate(){
  /* code from change listener moved here */
}

$(".itemQty").on('change',sendUpdate);

//in button click events
quantidade.val(currentVal + 1);
sendUpate();

answered Nov 25, 2019 at 21:12

Patrick Evans

42.8k6 gold badges81 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Patrick Evans Over a year ago

If you want to just do the triggering route, just put the trigger(...) in both the button click handlers right after you set the value. For the other you would put the function somewhere in a common scope or in global, you would then change the on() call to the one i show. And the last part would go in both the click handlers

Collectives™ on Stack Overflow

Onchange event is not triggered when the value of an input is changed

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related