不允許多次提交表格

Question

我正在嘗試驗證Google Captcha和我的表單，該表單當前有效。 我正在使用JQuery表單和“無障礙驗證”。 問題是提交后，您仍然可以單擊多次提交表單。

有沒有辦法確保只發生一次？

我嘗試使用以下內容（在代碼中有注釋），但是您無法再次提交表單以重新檢查驗證碼：

if ($form.data('submitted') === true) { } else { }

JS：

$(document).ready(function () { 
    //Intercept Submit button in order to make ajax call instead of a postback
    $('#contactForm').preventDoubleSubmission();
});

// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function () {
    $("button").click('submit', function (e) {
        e.preventDefault();

        var $form = $("#contactForm");

        $($form).bind("invalid-form.validate", function() {
            if( $("invalid-form.validate") ) {
                formErrors();
            }
        })

        // if ($form.data('submitted') === true) {
            // // Previously submitted - don't submit again
        // } else {
            if ($form.valid()) {
                // Mark it so that the next submit can be ignored
                $form.data('submitted', true);
                if ( captchaCheck() == false) {
                    captchaCheck();
                } else {
                    // Make ajax call form submission
                    $.ajax({
                        url: $form.attr('action'),
                        type: 'POST',
                        cache: false,
                        data: $form.serialize(),
                        success: function (result) {
                            success();
                        }
                    });
                }   
            }
        // }        
    });

    // keep chainability
    return this;
};

function hover() {
  $(".contour-button").on("mouseenter", function() {
    return $(this).addClass("hover");
  });
}

function hoverOff() {
  $(".contour-button").on("mouseleave", function() {
    return $(this).removeClass("hover");
  });
}

function success() {
    $(".contour-button").addClass("success");
    var formFields = $(".contactForm input, .contactForm textarea, .contactForm button");
    $(formFields).attr('disabled', 'disabled');
    $(formFields).animate({'opacity':'0.5'});
    $(".contour-btn-arrow").addClass("contour-btn-success");
    $(".contour-button .submit").html("Thank you for your enquiry");
}

function formErrors() {
    $(".contour-button").addClass("form-errors").delay(3500).queue(function(){
        $(this).removeClass("form-errors").dequeue();
    });
    $(".contour-btn-arrow").addClass("contour-btn-error").delay(3500).queue(function(){
        $(this).removeClass("contour-btn-error").dequeue();
    });
    $(".contour-button .submit").html("There are errors on the form").delay(3500).queue(function(){
        $(this).html("Submit").dequeue();
    });
}

function captchaCheck() {
    var captchaResponse = grecaptcha.getResponse();
    if(captchaResponse.length == 0) {
        // html for the captcha error message
        var captchaMsgHtml = '<img src="/images/form-error-icon.png" /> Please check the captcha and try again';

        $("#captchaMsg").html(captchaMsgHtml).slideDown(500);
        $(".g-recaptcha div div").addClass("recaptchaHighlight");
        return false;
    } else {
        $(".g-recaptcha div div").removeClass("recaptchaHighlight")
        $("#captchaMsg").hide();
        return true;
    }
}

hover();
hoverOff();

Answer 1

您可以禁用點擊按鈕

var that = this;
$(that).attr("disabled", true);

后

e.preventDefault();

然后，如果需要，請在操作完成后啟用它

//probably after success()
$(that).attr("disabled", false);

希望這就是您所需要的！

Answer 2

對於初學者，如果您實際上使用的是帶有專用<submit>或<button type="submit">Submit</button>的<form> ，那么您應該在監聽on.('submit') ：

var allowSubmit = TRUE;

$('form').on('submit', function(e)
{
    if(allowSubmit === TRUE)
    {
        allowSubmit = FALSE;

        // Perform your validations + AJAX calls and make sure to set
        // allowSubmit = TRUE; wherever appropriate

        if(validationFails)
        {
            allowSubmit = TRUE;
        }
        else
        {
            $.ajax({
                url: $form.attr('action'),
                type: 'POST',
                cache: false,
                data: $form.serialize(),
                success: function (result) {
                    success();
                    allowSubmit = TRUE;
                },
                error: function() {
                    // Do some error handling

                    allowSubmit = TRUE;
                }
            });
        }
    }
    else
    {
        e.preventDefault();
    }
});

Answer 3

通過使用bool（true / false）將AJAX調用包裝在條件中，我設法以類似於MonkeyZeus的建議的方式解決了這個問題。

var ajaxRunning = false;

$("button").click('submit', function (e) {
    e.preventDefault();

    var $form = $("#contactForm");

    $($form).bind("invalid-form.validate", function() {
        if( $("invalid-form.validate") ) {
            formErrors();
        }
    })

    if ($form.valid()) {
        if ( captchaCheck() === false) {
            captchaCheck();
            formErrors();
        } else {
            if(!ajaxRunning){
            ajaxRunning = true;
                $.ajax({
                    url: $form.attr('action'),
                    type: 'POST',
                    cache: false,
                    data: $form.serialize(),
                    success: function (result) {
                        success();
                    },
                    error: function (result) {
                        captchaCheck();
                        formErrors();
                    }
                });
            }
        }   
    }       
});

function hover() {
  $(".contour-button").on("mouseenter", function() {
    return $(this).addClass("hover");
  });
}

function hoverOff() {
  $(".contour-button").on("mouseleave", function() {
    return $(this).removeClass("hover");
  });
}

function success() {
    var disabledElements = "#formFooter button, .contourField input, .contourField textarea";
    var opacityElements = ".contourField input, .contourField textarea";

    // disable button & inputs once submitted
    $(disabledElements).attr('disabled', 'disabled');

    // change opacity of elements
    $(opacityElements).animate({ 'opacity' : '0.5' });

    $(".contour-button").addClass("success");
    $(".contour-btn-arrow").addClass("contour-btn-success");
    $(".contour-button .submit").html("Thank you for your enquiry");
}

function formErrors() {
    $(".contour-button").addClass("form-errors").delay(3500).queue(function(){
        $(this).removeClass("form-errors").dequeue();
    });
    $(".contour-btn-arrow").addClass("contour-btn-error").delay(3500).queue(function(){
        $(this).removeClass("contour-btn-error").dequeue();
    });
    $(".contour-button .submit").html("There are errors on the form").delay(3500).queue(function(){
        $(this).html("Submit").dequeue();
    });
}

function captchaCheck() {
    var captchaResponse = grecaptcha.getResponse();
    if(captchaResponse.length == 0) {
        // html for the captcha error message
        var captchaMsgHtml = '<img src="/images/form-error-icon.png" /> Please check the captcha and try again';

        $("#captchaMsg").html(captchaMsgHtml).slideDown(500);
        $(".g-recaptcha div div").addClass("recaptchaHighlight");
        return false;
    } else {
        $(".g-recaptcha div div").removeClass("recaptchaHighlight")
        $("#captchaMsg").hide();
        return true;
    }
}

hover();
hoverOff();