表单未使用 JS 提交答案

【问题标题】：Form not submitting with JS表单未使用 JS 提交
【发布时间】：2012-04-02 19:30:45
【问题描述】：

我拥有世界上最简单的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']?>">

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

【问题讨论】：

作为一种解决方法，我做了以下工作：只需显示一个调用打印方法的打印按钮，一旦用户完成此操作，我就会显示提交按钮（) 一切都很好。

标签： javascript onclick submit

【解决方案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 hack 的形式得到了回复：

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

查看How to reliably submit an HTML form with JavaScript?了解完整详情

【讨论】：

【解决方案2】：

鉴于您的表单同时定义了id 和name，您可以使用其中任何一种：

使用form 标签的id：

document.getElementById('formname').submit();

使用form 标签的name 属性：

document.forms['formname'].submit();

【讨论】：

函数 fnSubmit() { window.print(); document.forms['frmTravel'].submit();也没有工作，我真的很困惑。表单名称和 id 都设置为“frmTravel”。
你有开始和结束表单标签吗？你有格式良好的 HTML 吗？页面上是否还有另一个 JavaScript 错误？你有另一个名为 frmTravel 的元素吗？很难在不查看整个页面的情况下单独调试。使用 Firefox 的错误控制台查看触发了哪些错误和警告。

【解决方案3】：

试试这个：

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

【讨论】：

我绝对知道这应该工作，但由于某种原因，它只是显示打印对话框，没有去哪里。
那么你的问题在你的代码中的其他地方。很可能是一个永远不会关闭的 HTML 标签。
不幸的是它完美地通过了验证，所以我不认为这是一个标记问题？
我不会相信的。我会保存客户端源代码并一点一点地删除部分，直到它起作用，这样我就可以缩小导致它发声的原因。

【解决方案4】：

最可能的罪魁祸首是 IE 混淆了 JavaScript 变量、ID 和名称。在您的来源中搜索与您的表单名称共享的内容。

【讨论】：

表单的名称/id 都设置为“frmTravel”——表单上没有其他内容具有此名称/id。

【解决方案5】：

在表单中放置一个输入按钮。
给 tabindex="-1" 就可以了。
使用 style="display:none;" 使其不可见。

喜欢这个

<input type="submit" tabindex="-1" style="display:none;" />

【讨论】：