表单未使用 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 更改为不同于提交"的内容.另外，也不要将 name 设置为此值.

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.

发生这种情况是因为表单的元素可以通过其 name 和 id 属性作为其 DOM 节点的属性使用.这个措辞有点混乱，这里举个例子:

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 是一个 DOM 节点，表示名称为exampleField"的字段.您可以使用 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 hack 的形式得到了回复:

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 表单? 了解完整详情

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