Question

我是JavaScript新手。我在使用ASP.NET的Visual Studio中工作，我有一个简单的表单。我还有一个用于验证表单的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"/>

Answer 1

您的重置按钮包含客户端和服务器端事件处理程序。这有必要吗？考虑使用客户端工作的按钮重置表单，例如

<input type="reset" />

Answer 2

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

重置按钮会将所有控件重置为默认值。如果要清除默认值以使所有表单控件都没有值，则需要清除所有默认值，如：

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);">

Answer 3

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

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

spec

如果您愿意，可以编写javascript代码来清除所有输入。

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

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

$('input[type="text"], textarea, select').val('');

成功提交Web表单后，Javascript重置功能将无法运行

3 个答案: