JavaScript -- 提交值后清除表单答案

【问题标题】：JavaScript -- clear form after values are submittedJavaScript -- 提交值后清除表单
【发布时间】：2015-01-03 01:03:18
【问题描述】：

我正在使用以下 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>

【问题讨论】：

您的表单是异步提交的吗？在您的 AJAX 请求响应后重置表单。
.reset() 将清除某些浏览器中的表单，而不是其他浏览器。您可以运行formElement.elements 集合，将'' 分配给.value 以清除每一个。请记住，这也会清除您的按钮值，因此您需要考虑这一点。另外，使用 AJAX。
@PHPglue 但是在提交之前还是会这样，所以并不能解决问题。
不使用AJAX提交为什么还要清空表单？正常的表单提交会重新加载页面。
显示与提交/重置相关的其余代码。

标签： javascript spring

【解决方案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 请求有点复杂。

【讨论】：

你冷也重置了beforeSend:中的表格，这样在等待回复的时候就会被清空。
此表单是 Spring 表单。我将其发送到 Spring 控制器中的方法。在这种情况下，URL 会是什么样子？它会像上面那样以 .html 结尾吗？我将如何重写 Spring 表单标签？
它应该像this question 一样工作。注意控制器中的RequestMapping注解。

【解决方案2】：

您可以尝试在 Javascript 中手动提交您的表单，将输入类型从提交更改为按钮，然后您可以有类似的东西：

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

来源：Clearing my form inputs after submission

【讨论】：

代码味道，不要重复自己。使用局部变量。 KTHX
您可以使用本地变量，是的，如果我引用该表单两次以上，我会使用一个，但是我个人不会仅针对上述情况初始化新变量。