jQuery Ajax when using dynamic inputs

Question

I have inputs which are dynamically created and I'm attempting to submit their value using onBlur. I'm still new to jQuery and AJAX, could someone explain to me why the function isn't being called?

Input:

<input type="text" class="quantity" onblur="updateQuantity()" name="quantity[]"/>

Script:

<script>
    function updateQuantity() {

        $(".quantity").blur(function(){
            var quantityValue = $(this).val();
            $.ajax({
                url: "pages/inventory_request_action.php",
                cache: false,
                type: 'POST',
                data: quantityValue,
                success: function(data) {
                    // do something
                }
            });
        });
    }
</script>

foxygen · Accepted Answer · 2015-01-02 22:38:36Z

You are registering the blur event listener twice (Once in the onblur attribute on your input element, and another in the updateQuantity function). So what's really happening is once the input is blurred, you aren't actually calling the ajax function, but are instead adding another event listener..

So, remove on onblur="updateQuantity()" from your input element since you are adding the same listener via jquery, and rearrange the logic in your updateQuantity function so that it only makes the ajax call, and doesn't worry about adding event listeners.

http://jsfiddle.net/xvtp3vrd/

HTML

<input type="text" class="quantity" name="quantity[]"/>

Javascript

function updateQuantity(quantityValue){

    alert('submitting quantityValue: ' + quantityValue);
    $.ajax({
        url: "pages/inventory_request_action.php",
        cache: false,
        type: 'POST',
        data: {quantityValue: quantityValue},
        success: function(data) {

        }
    });
}

$('.quantity').blur(function(){

    var val = $(this).val();
    updateQuantity(val);
});

Collectives™ on Stack Overflow

jQuery Ajax when using dynamic inputs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related