javascript - 表单不使用 JS 提交

Question

我拥有世界上最简单的 javascript 函数:

fnSubmit()
{
  window.print();
  document.formname.submit();
}

调用者:

<button type="button" id="submit" onclick="fnSubmit()">Submit</button>

一切都很好，打印对话框出现，但是在打印或取消打印后我收到以下错误:

“document.formname.submit 不是函数”

我的表单定义如下:(显然我在实际代码中没有使用 formname 但你明白了)

<form name="formname" id="formname" method="post" action="<?=$_SERVER['SCRIPT_NAME']?>">

显然我并不想在这里做任何特别的事情，我过去也使用过类似的方法，我到底错过了什么？

Answer 1

简而言之:将提交按钮的 id 更改为不同于“提交”的内容。另外，也不要将 name 设置为此值。

现在，一些更深入的见解。一般情况下，document.formname.submit 是一种在调用时将提交表单的方法。但是，在您的示例中，document.formname.submit 不再是方法，而是表示按钮的 DOM 节点。

发生这种情况是因为表单的元素可以通过它们的 name 和 id 属性作为其 DOM 节点的属性使用。这段写法有点乱，举个例子:

<form name="example" id="example" action="/">
  <input type="text" name="exampleField" />
  <button type="button" name="submit" onclick="document.example.submit(); return false;">Submit</button>
</form>

在此示例中，document.forms.example.exampleField 是一个 DOM 节点，表示名称为“exampleField”的字段。您可以使用 JS 访问其属性，例如其值:document.forms.example.exampleField.value。

然而，在这个例子中有一个名为“提交”的表单元素，这是提交按钮，可以使用 document.forms.example.submit 访问。这将覆盖以前的值，这是允许您提交表单的函数。

编辑:

如果重命名字段对您不利，还有另一种解决方案。在写这篇文章之前不久，我把问题留在了网站上，并以简洁的 JavaScript 黑客的形式得到了回应:

function hack() {
  var form = document.createElement("form");
  var myForm = document.example;
  form.submit.apply(myForm);
}

参见 How to reliably submit an HTML form with JavaScript?完整的细节