Не допускайте отправки нескольких форм

Question

Я пытаюсь проверить Google Captcha и мою форму, которая в настоящее время работает. Я использую JQuery Forms и Validit Unobstructive. Проблема заключается в том, что после отправки вы можете отправить форму столько раз, сколько вы нажимаете.

Есть ли способ обеспечить это только один раз?

Я попытался с помощью следующих (с комментариями в коде), но тогда вы не можете отправить форму еще раз перепроверить капчу:

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

мне удалось решить эту проблему подобным образом внушению MonkeyZeus путем оборачивания AJAX вызывает условие, используя bool (true/false).

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

Answer 2

Вы могли бы отключить Clicked кнопку просто положить

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

после

e.preventDefault(); 

затем, если необходимо, включите его, когда операция завершается

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

Я надеюсь, что это то, что вам нужно!

Answer 3

Для начала, если вы на самом деле с помощью <form> с выделенным <submit> или <button type="submit">Submit</button>, то вы должны слушать для 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(); 
    } 
});