Jquery 문의 양식이 여러 번 전송됩니다.

Question

클릭하면 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> 

가

이 어떻게 성공 메시지가 첫 번째 클릭에 표시되도록 그것을 만들 것

, 나는 동일한 요청을 여러 번 보낼 수 없습니다입니다 -

그것을 위해 아래 코드는 무엇입니까?

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

당신은 ... 플래그를 생성하고 아약스 이벤트 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> 

또한 성공의 기능을 할 수 있도록 호출 후`pressed` 클래스를 제거 할 수 있습니다