使用 jQuery 提交后清除表单答案

【问题标题】：Clear form after submission with jQuery使用 jQuery 提交后清除表单
【发布时间】：2012-01-31 21:00:49
【问题描述】：

刷新后清除此表单的最简单方法是什么。我尝试过的方式将清除表单但不会提交到数据库。其他人可以向我解释最好的方法吗？

<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($){
        $("#newsletterform").validate({
            debug: false,
            rules: {
                name: "required",
                email: {
                    required: true,
                    email: true
                }
            },
            messages: {
                name: "Please let us know who you are.",
                email: "A valid email will help us get in touch with you.",
            },
            submitHandler: function(form) {
                // do other stuff for a valid form
                $.post('newsletter.php', $("#newsletterform").serialize(), function(data) {
                    $('#results').html(data);
                });

            }

        });
    });

    </script>

</head>

<div id="content">
    <div id="newsletter-signup">
        <h1>Sign up for News, Updates, and Offers!</h1>
        <form id="newsletterform" action="" method="post">

            <fieldset>

                <ul>
                    <li>
                        <label for="name">Name:</label>
                        <input type="text" name="name" />
                    </li>
                    <li>
                        <label for="email">Email:</label>
                        <input type="text" name="email" />  
                    </li>
                        <div id="results"><div>
                    <li>
                        <input type="submit" value="submit" name="signup" onclick="" />         
                    </li>
                </ul>

            </fieldset>

        </form>         
    </div>
</div>
</html>

【问题讨论】：

标签： javascript forms jquery

【解决方案1】：

您可以将此添加到来自$.post 的回调中

$( '#newsletterform' ).each(function(){
    this.reset();
});

您不能只调用$( '#newsletterform' ).reset()，因为.reset() 是一个表单对象，而不是一个jquery 对象，或者类似的东西。你可以阅读更多关于它的信息here大约在页面的一半。

【讨论】：

感谢您的成功。我的错误是我没有意识到我把它放在了错误的位置。感谢您实际解释您的答案。
在实施之前先看看下一个答案。
@IMLiviu 下面的答案不符合这个问题的需要。那是一个多阶段的形式。此外，阅读更多链接说不要使用该代码，而是使用答案中提供的第二段代码。

【解决方案2】：

您可以使用以下方法重置表单：

$("#myform")[0].reset();

【讨论】：

这里的[0]有什么用？
使用 [0] 将返回原生 html 元素而不是 DOM。

【解决方案3】：

使用 jQuery 重置表单的更好方法是在表单上简单地 trigger reset 事件。

$("#btn1").click(function () {
        $("form").trigger("reset");
    });

【讨论】：

我们将不胜感激。

【解决方案4】：

在你的 post 方法回调函数中试试这个

$(':input','#myform')
 .not(':button, :submit, :reset, :hidden')
 .val('')
 .removeAttr('checked')
 .removeAttr('selected');

更多信息请阅读this

【讨论】：

【解决方案5】：

这可能会为你做到这一点。

 $('input').val('').removeAttr('checked').removeAttr('selected');

【讨论】：

【解决方案6】：

使用这个 jQuery 重置功能可以快速重置表单字段。 $(selector)[0].reset();

【讨论】：

【解决方案7】：

只需将它添加到您的 Action 文件中的某个 div 或 td 中，以便它带有传入的 XML 对象

    <script type="text/javascript">
    $("#formname").resetForm();
    </script>

其中“formname”是您要编辑的表单的 id

【讨论】：