表格不提交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更改为与"提交"不同的内容.另外,也不要将名称设置为此值.

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

这是因为一种形式的元件可作为其DOM节点的属性,通过它们的name和id属性.这个措辞有点令人困惑,所以这里有一个例子:

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

但是,在此示例中,有一个名为"submit"的表单元素,这是提交按钮,可以使用它来访问document.forms.example.submit.这会覆盖以前的值,即允许您提交表单的函数.

编辑:

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

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

请参阅如何使用JavaScript可靠地提交HTML表单？有关完整的细节

Answer 2

鉴于您的表单既有a id又有name定义,您可以使用以下任何一种:

使用form标签id:

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

使用form标签的name属性:

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

Answer 3

试试这个:

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