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
}

来源：Clearing my form inputs after submission

JavaScript - 提交值后的清晰表单

2 个答案: