0
我已经实现这个解决方案..Jquery/Javascript窗体帮助?
http://tutorialzine.com/2010/10/ajaxed-coming-soon-page/
然而,在提交,我想的形式消失,“谢谢”的文字显示。目前,该表单仍然存在,并且“谢谢”文本显示在文本框中。
我需要改变什么?
谢谢!
我已经实现这个解决方案..Jquery/Javascript窗体帮助?
http://tutorialzine.com/2010/10/ajaxed-coming-soon-page/
然而,在提交,我想的形式消失,“谢谢”的文字显示。目前,该表单仍然存在,并且“谢谢”文本显示在文本框中。
我需要改变什么?
谢谢!
<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>
基本上,您会在包含表单的元素(可能是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
});
尝试使用类似的代码:
form = document.getElementById('form')
当时$(form).hide()
– Jay 2011-03-14 06:31:06我添加了一个完整的例子 – 2011-03-14 06:32:39