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元素本身）和fadeIn的「謝謝」元素上使用fadeOut。

實施例：

$("#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