Jquery/Javascript 양식 도움이 필요하십니까? 제출에 나는이 솔루션을 구현 한

Question

..

http://tutorialzine.com/2010/10/ajaxed-coming-soon-page/

그러나, 나는 양식이 사라 싶습니다과 텍스트 표시 "감사합니다". 현재 양식이 그대로 유지되고 "감사합니다"텍스트가 텍스트 상자에 표시됩니다.

무엇을 변경해야합니까?

감사합니다.

Answer 1

<script type="text/javascript"> 

    function submitandhide(){ 

     $("#form").hide(); 
     /** 

      send you ajax request and on success 
      show thank you message 

     **/ 


     $("#thankyou").show(); 
    } 
</script> 

<form id="form">  
    <input type="text" /> 
    <input type="submit" onclick="submitandhide(); return false;"/> 
</form> 
<div style="display:none" id="thankyou"> 
    THANK YOU 
</div> 

Answer 2

기본적으로 양식을 포함하는 요소 (아마도 form 요소 자체)에 fadeOut을 사용하고 "감사합니다"요소에는 fadeIn을 사용합니다.

예 : 같은 코드를 사용하는

$("#theForm").submit(function() { 
    var form = $(this); 

    // You'd do your `ajax` call here; I'll use `setTimeout` 
    // instead just to emulate the asynchronous nature of 
    // the `ajax` call 
    setTimeout(function() { 
    // This function would be your `success` callback 
    form.fadeOut("fast", function() { 
     // This is the callback when the `fadeOut` is complete; fade in the "thanks" 
     var thanks = $("<p>Thank you!</p>"); 
     thanks.hide(); 
     form.replaceWith(thanks); 
     thanks.fadeIn("fast"); 
    }); 
    }); 

    return false; // Prevent form submission 
}); 

Live copy