Javascript 以编程方式提交函数，即使字段名为；提交；

我需要编写总是提交表单的Javascript代码。我必须提交的第一份表格如下：

<form action="http://www.example.com/test">
  <input type="text" name="name">
  <input type="submit" value="Send data" name="submit">
</form>

（假设

formNode

是

document.getElementsByTagName（'form'）[0]

）

因此，

formNode.submit（）

不起作用，因为“提交”基本上是由“发送数据”按钮（！）执行的

然后我想我应该使用表单的action（有人也可以使用

action

作为名称！）

然后我想把注意力集中在我能找到的第一个输入字段上，并模拟回车键。但是，我最初的测试不起作用，我决定在做我通常做的事情之前在这里问一下（我的头撞在墙上几个小时）

那么：什么是一种好的、可靠的方式来提交任何表单，而不管它是如何制作的，也不管字段中死气沉沉的名称，等等

或者，可能是：如何让表单的

submit（）

功能可靠地运行，而不管字段的名称是否相同，这样我就可以提交内容了？

不要使用

name=“submit”

。因为这会覆盖表单的

.submit（）

方法，因为您可以通过名称引用表单的字段（DOM元素）。这就是你问题的原因。如果需要命名submit按钮，请使用

Object.getOwnPropertyNames（document.forms[0]）

列表下的名称之外的另一个名称（这些名称都是已获取/保留的）

如果您的示例采用以下形式：

<form action="http://www.example.com/test">
    <input type="text" name="inputname">
    <input type="submit" value="Send data" name="submitbutton">
</form>

---

然后，您可以按预期使用

formNode.submit（）

提交表单。您可以分别使用

formNode.inputname

和

formNode.submitbutton

引用文本框和submit按钮的DOM元素。请查看控制台日志以查看此信息。：）

一种方法是首先测试form.submit是否是提交按钮，如果是，则以编程方式单击它：

// Probably need better testing for whether it's a button or input or whatever
// this is just a proof of concept
if (form.submit && typeof form.submit.tagName == 'string' && form.submit.click) {
  form.submit.click();

} else {
  form.submit();
}

<form id="f0">
  <input name="foo" value="foo">
  <input type="submit" name="submit">
</form>

<button onclick="
  var form = document.forms.f0;
  var button = document.createElement('input');
  button.type = 'submit';
  button.value = 'submit button';
  form.appendChild(button);
  button.click();
">Add submit button and click it</button>

这至少在IE中是可行的，但是您需要进行广泛的测试以确定在其他浏览器中的支持。您可能需要在按钮上调度click事件（使用IE和W3C模型来调度事件），或者对不支持click方法的按钮使用其他方法

另一种方法是添加提交按钮并单击它：

// Probably need better testing for whether it's a button or input or whatever
// this is just a proof of concept
if (form.submit && typeof form.submit.tagName == 'string' && form.submit.click) {
  form.submit.click();

} else {
  form.submit();
}

<form id="f0">
  <input name="foo" value="foo">
  <input type="submit" name="submit">
</form>

<button onclick="
  var form = document.forms.f0;
  var button = document.createElement('input');
  button.type = 'submit';
  button.value = 'submit button';
  form.appendChild(button);
  button.click();
">Add submit button and click it</button>

添加提交按钮并单击它

用户不应该看到按钮，因为浏览器通常在功能完成之前不会更新UI。到那时表单应该已经提交了，所以再次没有UI更新

这也会导致发送submit事件，因此应该调用submit侦听器。最好为按钮提供一种显示样式：无，以防取消提交您不希望按钮出现

---

如果已经添加了额外的按钮，还需要检查它。

我无法控制表单的内容。这就是问题所在。我需要一些始终有效的东西——即使有一个属性具有该名称，也能访问submit方法将是非常棒的。我指的是实际使用的名称。如果你给它起别的名字。然后使用

document.getElementsByTagName（'form'）[0]。submit（）

将按照最初的预期提交该表单。如果您试图从表单的POST请求中捕获值“发送数据”，则会看到

submit=“发送数据”

已经在接收端，但没有将

名称

指定给提交按钮。我真的，真的，真的无法控制

。我真的，真的不能更改表单本身。我不能控制字段的名称。它可以检查form.submit属性，如果它是元素（比如有标记名属性和name属性submit），创建表单的浅层克隆并跨所有控件进行复制，并在将提交控件附加到新表单之前将其重新命名为其他控件。同时将所有控制值设置为其原始值的当前值，然后提交该表单。这可能不是一个通用的解决方案，但在某些情况下可能有效。@RobG-ouch，这很痛！我刚刚找到了一种可能的方法：

form.\uuuuu proto\uuuuu.submit.call（form）。是的，它只在使用proto的浏览器中工作，但它似乎是可靠的？嗯，这可能是“可靠的”，除了
\uuu proto\uu
属性不是标准的，不是所有正在使用的浏览器都支持，并且不是所有浏览器都使用原型继承模型，因此没有
表单.prototype
可供参考。此外，宿主对象可能不一定支持这样的内置方法。我已经发布了一个可能有更好解决方案的答案。-似乎通过原型调用submit不会释放提交事件，至少在IE 9中是这样，因此不会调用任何提交侦听器（例如表单验证）。