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