Question

我有一个表单由一个单独的文件中的JQuery脚本处理，我想在用户点击提交后清除用户的输入。

$(document).ready(function() {
    var form = $('#assign_form'); // contact form
    var submit = $('#submit');  // submit button
    var alert = $('.alert'); // alert div for show alert message

    // form submit event
    form.on('submit', function(e) {
        e.preventDefault(); // prevent default form submit
        // sending ajax request through jQuery
        $.ajax({
            url: '/mySite/assign_form_submit.php', // form action url
            type: 'POST', // form submit method get/post
            dataType: 'html', // request type html/json/xml
            data: form.serialize(), // serialize form data 
            beforeSend: function() {
                alert.fadeOut();
                submit.html('Sending....'); // change submit button text
            },
            success: function(data) {
                alert.html("<p>The form assignment has been sent and you have been copied on the email.</p>").fadeIn(); // fade in response data
                form.trigger('reset'); // reset form
                submit.html('SUBMIT'); // reset submit button text
            },
            error: function(e) {
                console.log(e)
            }
        });
    });
});

我的HTML看起来像这样：

<form name="assign_form" id="assign_form" action="" method="post">

<input name="form_name" type="text">
<input name="email" type="text">

<div class="alert"></div>

<div id="submit_btn;">
    <button id="submit" type="submit">SUBMIT</button>
            &nbsp;&nbsp;&nbsp;&nbsp;
    <button id="reset" type="reset">CLEAR THE FORM</button>
</div>

当按下提交按钮时，JQuery很好地处理表单。它没有刷新页面（这是我想要的），但我无法清除表单。任何帮助将不胜感激。

Answer 1

将此添加到您的成功事件以重置表单

 $('#assign_form')[0].reset.click();

请注意，这仅适用于表单中有重置按钮的情况。如果您删除了重置按钮，则必须使用

 $('#assign_form')[0].reset();

Answer 2

尝试在表单上调用reset而不是触发重置事件

form[0].reset(); // reset form

提交后从引用文件中清除表单

2 个答案: