JavaScript——提交值后清除表单

Question

我正在使用以下 JavaScript 代码来清除页面上的表单。

document.getElementById("bulletinForm").reset();

这段代码确实清除了我的表单，但它是在信息发送到服务器之前执行的。我尝试调用表单上的 onSubmit 事件和“提交”按钮上的 onClick 事件。在清除表格之前如何将信息发送到服务器？我目前没有使用任何 Ajax。我所拥有的只是一个看起来像这样的 Spring 表单。

<form:form commandName="bulletin" method="post" action="processBulletin">
    <table>
        <tr>
            <td>Name: <font style="font-weight: bold; color: red;">
            <c:out value='${nameRequired}' /></font><br /></td>
        </tr>
        <tr>
            <td><form:input path="name" id="name" maxlength="100" value="" /></td>
        </tr>
        <tr>
            <td>Subject: <font style="font-weight: bold; color: red;">
            <c:out value='${subjectRequired}' /></font><br /></td>
        </tr>
        <tr>
            <td><form:input path="subject" id="subject" maxlength="1000" value="" /></td>
        </tr>
        <tr>
            <td valign="top">Message: <font style="font-weight: bold; color: red;">
            <c:out value='${messageRequired}' /></font><br /></td>
        </tr>
        <tr>                            
            <td><form:textarea path="note" id="note" cols="80" rows="100" value="" /></td>
        </tr>
        <tr>
            <td><input type="submit" value="Submit bulletin" onClick="clearForm()"/></td>
        </tr>
    </table>
</form:form>

Answer 1

如果您在提交之前清除表单，您将不会获得任何数据。这也是应该预料到的。但是，您可以通过发送表单而不使用异步请求刷新站点来规避此问题。发送表单数据后，您可以重置表单。一种快速的方法是使用 Javascript 框架 jQuery:

$.ajax({
  type: 'POST',
  url: "url.html",
  data: $('#myForm').serialize(),
  success: function() {
    // This function is called after
    // sending the request successfully
    $('#myForm').trigger("reset");
  }
});

使用纯 JavaScript 发送 AJAX 请求有点复杂。