jQuery：表单不使用 $("#id").submit() 提交，但会使用“提交”按钮提交？答案

【问题标题】：jQuery: form not submitting with $("#id").submit(), but will submit with a 'submit' button?jQuery：表单不使用 $("#id").submit() 提交，但会使用“提交”按钮提交？
【发布时间】：2010-07-21 21:06:15
【问题描述】：

<form method="post" action="load_statements.php?action=load" id="loadForm"
                            enctype="multipart/form-data">

这是我的表格，我觉得很好。在那种形式中，我放了这个按钮：

<input type="button" name="submit" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />

这是它调用的函数：

function confirmSubmit() {
    // get the number of statements that are matched
    $.post(
        "load_statements.php?action=checkForReplace",
        {
            statementType : $("#statementType").val(),
            year : $("#year").val()
        },
        function(data) {
            if(data['alreadyExists']) {
                if( confirm("Statements already exist for " + $("#statementType").html() + " " + $("#year").val() +
                    ". Are you sure you want to load more statements with these settings? (Note: All duplicate files will be replaced)"
                )) {
                    $("#loadForm").submit();
                }
            } else {
                $("#loadForm").submit();
            }
        }, "json"
    );
}

如您所见，它调用$("#loadForm").submit();，但表单未提交（即页面未刷新）。这是为什么呢？

谢谢！

【问题讨论】：

如果你把它放在提交调用上，你会遇到断点吗？
是的，它运行了，但由于某种原因实际上并没有提交表单。

标签： jquery forms form-submit

【解决方案1】：

将按钮的“提交”名称更改为其他名称。这导致了问题。请参阅 dennisjq 的回答： http://forum.jquery.com/topic/submiting-a-form-programmatically-not-working

查看 jQuery submit() 文档：

表单及其子元素不应使用输入名称或 ID 与表单的属性冲突，例如提交、长度或方法。名称冲突可能会导致令人困惑的失败。如需完整列表规则并检查这些问题的标记，请参阅DOMLint。

【讨论】：

这似乎是正确的答案，而不是其他的。至少在我的情况下这是确切的问题，并且似乎是问题中的问题。其他答案似乎是错误的。
我测试了相同的情况，发现更改id或name属性仍然会产生相同的错误。
这就是我的答案。花了很长时间才发现
起初，我认为可能是form 的id 或name 导致了这个问题。结果是另一个input 元素有一个id/name，即submit。更改解决了此问题。
我还发现您还应该确保按钮元素的 id 未设置为“提交”。我学到的教训是永远不要将 name="submit" OR id="submit" 放在提交按钮上，否则它会破坏 $("form").submit()！我只是花了几个小时尝试调试表单的行为，这就是问题所在。

【解决方案2】：

我用$("form")[0].submit()

这里$("form")返回一个DOM元素数组，因此通过访问相关索引，我们可以获得表单元素的DOM对象并在该DOM元素中执行submit()函数。

如果您在一个 html 页面中有多个表单元素，则必须了解“表单”的正确顺序

【讨论】：

帮我解决了这个问题，+1
@garrett $("#loadForm")[0].submit(); 为我工作。 submit() 似乎不适用于 $("#loadForm") 选择器返回的元素数组。

【解决方案3】：

http://api.jquery.com/submit/

jQuery submit() 事件添加了一个事件侦听器，以便在您提交表单时发生。所以你的代码基本上没有绑定到提交事件。 如果您希望提交该表单，请使用老式 JavaScript document.formName.submit()。

我将保留上面的原始答案，以指出我离开的地方。我的意思要说的是，如果您有这样的函数，那么您为什么要在 ajax 部分中发布值然后使用 jQuery 提交表单会令人困惑。在这种情况下，我会将事件绑定到按钮的点击上，如果你希望它返回，则返回 true，否则返回 false，如下所示：

$('#submit').click( function() {
  // ajax logic to test for what you want
  if (ajaxtrue) { return confirm(whatever); } else { return true;}
});

如果此函数返回 true，则视为成功单击提交按钮并发生正常的浏览器行为。然后，您还以事件处理程序的形式将逻辑与标记分开。

希望这更有意义。

【讨论】：

如果你传递一个函数。如果你只是调用 submit()，表单上的默认提交动作将被触发，因此表单将被提交。
...据说...但由于某种原因，没有 =(
我已经更新了答案以解释我的意思。我不是很清楚，那是我的错。
我需要获取 ajax 数据，因为根据表单，确认会有所不同（如果您需要详细信息，我正在检查用户正在上传的文件是否已经在数据库中，并且如果是，则通知旧文件将被覆盖）。虽然说出来让我很生气，但您的答案比我的要好，因为它更具语义性并且不需要不可见的提交按钮。我将此标记为正确答案，但我仍然对为什么 submit() 函数不起作用感到困惑 =(
老实说，我认为您的问题是触发它的事件是单击提交按钮，而您是在告诉 jQuery 在该函数中执行 submit()。您真正需要做的就是返回 true，然后 onclick 就会通过。

【解决方案4】：

我遇到了类似的问题，花了一段时间才弄清楚。 jQuery 的 .submit() 函数应该触发表单提交，如果你不传递处理程序给它，但它没有传递的原因是因为你的提交按钮被命名为“提交”并且覆盖了表单的提交函数。

即jQuery 调用 DOM 对象的 <form>.submit() 函数，但是表单中的所有输入也可以通过调用 <form>.<inputname> 来访问。因此，如果您的输入之一被命名为“提交”，它会用<form>.submit 覆盖<form>.submit() 函数——作为输入DOM 元素....如果这有意义吗？因此，当 jQuery 调用 <form>.submit() 时，它不起作用，因为 submit 不再是一个函数。 因此，如果您更改按钮的名称，它应该可以工作。

不知道为什么控制台不记录错误，也许 jQuery 首先检查提交函数是否存在，如果该函数不存在则忽略该请求。

【讨论】：

抱歉，我的帖子没有达到预期的效果。第二段应为：即 jQuery 调用 DOM 对象的 form.submit() 函数，但表单内的所有输入也可以通过调用 form.inputname 来访问。因此，如果您的输入之一被命名为“提交”，它会用 form.submit 覆盖 form.submit() 函数 - 作为输入 DOM 元素....如果这有意义吗？所以当 jQuery 调用 form.submit() 时它不起作用，因为 submit 不再是一个函数。
今天我面临同样的问题，你的解决方案对我有用 +10。谢谢。

【解决方案5】：

我在表单中添加了一个不可见的提交按钮，而不是调用 submit() 函数，而是在提交按钮上调用 click() 函数 =)

按钮： <div style="display:none"><input id="alternateSubmit" type="submit" /></div>

绕过表单提交的疯狂方式： $("#alternateSubmit").click();

【讨论】：

我更新了我的答案以包含一个新的可能的解决方案，我成功测试了它，如果你愿意，我可以提供代码。

【解决方案6】：

删除提交按钮中的“名称”属性：

这是你的代码：

<input type="button" name="submit" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />

应该是这样的：

<input type="button" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />

【讨论】：

如果您将其名称从“提交”更改为其他名称，它也可以工作

【解决方案7】：

试试这个，对我有用

如果您确实有提交为 id 或名称，则需要重命名该表单元素。

如果您想在脚本中使用 element.submit()，则不能将 id="submit" 赋予任何其他表单元素。

Form Submit jQuery does not work

【讨论】：

【解决方案8】：

看起来您的提交发生在回调中，该回调仅在您的 onclick 处理程序中的 ajax 发布之后运行。

换句话说，当您点击提交时，浏览器必须先退出并点击 checkForReplace 操作。

【讨论】：

是的，它会这样做，然后点击$("#loadForm").submit();，它什么都不做。

【解决方案9】：

它的 Ajax 调用，为什么您需要在使用 ajax 处理表单的同时提交表单。您可以使用

离开页面

window.location.href = "/somewhere/else";

【讨论】：

为了给用户正确的confirm()语句，我需要先处理一部分。