Form submit doesn't work on first click

Question

I was having issues with 'event bubbling' so am using the '.on' event to stop this, but now when I try and submit the form, it wont work until you click the submit button twice. i.e nothing happens on the first click.

I have tried everything I can find online.

Does anyone have any ideas how to fix this?

$(document).on('submit', '.status_update_shipped', function(e) {
    $('.status_update_shipped').ajaxForm({
        dataType: 'json',
        success: function(data) {
            if (data.success) {
                $('#order-alert').text('Order #'+data.entry_id+' set as shipped (moved to past orders)').fadeIn();
                setTimeout(function(){
                    $('#order-alert').fadeOut().text('');
                }, 5000);
                var wrapper = '.recent-order-item-'+data.entry_id;
                $(wrapper).hide();
            }
        }
    });
    e.preventDefault();
});

Answer 1

Calling .ajaxForm() is only initializing the Forms plugin, not doing the actual submission. You don't need to wrap it in an event handler because the plugin is taking care of everything automatically... capturing the click, blocking the default submit, and doing the ajax... otherwise, there's no point in using a plugin for this.

(You're needing to click twice because the first click is only initializing the plugin.)

Following the examples in the docs: http://malsup.com/jquery/form/

$(document).ready(function() {

    $('.status_update_shipped').ajaxForm({ 
        // your options
    });

});

Also, don't forget to include the Forms plugin after you've included jQuery.

<script src="http://malsup.github.com/jquery.form.js"></script>

Answer 2

This answer is to use "ajaxSubmit" instead of "ajaxForm"

http://malsup.com/jquery/form/#options-object

$(document).on('submit', '.status_update_shipped', function(e) {
    $('.status_update_shipped').ajaxSubmit({
        dataType: 'json',
        success: function(data) {
            if (data.success) {
                $('#order-alert').text('Order #'+data.entry_id+' set as shipped (moved to past orders)').fadeIn();
                setTimeout(function(){
                    $('#order-alert').fadeOut().text('');
                }, 5000);
                var wrapper = '.recent-order-item-'+data.entry_id;
                $(wrapper).hide();
            }
        }
    });

    e.preventDefault();
    return false;
});