jQuery: form not submitting with $("#id").submit(), but will submit with a 'submit' button?

Question

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

that is my form, which looks fine to me. in that form, i put this button:

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

here is the function it calls:

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"
    );
}

and as you can see, it calls $("#loadForm").submit();, but the form is not submitting (ie. the page is not refreshing). why is that?

thanks!

Answer 1

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

请参阅jQuery submit()文档:

表单及其子元素不应使用与表单属性冲突的输入名称或ID,例如提交,长度或方法.名称冲突可能导致混乱的故障.有关规则的完整列表以及检查这些问题的标记,请参阅DOMLint.

Answer 2

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

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

退回是如果你在一个html页面中有几个表单元素,你必须知道"表单"的正确顺序

Answer 3

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

submit()当您提交表单时,jQuery 事件会添加一个事件侦听器.因此,您的代码与提交事件基本上没有任何关系.如果您希望提交该表单,请使用旧式JavaScriptdocument.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,则表示单击提交按钮成功,并发生正常的浏览器行为.然后,您还以事件处理程序的形式将逻辑与标记分开.

希望这更有意义.

Answer 4

我遇到了类似的问题,花了一段时间来搞清楚.如果你没有向它传递一个处理程序,jQuery的.submit()函数应该触发一个表单提交,但它不是因为你的提交按钮被命名为"submit"并覆盖了表单的提交功能.

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

不确定控制台为什么不记录错误,也许jQuery首先检查提交函数是否存在,如果函数不存在则忽略请求.