JavaScript —提交值后清除表格

Question

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

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

这段代码确实清除了我的表单，但是在将信息发送到服务器之前就完成了。 我试过在窗体上作为onSubmit事件调用，在Submit按钮上作为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 Framework 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
}

来源： 提交后清除我的表单输入