JavaScript -- 提交值后清除表单

JavaScript -- clear form after values are submitted

本文关键字：清除 表单 提交 JavaScript      更新时间：2023-09-26

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

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

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

<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>

如果您在提交之前清除表单，您将不会获得任何数据。这也是应该预料到的。但是，您可以通过发送表单而不使用异步请求刷新站点来规避此问题。发送表单数据后，您可以重置表单。一个快速的方法是使用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请求有点复杂。

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

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

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

相关文章：