Javascript 使用javascript拦截提交后无法`submit()`一个html表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2718799/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Unable to `submit()` an html form after intercepting the submit with javascript
提问by Ross Rogers
I'm trying to intercept the submission of a form in order to change the value of my keywordslabel.
我试图拦截表单的提交以更改我的keywords标签的值。
I have the following code:
我有以下代码：
<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>
When I run this in chrome and click the submit button the keywords label changes to boo, but the javascript console says:
当我在 chrome 中运行它并单击提交按钮时，关键字标签更改为boo，但 javascript 控制台显示：
Uncaught TypeError: Property 'submit' of object <#an HtmlFormElement> is not a function.
How can I submit the form with the manipulated keywords?
如何提交带有操纵关键字的表单？
采纳答案by Jacob Relkin
<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>
回答by Chris Butler
The reason for the error when trying to call form.submit()is that your submit button is called "submit". This means that the "submit" property of your Form object is now a reference to the submit button, overriding the "submit" method of the form's prototype.
尝试调用时出错的原因form.submit()是您的提交按钮被称为“提交”。这意味着您的 Form 对象的“提交”属性现在是对提交按钮的引用，覆盖了表单原型的“提交”方法。
Renaming the submit button would allow you to call the submit()method without error.
重命名提交按钮将允许您调用该submit()方法而不会出错。
回答by Jason
The problem is that when some element is <input type="submit" name="submit" />submit() method will not work. The best solution to this situation is to change the name of that submit type input to something else for example button-submit etc.
问题是当某些元素是<input type="submit" name="submit" />submit() 方法将不起作用。这种情况的最佳解决方案是将提交类型输入的名称更改为其他名称，例如按钮提交等。
回答by Steve Tran
Just change the name of submit button and it'll work!
只需更改提交按钮的名称即可！
回答by ainokna
Chris Butlerexplained the issue well.
克里斯巴特勒很好地解释了这个问题。
You can use a native submitmethod of HTMLFormElement to work around a problem. In your case:
您可以使用HTMLFormElement的本机提交方法来解决问题。在你的情况下：
function formIntercept( ) {
var f = document.forms['searchForm'];
f.keywords.value = 'boo';
HTMLFormElement.prototype.submit.call(f);
};
回答by user2345162
found this very helpful, error was caused by another element in the form with name=submit after renaming the document.getElementById('myform').submit()worked
发现这非常有用，错误是由表单中的另一个元素在重命名document.getElementById('myform').submit()工作后name=submit 引起的
