jquery联系表格发送多次

我想创建一个jQuery联系表单，单击时发送ajax请求。jquery联系表格发送多次

您可以通过访问查看：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>

我将如何让这个成功的消息显示了在第一次点击，我不能够在同一请求多次发送？

来源

2014-01-20 Stepan Parunashvili

这很容易通过在第一次提交时添加一个类来处理，并检查该类是否被应用以确定是否处理该表单。如果该按钮已经有该类，则不要继续处理。

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

来源

2014-01-20 17:03:49

您可能还需要删除'pressed'类成功函数被调用，以允许后另一份提交。 – gcochard

刚刚补充说，GMTA :) –

啊，完美！谢谢Set Sail Media：D。将点击接受以9的方式回答。干杯! –

您可以创建一个标志，并与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>

来源

2014-01-20 17:18:19

另一个很好的解决方案 –

jquery联系表格发送多次

回答

相关问题