jQuery在提交时隐藏表单？答案

【问题标题】：jQuery hide form on submit?jQuery在提交时隐藏表单？
【发布时间】：2011-12-23 22:25:35
【问题描述】：

我有一个表单设置，用户可以在其中注册，并在提交时运行一个 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 文档，但我无法理解其内容。谢谢。

【问题讨论】：

我不确定.hide(0) 是否正常工作。为什么不直接使用.hide() 立即隐藏？
它确实可以正常工作，我的问题是为什么第二行和第三行不起作用？（涉及表格的部分）
提交表单后网页是否刷新？如果是这样，表单不会隐藏，因为页面会刷新 DOM。
@Indranil 实际上，是的，这很有意义。我该如何解决这个问题？
添加了一个答案，看看是否有帮助。

标签： javascript jquery forms form-submit

【解决方案1】：

我认为它可能不起作用的原因是因为表单正在提交它的数据并等待页面刷新......这意味着，它将停止所有的 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

【讨论】：

对，返回false是关键。
听起来不错，我理解这个前提，但如果它打到我脸上我就不会知道 AJAX！
将 ajax 视为一个不可见的 iframe 或窗口，您可以发送 $_POST [在 php 或其他服务器端] 信息，然后它将返回源代码返回该页面上您希望使用的任何内容，使用 firebug 或开发人员chrome 等工具可以让您查看返回的内容，如果您想了解更多信息，我可以在 stackoverflow 上建立一个聊天室并指导您这样做
您能否将我链接到类似于我想在这里完成的 AJAX 教程 - 我担心 AJAX 将如何与我已经编码的 PHP 交互 - 在提交时（重新加载页面），注册用户。
@Antilogical13 这里更新了一些链接和一个视频，这家伙听起来不错 :) 它是为初学者准备的，希望它对伴侣有所帮助

【解决方案2】：

试试这个：

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

【讨论】：

我也认为这是要走的路。
该死的，你偷了我的风头哈哈哈 :)
顺便说一句，它的 e.preventDefault() 作为一个可调用函数而不是一个属性
@Val，只是在最后用括号尝试了它，它所做的只是隐藏我的表单而没有提交，我想这是该脚本的意图，但不适用于什么我需要。
@Antilogical13：那你可能想使用 Indranill 的方法。他隐藏了它，但仍然提交了表单。

【解决方案3】：

你想合并一个 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

【讨论】：

我喜欢你的回答，也许你应该通过帮助如何使用返回的数据变量来扩展它，我会为你更新这个
是的。但我想这主要取决于 OP 想要对数据做什么。

【解决方案4】：

嗯，好像提交后表单刷新了，所以还在。

我建议使用类似 jQuery 的表单：http://jquery.malsup.com/form/

读一读你会发现如何使用它，提交时它不会刷新，使用hide()你可以隐藏它。

注意，您需要在代码中引用 jQuery 才能使用 jQuery 表单。

享受吧。

【讨论】：