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!
<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>
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
});
