Jquery聯系表單多次發送

Question

我正在嘗試創建一個jquery聯系表單，在單擊時發送ajax請求。

您可以訪問： http ： //childrensplaza.mn查看它，然后單擊“單擊此處與我們聯系按鈕”

在測試時，我點擊“發送查詢”后，成功消息顯示需要一段時間，我可以多次點擊它，導致我的消息被多次發送。

其代碼如下 - >

   <script>
    $(function(){
        $('#trigger').click(function(){
            $('#overlay').fadeIn(500);
            $('#form').fadeIn(500);
        });
        $('#overlay').click(function(){
            $('#form').fadeOut(500);
            $('#overlay').fadeOut(500);
        });
    });

    // Get the data from the form.  Check that everything is completed.
    $('#submit').click(function() {  
          var email = document.getElementById("email").value;
          var inquiry = document.getElementById("inquiry").value; 
          if( email == "" )
          {
            alert("Please enter your email.");
            return false;
          }
          if( inquiry == "" )
          {
            alert("Please enter your inquiry.");
            return false;
          }
        var dataString = 'email=' + email + '&inquiry=' + inquiry ; 
        //alert (dataString);return false;  
        $.ajax({  
          type: "POST",  
          url: "http://childrensplaza.mn/send.php",  
          data: dataString,  
          success: function() {  
           $('#success').fadeIn(500); 
          } 
        });  
        return false;  

    });
    </script> 

如何使第一次點擊顯示成功消息，並且我無法多次發送相同的請求？

Answer 1

這很容易通過在第一次提交時添加類來處理，並檢查是否應用了類來確定是否處理表單。 如果按鈕已經有類，請不要繼續處理。

      if ( $(this).hasClass("pressed") ) return false;
      $(this).addClass("pressed");

嵌入在您的代碼中：

   <script>
    $(function(){
        $('#trigger').click(function(){
            $('#overlay').fadeIn(500);
            $('#form').fadeIn(500);
        });
        $('#overlay').click(function(){
            $('#form').fadeOut(500);
            $('#overlay').fadeOut(500);
        });
    });

    // Get the data from the form.  Check that everything is completed.
    $('#submit').click(function() {  
          var email = document.getElementById("email").value;
          var inquiry = document.getElementById("inquiry").value; 
          if( email == "" )
          {
            alert("Please enter your email.");
            return false;
          }
          if( inquiry == "" )
          {
            alert("Please enter your inquiry.");
            return false;
          }

          if ( $(this).hasClass("pressed") ) return false;
          $(this).addClass("pressed");

        var dataString = 'email=' + email + '&inquiry=' + inquiry ; 
        //alert (dataString);return false;  
        $.ajax({  
          type: "POST",  
          url: "http://childrensplaza.mn/send.php",  
          data: dataString,  
          success: function() {  
           $('#success').fadeIn(500); 
          } 
        });  
        return false;  

    });
    </script> 

在成功執行ajax響應后，您可以通過重置類來更進一步。

           $('#success').fadeIn(500); $("#submit").removeClass("pressed");

Answer 2

你可以創建一個標志並用發送前的ajax事件來控制它並完成...

<script>
$(function(){
    $('#trigger').click(function(){
        $('#overlay').fadeIn(500);
        $('#form').fadeIn(500);
    });
    $('#overlay').click(function(){
        $('#form').fadeOut(500);
        $('#overlay').fadeOut(500);
    });
});
$('#submit').click(function() {  
var email = document.getElementById("email").value;
var inquiry = document.getElementById("inquiry").value; 
if( email == "" )
{
    alert("Please enter your email.");
    return false;
}
if( inquiry == "" )
{
    alert("Please enter your inquiry.");
    return false;
}
var dataString = 'email=' + email + '&inquiry=' + inquiry ;     
$.ajax({  
    type: "POST",  
    url: "http://childrensplaza.mn/send.php",  
    data: dataString,  

    beforeSend: function(xhr, opts){
        if($('#submit').hasClass("posting"))
            xhr.abort();
        else
            $('#submit').addClass("posting");
    },
    complete: function(){
        $('#submit').removeClass("posting");
    },
    success: function() {  
        $('#success').fadeIn(500); 
    } 
});  
return false;  

});
</script>