用javascript拦截提交后无法`submit()`一个html表单答案

【问题标题】：Unable to `submit()` an html form after intercepting the submit with javascript用javascript拦截提交后无法`submit()`一个html表单
【发布时间】：2013-05-03 08:32:38
【问题描述】：

我试图拦截表单的提交以更改我的keywords 标签的值。

我有以下代码：

<HTML>
<FORM name="searchForm" method="get" action="tmp.html" >
<input type="text" name="keywords" />
<input type="button" name="submit" value="submit" onclick="formIntercept();"/>
</FORM>
<SCRIPT language="JavaScript">
document.searchForm.keywords.focus();
function formIntercept( ) {
    var f = document.forms['searchForm'];
    f.keywords.value = 'boo';
    f.submit();
};
</SCRIPT>
</HTML>

当我在 chrome 中运行它并单击提交按钮时，关键字标签更改为 boo，但 javascript 控制台显示：

 Uncaught TypeError: Property 'submit' of object <#an HtmlFormElement> is not a function.

如何提交带有操纵关键字的表单？

【问题讨论】：

<input type="label" /> 是什么，或者更具体地说，您输入 type 属性的真正含义是什么？
哎呀。你是对的。将type="label" 更改为type="text"

标签： javascript

【解决方案1】：

尝试调用form.submit() 时出错的原因是您的提交按钮被称为“提交”。这意味着您的 Form 对象的“提交”属性现在是对提交按钮的引用，覆盖了表单原型的“提交”方法。

重命名提交按钮将允许您调用submit() 方法而不会出错。

【讨论】：

你先生，是神！从来不知道这件事。我正在使用$('form :submit').click();，它在 Firebug 控制台打开时崩溃了 firefox。我尝试更改为 .submit 认为它会绕过单击按钮，但它根本不起作用！我看到了这个，更改了提交按钮的名称，嘿 PRESTO！有用！也不再因打开萤火虫而崩溃。 XOXOXOXOXOXOX！！！
我认为这是实际问题的答案，错误是由 .submit() 生成的，即使应用程序的功能有效，错误也可以通过更改名称来修复提交按钮而不删除 f.submit();谢谢你，克里斯，你摇滚！
这是一个测试工具，用于检查这个（+ 一些类似的东西）：kangax.github.com/domlint
不错的验证工具，@HalilÖzgür！
太棒了，我被这个卡住了，提交的名称干扰了表单的 submit() 方法是我从未想过的。每天上学

【解决方案2】：

问题是当某些元素是<input type="submit" name="submit" /> submit() 方法将不起作用。这种情况的最佳解决方案是将提交类型输入的名称更改为其他名称，例如按钮提交等。

【讨论】：

【解决方案3】：

<html>
<head></head>
<body>
<form name="searchForm" method="get" action="tmp.html" onsubmit="formIntercept(this);">
<input type="text" name="keywords" />
<input type="submit" name="submit" value="submit"/>
</form>
<script type="text/javascript">
document.searchForm.keywords.focus();
function formIntercept( form ) {
    form.keywords.value = 'boo';
    //form.submit();
}
</script>
</body>
</html>

【讨论】：

就是这样！您将type="button" 更改为type="submit" 有效。谢谢！
我想这是删除了form.submit()
Jacob 对其进行了进一步调整，但仅将 type="button" 更改为 type="submit" 即可使代码正常工作。不过，我也会采用他的其他更改，因为它看起来不像我的方式那么老套。
我不认为这实际上回答了这个问题，甚至没有提供正确的解决方法。下面的答案解释了为什么会发生错误。

【解决方案4】：

参见 jQuery .submit()。

$("form").submit( function() {
   // TODO tweak your form data before it gets sent
});

【讨论】：

【解决方案5】：

只需更改提交按钮的名称即可！

【讨论】：

【解决方案6】：

克里斯·巴特勒很好地解释了这个问题。

您可以使用 HTMLFormElement 的原生 submit 方法来解决问题。在你的情况下：

function formIntercept( ) {
    var f = document.forms['searchForm'];
    f.keywords.value = 'boo';
    HTMLFormElement.prototype.submit.call(f);
};

【讨论】：