jQuery:表单未使用$(“#id”)。submit()提交,但将通过“提交”按钮提交?

问题描述 投票:39回答:9
<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
9个回答
17
投票

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

jQuery submit()事件添加了一个事件监听器,该事件监听器在您提交表单时发生。因此,您的代码基本上没有任何绑定到Submit事件。 如果要提交该表单,请使用老式的JavaScript document.formName.submit()


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

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

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

希望这更有道理。


79
投票

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

请参阅jQuery Submit()文档:

表单及其子元素不应使用以下输入名称或ID与表单的属性(例如,submit,length或method)冲突。名称冲突可能导致混乱的故障。有关的完整列表规则,并检查您的标记是否有这些问题,请参阅DOMLint。


20
投票

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

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

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


13
投票

我有一个类似的问题,花了一段时间才解决。如果您不向其传递处理程序,则jQuery的.submit()函数应触发表单提交,但之所以没有这样做,是因为您的提交按钮被命名为“ submit”,并且覆盖了表单的submit函数。 >

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

不确定控制台为何不记录错误,也许jQuery首先检查了Submit函数是否存在,如果该函数不存在,则只是忽略了请求。


4
投票

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


3
投票

在提交按钮中擦除属性“名称”:


0
投票

尝试一下,为我工作不能将ID“提交”给任何其他元素


-1
投票

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


-3
投票

其Ajax调用,为什么您已经在使用ajax处理表单时需要提交表单。您可以使用

© www.soinside.com 2019 - 2024. All rights reserved.