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

Question

<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();，但表单未提交（即页面不刷新）。这是为什么？

谢谢！

Answer 1

试试这个，如果您确实以 id 或名称提交，则对我有用

，您需要重命名该表单元素。

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

表单提交 jQuery 不起作用

Answer 2

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

换句话说，当您单击提交时，浏览器必须首先执行 checkForReplace 操作。

Answer 3

它的 Ajax 调用，为什么您需要在已经使用 ajax 处理表单的情况下提交表单。您可以使用以下方式导航离开页面

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

Answer 4

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

即 jQuery 调用 DOM 对象的

.submit() 函数，但表单内的所有输入也可以通过调用 .< 来访问/代码>。因此，如果您的输入之一被命名为“submit”，它将使用 .submit 覆盖 .submit() 函数 - 作为输入 DOM 元素....如果这有道理吗？因此，当 jQuery 调用 .submit() 时，它不起作用，因为 Submit 不再是一个函数。 所以，如果你更改按钮的名称，它应该可以工作。

不确定为什么控制台不记录错误，也许 jQuery 首先检查提交函数是否存在，并且在以下情况下忽略请求：该函数不存在。

Answer 5

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

按钮：

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

Answer 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" />

Answer 7

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

请参阅 jQuery Submit() 文档：

表单及其子元素不应使用以下输入名称或 ID
与表单的属性冲突，例如提交、长度或方法。
名称冲突可能会导致混乱的故障。如需完整列表
规则并检查您的标记是否存在这些问题，请参阅 DOMLint。

Answer 8

我在这里使用 $("form")[0].submit()

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

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

Answer 9

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

jQuery submit()< /code> event 添加一个事件侦听器，在您提交表单时发生。因此，您的代码基本上没有将任何内容绑定到提交事件。 如果您希望提交该表单，请使用老式 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，则算作提交成功单击按钮并发生正常的浏览器行为。然后，您还以事件处理程序的形式将逻辑与标记分开。

希望这更有意义。