当输入名称为“提交”时,如何使用 Javascript 发送表单?

IT技术 javascript html form-submit
2021-01-18 03:06:28

问题:如果一个表单输入具有 name ,您如何使用 Javascript 发送表单submit

背景:我将用户重定向到另一个带有隐藏 HTML 表单的页面。我无法更改(隐藏的)输入的名称,因为另一个页面在另一台服务器上,并且输入需要与它们完全一样。我的 HTML 表单如下所示:

<form id="redirectForm" method="post" action="http://www.example.com/">
  <input name="search" type="hidden" value="search for this" />
  <input name="submit" type="hidden" value="search now" />
</form>

我今天使用以下 javascript 行自动发送表单:

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

但是,由于一个输入的名称是“提交”(它不能是别的东西,否则另一台服务器不会处理请求),因此document.getElementById('redirectForm').submit指的是输入,因为它覆盖了表单函数submit()

Firefox 中的错误消息是:Error: document.getElementById("requestform").submit is not a functionSafari 中的类似错误消息。

2个回答

值得注意的是:将输入名称更改为“提交”以外的名称通常要容易得多。请仅在确实不可能时才使用下面的解决方案。

您需要submit从不同的形式获取函数:

document.createElement('form').submit.call(document.getElementById('redirectForm'));

如果您已经有另一个<form>标签,则可以使用它而不是创建另一个标签。

我认为创建一个元素只是为了获得它的功能是一种浪费。我不确定您是否出于跨浏览器的原因这样做,但只是var theForm = document.getElementById('redirectForm'); theForm.constructor.prototype.submit.call(theForm);?
2021-03-21 03:06:28
@SLaks 我已经编辑了您的答案,因为它现在是重复的候选人。如果您不同意我的观点,请随时回滚。
2021-03-24 03:06:28
更好的是:HTMLFormElement.prototype.submit.call(document.getElementById('redirectForm'))毕竟,HTMLFormElement是等价的theForm.constructor
2021-03-27 03:06:28
@pimvdb 它似乎也适用于 Firefox 9、Safari 5 和 Internet Explorer 9。
2021-04-05 03:06:28

使用submit()方法来自HTMLFormElement.prototype

HTMLFormElement.prototype.submit.call(document.getElementById('redirectForm'));
执行类似var form = document.getElementById('redirectForm'); form.__proto__.submit.call(form). 适用于 FF66 和 Chromium 72,但可能无处不在。我想这在有一个名为 的字段时仍然会中断__proto__,但这似乎可以接受。
2021-03-20 03:06:28
似乎对我有用(FF66,Chromium 72)。实际上似乎也比接受的答案更干净。
2021-04-01 03:06:28