成功提交 Web 表单后，Javascript 重置功能将不起作用

Javascript reset function won't work after successful submission of a web form

本文关键字：功能 不起作用 Javascript 提交 Web 表单 成功      更新时间：2023-09-26

我是 JavaScript 的新手。我正在Visual Studio中与 ASP.NET 一起工作，我有一个简单的表单。我还有一个JavaScript函数来验证表单，还有一个JavaScript函数来重置表单。验证和提交工作正常。但是，提交表单后，我无法使 JavaScript 重置功能正常工作。我也尝试使用常规的HTML输入按钮，但它不起作用。在成功订阅之前，它工作正常，但在成功订阅之后就永远不会。 任何帮助将不胜感激。

function resetForm() {
      document.getElementById("accountForm").reset();
}
<asp:Button ID="subBtn" runat="server" Text="Submit" OnClientClick="return validateForm()" onclick="subBtn_Click" />
<asp:Button ID="rstBtn" runat="server" Text="Reset"  OnClientClick="resetForm()" oncClick="rstBtn_Click"/>

重置按钮同时具有客户端和服务器端事件处理程序。这有必要吗？考虑使用客户端工作的按钮重置窗体，例如

<input type="reset" />

显然正在重置窗体，但控件具有默认值，因此在重置窗体时设置它们。

重置

按钮会将所有控件重置为其默认值。如果要清除默认值，以便所有窗体控件都没有值，则需要清除其所有默认值，如下所示：

function clearForm(form) {
  var control, controls = form.elements;
  for (var i=0, iLen=controls.length; i<iLen; i++) {
    control = controls[i];
    // Don't change value of submit or reset buttons
    if (control.type != 'submit' && control.type != 'reset') {
      if (control.tagName.toLowerCase() == 'select') {
        for (var j=0, jLen=control.options.length; j<jLen; j++) {
          control.options[j].defaultSelected = false;
        }             
      } else if (control.defaultChecked) {
        control.defaultChecked = false;
      } else {
        control.defaultValue = '';
      }
    }
  }
  // Now reset the form
  form.reset();
}

并将对窗体的引用传递给函数，因此重置按钮如下所示：

<input type="reset" onclick="clearForm(this.form);">

它确实重置了表单，提交后的表单初始状态具有值。

重置
恢复表单元素的默认值。它执行与重置按钮相同的操作。

规范

您可以编写javascript代码来清除所有输入，如果这是您喜欢的。

var e = document.getElementsByTagName('input');
for (var i = 0; i < e.length; i++){
    e[i].value = "";
}

如果你可以使用jQuery，那就简单多了：

$('input[type="text"], textarea, select').val('');
相关文章：