Question

我需要编写始终提交表单的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()无法正常工作，因为“提交了”＆＃39;基本上是由＆＃34;发送数据＆＃34;按钮（！）。

然后我认为我应该使用表单的操作（有人可以使用action作为名称！）。

然后我想到了关注我能找到的第一个输入字段，并模拟了一个ENTER按键。但是，我的初步测试并没有奏效，并决定在做我通常做的事情之前问这里（我头撞墙几个小时）。

所以：无论如何制作任何形式的是一种好的，可靠的方式提交，无论其是否为某些领域的名称，等等？

或者，也许：我如何可靠地获取表单的submit()函数，无论给出相同名称的字段，以便我可以提交该内容？

Answer 1

一种方法是首先测试 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();
}

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

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

<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更新。

这也应该导致调度提交事件，因此应该调用提交侦听器。最好为按钮提供 display：none 的样式，以防提交被取消 - 您不希望按钮出现。

还需要检查额外的按钮，以防它已被添加。

Answer 2

不要使用name="submit"。因为这只会覆盖表单的.submit()方法，因为您可以通过名称引用表单的字段（DOM元素）。这是你的问题的原因。如果您需要命名提交按钮，请使用除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提交按钮的DOM元素。请查看您的控制台日志以查看此信息。：）

即使字段已命名为＆＃34;提交＆＃34;也可以通过编程方式提交功能。

2 个答案: