Question

我正在尝试创建一个jquery联系表单，在单击时发送ajax请求。

您可以访问：http://childrensplaza.mn查看，然后点击“点击此处与我们联系”按钮

在测试时，我点击“发送查询”后，显示成功消息需要一段时间，我可以多次点击它，导致我的消息被多次发送。

它的代码如下 - ＆gt;

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

Jquery联系表单多次发送

2 个答案: