JavaScript 中的“提交不是函数”错误答案

【问题标题】："Submit is not a function" error in JavaScriptJavaScript 中的“提交不是函数”错误
【发布时间】：2010-10-24 09:34:31
【问题描述】：

谁能告诉我这段代码出了什么问题？我尝试使用 JavaScript 提交表单，但显示错误“.submit 不是函数”。有关代码的更多详细信息，请参见下文：

<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">

<input onclick="submitAction()" id="submit_value" type="button" name="submit_value" value="">

</form>

<script type="text/javascript">
    function submitAction()
    {
        document.frmProduct.submit();
    }
</script>

我也试过这个：

<script type="text/javascript">
    function submitAction()
    {
        document.forms["frmProduct"].submit();
    }
</script>

两者都显示相同的错误:(

【问题讨论】：

哪个浏览器给你这个消息？你能发布完整的源代码吗？
考虑到发布的代码在 IE7 和 Chrome2 中都适用于我，那么您未发布的代码可能有问题？
也许您有一个名为 submit 的字段或 id 字段，因此 .submit() 被该字段隐藏了？
当您在不同元素中具有相同的 id="frmProduct" 时发生错误。

标签： javascript html dom submit

【解决方案1】：

提交不是函数

表示您将提交按钮或其他元素命名为submit。将按钮重命名为btnSubmit，您的通话将神奇地工作。

当您将按钮命名为提交时，您会覆盖表单上的submit() 函数。

【讨论】：

这是一个方便的技巧。如果你的提交按钮是#submit，你可以通过窃取另一个表单实例的submit() 方法来绕过它，例如：document.createElement('form').submit.call(document.frmProduct)。
似乎每个人都必须努力学习这一点。会是一个很好的面试问题
我只是删除了 name='submit' 而 Bob 是你的阿姨，它起作用了！！
我在这个问题上浪费了2-3个小时，非常感谢您的回答
JavaScript 真的是有史以来最糟糕的

【解决方案2】：

<form action="product.php" method="post" name="frmProduct" id="frmProduct" enctype="multipart/form-data">

<input id="submit_value" type="button" name="submit_value" value="">

</form>

<script type="text/javascript">

document.getElementById("submit_value").onclick = submitAction;

function submitAction()
{
    document.getElementById("frmProduct").submit();
    return false;
}
</script>

编辑：我不小心交换了 id 的位置

【讨论】：

document.getElementById("frmProduct").submit 不是函数 :(
您有多个 id 为“frmProduct”的元素吗？
添加 submitAction 作为 onsubmit 的处理程序，然后从中调用提交可能会创建一个无限循环。处理程序应与按钮的 onclick 相关联。
否决准确答案吧？跛脚的家伙，踩我们以获得你为之出卖灵魂的积分
@Chad Grant - 完全同意。

【解决方案3】：

如果您没有机会更改name="submit"，您也可以通过这种方式提交表单：

function submitForm(form) {
    const submitFormFunction = Object.getPrototypeOf(form).submit;
    submitFormFunction.call(form);
}

【讨论】：

HTMLFormElement.prototype.submit.call(form) 也可以

【解决方案4】：

确保没有其他同名的表单，并确保表单中没有name="submit" 或id="submit"。

【讨论】：

【解决方案5】：

我在使用母版页创建 MVC 应用程序时遇到了同样的问题。如上所述，尝试查找名称为“提交”的元素，但事实并非如此。

就我而言，它在我的页面上创建了多个标签，因此在引用正确的表单时存在一些问题。

要解决这个问题，我会让按钮处理要使用的表单对象：

onclick="return SubmitForm(this.form)"

并与 js：

function SubmitForm(frm) {
    frm.submit();
}

【讨论】：

这在他的情况下不起作用，因为他有一个名为“submit”的元素，它有效地替换了提交功能......

【解决方案6】：

这个主题已经有很多答案，但对我来说效果最好（也是最简单的一行！）的一个是对 Neil E. Pearson 于 2013 年 4 月 21 日发表的评论的修改：

如果您的提交按钮被#submit 卡住了，您可以通过窃取另一个表单实例的 submit() 方法来解决它。

我对他的方法的修改，以及什么对我有用：

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

【讨论】：

这更像是一种解决方法而不是答案，理想情况下，您不会将事物命名为 submit，因为您正在践踏内核。并不是说 JS 世界中的任何东西都是理想的：D

【解决方案7】：

很抱歉回答晚了，但对于那些仍然面临同样错误的人。要摆脱这个错误：

<form method="POST">
  <input type="text"/>
  <input type="submit" id="submit-form" value="Submit Form" style="display: none;"/>
</form>

<!-- Other element that will submit the form -->
<button onclick="submitTheForm()">Submit the form</button>

<script>
function submitTheForm(){
  document.getElementById("submit-form").click();
}
</script>

说明：

javascript 函数submitTheForm() 正在访问提交input 元素并在其上调用点击事件，从而导致form 提交。

这个解决方案是终身的，几乎 100% 兼容所有浏览器。

【讨论】：

【解决方案8】：

给表单元素一个名称 submit 将简单地隐藏提交属性。确保您没有名为 submit 的表单元素，并且您应该能够正常访问提交功能。

【讨论】：

【解决方案9】：

其实解决方法很简单……

原文：

    <form action="product.php" method="get" name="frmProduct" id="frmProduct"
enctype="multipart/form-data">
    <input onclick="submitAction()" id="submit_value" type="button" 
    name="submit_value" value="">
</form>
<script type="text/javascript">
    function submitAction()
    {
        document.frmProduct.submit();
    }
</script>

解决方案：

    <form action="product.php" method="get" name="frmProduct" id="frmProduct" 
enctype="multipart/form-data">
</form>

<!-- Place the button here -->
<input onclick="submitAction()" id="submit_value" type="button" 
    name="submit_value" value="">

<script type="text/javascript">
    function submitAction()
    {
        document.frmProduct.submit();
    }
</script>

【讨论】：

您能否解释一下这是如何解决 OP 的问题的。
当然，在这种情况下（仅在这种情况下）问题在于范围。

【解决方案10】：

我遇到了同样的问题并解决了我的问题，只需从提交按钮中删除 name="submit"。

<button name='submit' value='Submit Payment' ></button>

更改为

<button value='Submit Payment' ></button>

删除名称属性希望它会工作

【讨论】：

【解决方案11】：

您应该使用以下代码：

$(document).on("ready", function () {
       
        document.frmProduct.submit();
    });

【讨论】：

虽然这段代码 sn-p 可以解决问题，但including an explanation 确实有助于提高帖子的质量。请记住，您正在为将来的读者回答问题，而这些人可能不知道您的代码建议的原因。也请尽量不要用解释性的 cmets 挤满你的代码，这会降低代码和解释的可读性！

【解决方案12】：

我用的是

var enviar = document.getElementById("enviar");
enviar.type = "submit";

只是因为其他一切都不起作用。

【讨论】：

【解决方案13】：

我的解决方案是设置按钮的“表单”属性

<form id="form_id_name"><button name="btnSubmit" form="form_id_name" /></form>

或者是js：

YOURFORMOBJ.getElementsByTagName("button")[0].setAttribute("form", "form_id_name");
YOURFORMOBJ.submit();

【讨论】：

【解决方案14】：

可能的解决方案 -
1.确保您没有任何其他名称/id 为提交的元素。
2.尝试调用函数为onClick = "return submitAction();"
3.document.getElementById("form-name").submit();

【讨论】：

【解决方案15】：

如果表单没有<button type="submit">submit</button>，form.submit() 将不起作用。 form 元素属于HTMLFormElement 接口，因此，我们可以直接从原型中调用，该方法将始终适用于任何表单元素。

HTMLFormElement.prototype.submit.call(form)

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。

【解决方案16】：

你可以试试

<form action="product.php" method="get" name="frmProduct" id="frmProduct" enctype="multipart/form-data">

<input onclick="submitAction(this)" id="submit_value" type="button" name="submit_value" value="">

</form>

<script type="text/javascript">
function submitAction(element)
{
    element.form.submit();
}
</script>

你不是有多个同名的表单吗？

【讨论】：

【解决方案17】：

使用 getElementById：

document.getElementById ('frmProduct').submit ()

【讨论】：