提交时jQuery隐藏表单?

时间:2011-12-23 22:25:36

标签: javascript jquery forms form-submit

我有一个表单设置,用户可以在其中注册,并在提交时运行验证用户的PHP脚本,一旦完成,它会回显一个jQuery快速隐藏的消息框,然后在1的过程中淡入第二。我现在想做的是能够在提交时隐藏该表单,我认为这可能会这样做:

$(document).ready(function() {
    $('div.mainsuccess,div.mainerror').hide(0).fadeIn(1000);
    $('form.register').submit(function() {
        $(this).hide(1000);
    });
});

div.mainsuccess是成功消息,form.register是表单(带有一个寄存器类)。现在第一行工作,它告诉我正在调用脚本,但表单根本没有被隐藏。我在这里做了些蠢事,但我无法弄清楚是什么?

我试图查看submit()的jQuery API文档,但我无法理解所说的内容。谢谢。

4 个答案:

答案 0 :(得分:2)

试试这个:

$("form").submit(function(e){
    e.preventDefault();
    $(this).hide(1000);
});

答案 1 :(得分:2)

我认为它可能不起作用的原因是因为表单正在提交它的数据并等待页面刷新......这意味着它将停止所有它的javascript东西因为它没有意义......我可能是错的但是嘿,你的隐藏需要1秒才能隐藏,但你的页面可以更快地重新加载。

$(document).ready(function() {
    $('div.mainsuccess,div.mainerror').hide(0).fadeIn(1000);
    $('form.register').submit(function(e) {
        e.preventDefault();// will stop the form being submited...
        $(this).hide(1000);
        // do ajax here...
        return false;
    });
});

<强>更新

这是一个教程列表

http://viralpatel.net/blogs/2009/04/jquery-ajax-tutorial-example-ajax-jquery-development.html

http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/

http://www.sitepoint.com/ajax-jquery/

视频.... http://www.youtube.com/watch?v=0CMTQtnZ0G0

答案 2 :(得分:2)

你想要一个ajax调用(我正在发帖)来调用php而不是重新加载页面

$('form.register').submit(function(e) {
    e.preventDefault();
    url = $(this).attr('action');
    $.post(url,$(this).serialize(), function(data) {
        alert('success');
        // data will return source code of the URL so you can grab that data and put it somewhere on the script like so.
        $('#result').html($(data).find('form'));//form can be replaced with anything
        // #result is the id of an element you wish to return the info to 
    });
    $(this).hide(1000);
});

你已经完成了。

More info here

答案 3 :(得分:1)

好吧,似乎提交后表单会刷新,所以它仍然存在。

我建议使用jQuery格式:http://jquery.malsup.com/form/

阅读它,你会发现如何使用它,当它被提交时,它将不会刷新,并且使用hide()你将能够隐藏它。

N.B您需要在代码中引用jQuery来使用jQuery表单。

享受。