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事件beforeSend和完全控制它...

<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>