jQuery / Javascript表单帮助吗？

Question

I have implemented this solution..

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

However, on submit, I would like the form to disappear and the "thank you" text displayed. Currently, the form remains and the "thank you" text is displayed in the textbox.

What would I have to change?

Thank you!

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

Fundamentally, you'd use fadeOut on the element containing the form (perhaps the form element itself) and fadeIn on a "thank you" element.

Example:

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