Jquery联系表单多次发送

时间:2014-01-20 17:01:20

标签: javascript jquery

我正在尝试创建一个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> 

如何在第一次点击时显示成功消息,并且我无法多次发送相同的请求?

2 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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