Jquery contact form sends multiple times

Question

I'm trying to create a jquery contact form that sends an ajax request when clicked.

You can view it by visiting: http://childrensplaza.mn , and clicking the "click here to contact us button"

When testing this out though, After I click "send inquiry", it takes a while for the success message to show up, and I'm able to click it multiple times, causing my message to be sent multiple times.

The code for it is below ->

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

How would I make it so that the success message shows up on the first click, and I am not able to send the same request multiple times?

Answer 1

This is easy enough to handle by adding a class when submitted the first time, and checking if the class is applied to determine whether or not to process the form. If the button already has the class, do not continue to process.

      if ( $(this).hasClass("pressed") ) return false;
      $(this).addClass("pressed");

Embedded in your code:

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

You could take one step further by resetting the class after successful ajax response.

           $('#success').fadeIn(500); $("#submit").removeClass("pressed");

Answer 2

you can create a flag and control it with the ajax events beforeSend and complete ...

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