CODEWITHSUNDEEP
jqueryajaxjquery-forms-plugin
user2889310
user2889310

Reputation: 87

Form submit doesn't work on first click

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();
});

Upvotes: 0

Views: 1036

Answers (2)

Alex Rubin
Alex Rubin

Reputation: 1

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;
});

Upvotes: 0

Sparky
Sparky

Reputation: 98718

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>

Upvotes: 3

Related Questions