表格不提交JS [英] Form not submitting with JS

问题描述

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

I have the worlds most simple javascript function:

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

由以下人士调用：

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

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

All is well and good, the print dialog shows up, however after printing or canceling the print I get the following error:

document.formname.submit不是函数

"document.formname.submit is not a function"

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

My form is defined as follows: (obviously I am not using formname in the actual code but you get the idea)

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

显然我在这里并没有尝试做任何特别的事情，过去我使用过类似的方法，我在这里错过了吗？

Obviously I am not trying to do anything special here and I have used similar approaches in the past, what in the world am I missing here?

推荐答案

简而言之：更改提交按钮的 id 与提交不同的东西。此外，请勿将名称设置为此值。

In short: change the id of your submit button to something different than "submit". Also, don't set the name to this value either.

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

Now, some deeper insight. The general case is that document.formname.submit is a method that, when called, will submit the form. However, in your example, document.formname.submit is not a method anymore, but the DOM node representing the button.

这是因为表单的元素可以作为其DOM节点的属性，通过 name 和 id 属性。这个措辞有点令人困惑，所以这里有一个例子：

This happens because elements of a form are available as attributes of its DOM node, via their name and id attributes. This wording is a bit confusing, so here comes an example:

<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 是表示名称为exampleField的字段的DOM节点。您可以使用JS访问其属性，例如其值： document.forms.example.exampleField.value 。

On this example, document.forms.example.exampleField is a DOM node representing the field with name "exampleField". You can use JS to access its properties such as its value: document.forms.example.exampleField.value.

但是，在此示例中，有一个名为submit的表单元素，这是提交按钮，可以使用 document.forms.example.submit 访问该按钮。 。这会覆盖之前的值，即允许您提交表单的功能。

However, on this example there is an element of the form called "submit", and this is the submit button, which can be accessed with document.forms.example.submit. This overwrites the previous value, which was the function that allows you to submit the form.

编辑：

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

If renaming the field isn't good for you, there is another solution. Shortly before writing this, I left the question on the site and got a response in the form of a neat JavaScript hack:

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

参见如何使用JavaScript可靠地提交HTML表单？以获取完整的详细信息

See How to reliably submit an HTML form with JavaScript? for complete details

这篇关于表格不提交JS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！