使用 jQuery 提交后清除表单

IT技术 javascript forms jquery
2021-03-22 17:59:05

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

<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>
6个回答

您可以将其添加到回调中 $.post

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

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

@IMLiviu 以下答案不符合此问题的需求。那是针对多阶段形式。此外，阅读更多链接说不要使用该代码，而是答案中提供的第二段代码。
2021-04-27 17:59:05
在实施之前先看看下一个答案。
2021-04-29 17:59:05
谢谢你这工作。我的错误是我没有意识到我把它放在了错误的位置。感谢您实际解释您的答案。
2021-05-06 17:59:05

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

$("#myform")[0].reset();
这里的 [0] 有什么用？
2021-04-26 17:59:05
使用 [0] 将返回本机 html 元素而不是 DOM。
2021-05-19 17:59:05

使用 jQuery 重置表单的更好方法只是表单上的trigger一个reset事件。

$("#btn1").click(function () {
        $("form").trigger("reset");
    });
一些细节来解释你在这里做什么将不胜感激。
2021-04-27 17:59:05

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

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

欲了解更多信息，请阅读本文

可能这会为你做。

 $('input').val('').removeAttr('checked').removeAttr('selected');
其它你可能感兴趣的问题
上一篇将 JSON 对象推送到 localStorage 中的数组 下一篇返回 AJAX 调用数据的 JavaScript 函数