Prevent AJAX form from submitting twice?

问题

I can't figure out why this AJAX form is processing and sending out an email twice. Is there some sort of obvious hickup in the code you can see causing this to occur?

HTML

<form class="submit-form" method="post">
<input type="url" class="content-link" name="content_link" placeholder="Link" />
<input type="email" class="email" name="email" placeholder="Your Email Address" />
<button class="submit-modal-button submit-button"><span>Send<span class="ss-icon">send</span></span></button>
<p class="terms">By clicking Submit you agree to our&nbsp;<a href="<?php echo home_url('terms-of-use'); ?>">Terms & Conditions</a></p>
</form>

JavaScript

    processSubmitModal : function () {
    var form = $('.submit-form'),
        content_link = $('.submit-form input[type="url"]'),
        email = $('.submit-form input[type="email"]'),
        viewport_size = $(window).width() + "x" + $(window).height(),
        user_browser = BrowserDetect.browser,
        user_os = BrowserDetect.OS,
        current_page = document.location.href;

    $('.submit-form input[type="url"],.submit-form input[type="email"]').blur(function () {
        if ($.trim($(this).val()) == '') {
            $(this).addClass('form-validation-error');
            return false;
        } else {
            $(this).removeClass('form-validation-error');
        }
    });

    form.submit(function () {
        if ($.trim(content_link.val()) == '' && $.trim(email.val()) == '') {
            content_link.addClass('form-validation-error');
            email.addClass('form-validation-error');
            return false;
        }
        else if ($.trim(content_link.val()) == '') {
            content_link.addClass('form-validation-error');
            return false;
        }
        else if ($.trim(email.val()) == '') {
            email.addClass('form-validation-error');
            return false;
        } else {
            var env = TTB.getEnvironment();

            $('.submit-modal-button').attr('disabled','disabled');
            $(document).ajaxStart(function () {
                $('.submit-modal .screen-1').delay(300).append('<span class="loading2"></span>');
            });
            $.ajax({
                url: env.submit_modal_process,                      
                type: 'POST',
                data: {
                    content_link: content_link.val(),
                    email: email.val(),
                    viewportsize: viewport_size,
                    browser: user_browser,
                    os: user_os,
                    current_page: current_page
                }, 
                success: function () {
                    $('.submit-modal .screen-1').delay(1000).fadeOut(300, function () { 
                        $('.submit-modal .screen-1').fadeOut(500, function () {
                            $('span.loading2').detach();

                            $('.submit-modal .screen-2').fadeIn(500, function () {
                                $('.submit-modal .screen-2').append('<img class="carlton" src=' + env.the_environment + TTB.config.image_path() + 'submit-modal-success.gif' + ' />');  
                            });

                            $('.submit-modal .screen-2').css('display','block').delay(4200).fadeOut(500, function () {
                                $('.carlton').hide();
                                $('.submit-modal .screen-1').fadeIn(500);   
                                content_link.val('');
                                email.val('');
                                content_link.focus();
                                email.removeClass('form-validation-error');
                                $('.submit-modal-button').removeAttr('disabled');
                            });
                        }); 
                    });                  
                }
            });
        return false;
        }
    });
}
   EXAMPLE.processSubmitModal();

回答1:

If to remove all non relevant to the issue code from your snippets we will get the following:

HTML

<form class="submit-form" method="post">
    <input type="url" name="content_link" />
    <input type="email" name="email" />
    <button>Send</button>
</form>

JavaScript

$(function() {
    var EXAMPLE = {
        processSubmitModal : function () {
            var form = $('.submit-form'),
                content_link = $('.submit-form input[type="url"]'),
                email = $('.submit-form input[type="email"]');

            form.submit(function () {
                $.ajax({
                    url: document.location.href,
                    type: 'POST',
                    data: {
                        content_link: content_link.val(),
                        email: email.val()
                    },
                    success: function () { // <-- The function that is executed twice
                        // Do something
                    }
                });
                return false;
            });
        }
    };
    EXAMPLE.processSubmitModal();

    // And somewhere in the code that was not presented in snippet...
    EXAMPLE.processSubmitModal();
});

I played around with your snippet and it always performs only one AJAX call and process email once except the only case - when somewhere in the code you call EXAMPLE.processSubmitModal() once again. Search in your code, I'm almost sure it is the reason. Pay attention that each time you call EXAMPLE.processSubmitModal() you add one another handler to submit event of the form and not override it.

回答2:

Try like this

form.submit(function (event) {

if(event.handled !== true)
  {
//put your ajax code

 event.handled = true;

}
return false;
});

Refernce

来源：https://stackoverflow.com/questions/16380375/prevent-ajax-form-from-submitting-twice