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 请求有点复杂。

Answer 2

您可以尝试在 Javascript 中手动提交您的表单，将输入类型从提交更改为按钮，然后您可以得到如下内容：

function onSubmit() {
  document.getElementById("bulletinForm").submit();
  document.getElementById("bulletinForm").reset();
  return false; //stop page refresh
}

来源：Clearing my form inputs after submission

JavaScript -- 提交值后清空表单

JavaScript -- clear form after values are submitted

javascript

spring