防止AJAX表單提交兩次？

Question

我無法弄清楚為什么這個AJAX表單正在處理並發送兩次電子郵件。 代碼中是否存在某種明顯的hickup，你可以看到導致這種情況發生？

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

Answer 1

試試這樣吧

form.submit(function (event) {

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

 event.handled = true;

}
return false;
});

Refernce

Answer 2

如果要從您的代碼段中刪除與問題代碼無關的所有內容，我們將獲得以下內容：

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

我玩了你的代碼片段，除了唯一的情況外，它總是只執行一次AJAX調用並處理一次email - 當你在代碼中的某處再次調用EXAMPLE.processSubmitModal()時。 在你的代碼中搜索，我幾乎可以肯定這是原因。 請注意，每次調用EXAMPLE.processSubmitModal() ，都要添加另一個處理程序來submit表單事件而不是覆蓋它。