양식 제출 계속 루프 반복

Question

PHere가 발생해야하는 상황입니다. 버튼 클릭시

버튼 클릭시 제출이 비활성화됩니다. 텍스트 스왑이 실행됩니다. 텍스트 스왑이 완료되면 cancel의 var는 false로 전환 한 다음 양식을 제출합니다.

form.submit()이 실행되면 루프가 발생하고 텍스트가 계속해서 페이드 인 및 페이드 아웃됩니다. 또한 양식을 제출하지 않습니다.

<script type="text/javascript"> 
    var cancel = true; 

    $("#btn-submit").click(

    function() { 
     if (cancel == true) { 
      $('form').on('submit', function (ev) { 
       ev.preventDefault(); 
       form = $(".submit-form"); 
       fp = $('#free-planner'); 
       fp.fadeOut(350, function() { 
        fp.text('Check your email!'); 
       }); 
       fp.fadeIn(350, function() { 
        cancel = false; 
        if (cancel == false) { 
         form.submit(); 
        } 
       }); 
      }); 

     } 
    }); 
</script> 

Answer 1

취소 변수를 false로 설정하여 반복문을 생성 한 다음 false로 표시되면 양식을 제출하십시오.

는 다음과 같은 시도 :

var cancel = true; 

$("#btn-submit").click(function() { 
    if (cancel == true) { 
     form = $(".submit-form"); 
     fp = $('#free-planner'); 
     fp.fadeOut(350, function() { 
      fp.text('Check your email!'); 
     }); 
     fp.fadeIn(350, function() {          
      if (cancel == true) { 
       cancel = false;   
       form.submit();      
      }     
     }); 
    } 
}); 

이 변수가 사실 원래 상태의에서 수정되지 않은 취소 여부를 확인하기 위해 약간 논리를 수정 한 후 거짓으로 상태를 수정 한 다음 양식을 제출합니다. 이 양식은 한 번만 제출됩니다. 또한

, btn-submit은 제출 버튼 다음이 변화를 만드는 것은 당신이 자체가 역할을하기위한 것입니다 버튼으로 태그의 onsubmit 이벤트에 리스너를 추가 할 필요가 없습니다 것을 의미 submit 대신 button에 입력 유형을 변경하는 경우 제출 이벤트 또한 form.submit()으로 트리거 될 때까지 이벤트가 발생하지 않으므로 이벤트에 preventDefault()을 호출 할 필요가 없습니다.