jQuery:表单没有提交$(“#id”)。submit(),但是会提交一个'submit'按钮?

时间:2022-11-24 08:40:49
<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?

正如你所看到的,它调用$(“#loadForm”)。submit();,但是表单没有提交(即页面没有刷新)。这是为什么?

thanks!

谢谢!

8 个解决方案

#1


17  

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

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

The jQuery submit() event adds an event listener to happen when you submit the form. So your code is binding essentially nothing to the submit event. If you want that form to be submitted, you use old-school JavaScript (document.formName.submit()).

jQuery submit()事件会在您提交表单时添加一个事件侦听器。因此,您的代码对提交事件基本上没有任何约束力。如果您希望提交该表单,则使用旧式JavaScript(document.formName.submit())。

edit:

编辑:

I'm leaving my original answer intact to point out where I was off (as at least two people have already downvoted me for). What I MEANT to say, is that if you have a function like this, it's confusing why you would post the values in an ajax portion and then use jQuery to submit the form. In this case, I would bind the event to the click of the button, and then return true if you want it to return, otherwise, return false, like so

我完整地留下原来的答案,指出我离开的地方(因为至少有两个人已经为我投票了)。我想说的是,如果你有这样的函数,那么为什么你要在ajax部分发布值然后使用jQuery提交表单会让你感到困惑。在这种情况下,我会将事件绑定到单击按钮,然后如果要返回则返回true,否则返回false,如此

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

If this function returns true, then it counts as successful click of the submit button and the normal browser behavior happens. Then you've also separated the logic from the markup in the form of an event handler.

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

Make more sense?

更有意义吗?

#2


72  

Change button's "submit" name to something else. That causes the problem. See dennisjq's answer at: http://forum.jquery.com/topic/submiting-a-form-programmatically-not-working

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

See the jQuery submit() documentation:

请参阅jQuery submit()文档:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.

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

#3


19  

I use $("form")[0].submit()

我用$(“form”)[0] .submit()

here $("form") returns an array of DOM elements so by accessing the relevant index we can get the DOM object for the form element and execute the submit() function within that DOM element.

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

Draw back is if you have several form elements within one html page you have to have an idea about correct order of "form"s

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

#4


13  

I had a similar problem, took a while to figure it out. jQuery's .submit() function should trigger a form submit if you don't pass a handler to it, but the reason it doesn't is because your submit button is named "submit" and is overriding the submit function of the form.

我遇到了类似的问题,需要一段时间才弄明白。如果你没有向它传递一个处理程序,jQuery的.submit()函数应该触发一个表单提交,但它不是因为你的提交按钮被命名为“submit”并覆盖了表单的提交功能。

i.e. jQuery calls the <form>.submit() function of the DOM object, but all inputs within a form can also be access by calling <form>.<inputname>. So if one of your input's is named 'submit' it overrides the <form>.submit() function with <form>.submit - being the input DOM element.... if that makes sense? So when jQuery calls <form>.submit() it doesn't work because submit is no longer a function. So, if you change the name of your button it should work.

即jQuery调用DOM对象的

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

Not sure why the console doesn't log an error, perhaps jQuery is first checking that the submit function exists and is just ignoring the request if the function doesn't exist.

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

#5


4  

i added an invisible submit button to the form, and instead of calling the submit() function, i call the click() function on the submit button =)

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

the button: <div style="display:none"><input id="alternateSubmit" type="submit" /></div>

按钮:

the crazy way to get around the form submission: $("#alternateSubmit").click();

绕过表单提交的疯狂方法:$(“#alternateSubmit”)。click();

#6


2  

erase attribute "name" in your submit button :

在提交按钮中删除属性“name”:

this is your code :

这是你的代码:

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

should be like this :

应该是这样的:

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

#7


-1  

Looks like you have the submit happening in a callback that only runs after an ajax post in your onclick handler.

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

In other words, when you click submit, the browser has to first go out and hit the checkForReplace action.

换句话说,当您单击“提交”时,浏览器必须先出去并点击checkForReplace操作。

#8


-3  

its Ajax call, why you need to submit your form while you already process it using ajax. You can navigate away from page using

它的Ajax调用,为什么你需要在使用ajax处理它时提交表单。您可以使用导航离开页面

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

#1


17  

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

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

The jQuery submit() event adds an event listener to happen when you submit the form. So your code is binding essentially nothing to the submit event. If you want that form to be submitted, you use old-school JavaScript (document.formName.submit()).

jQuery submit()事件会在您提交表单时添加一个事件侦听器。因此,您的代码对提交事件基本上没有任何约束力。如果您希望提交该表单,则使用旧式JavaScript(document.formName.submit())。

edit:

编辑:

I'm leaving my original answer intact to point out where I was off (as at least two people have already downvoted me for). What I MEANT to say, is that if you have a function like this, it's confusing why you would post the values in an ajax portion and then use jQuery to submit the form. In this case, I would bind the event to the click of the button, and then return true if you want it to return, otherwise, return false, like so

我完整地留下原来的答案,指出我离开的地方(因为至少有两个人已经为我投票了)。我想说的是,如果你有这样的函数,那么为什么你要在ajax部分发布值然后使用jQuery提交表单会让你感到困惑。在这种情况下,我会将事件绑定到单击按钮,然后如果要返回则返回true,否则返回false,如此

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

If this function returns true, then it counts as successful click of the submit button and the normal browser behavior happens. Then you've also separated the logic from the markup in the form of an event handler.

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

Make more sense?

更有意义吗?

#2


72  

Change button's "submit" name to something else. That causes the problem. See dennisjq's answer at: http://forum.jquery.com/topic/submiting-a-form-programmatically-not-working

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

See the jQuery submit() documentation:

请参阅jQuery submit()文档:

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.

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

#3


19  

I use $("form")[0].submit()

我用$(“form”)[0] .submit()

here $("form") returns an array of DOM elements so by accessing the relevant index we can get the DOM object for the form element and execute the submit() function within that DOM element.

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

Draw back is if you have several form elements within one html page you have to have an idea about correct order of "form"s

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

#4


13  

I had a similar problem, took a while to figure it out. jQuery's .submit() function should trigger a form submit if you don't pass a handler to it, but the reason it doesn't is because your submit button is named "submit" and is overriding the submit function of the form.

我遇到了类似的问题,需要一段时间才弄明白。如果你没有向它传递一个处理程序,jQuery的.submit()函数应该触发一个表单提交,但它不是因为你的提交按钮被命名为“submit”并覆盖了表单的提交功能。

i.e. jQuery calls the <form>.submit() function of the DOM object, but all inputs within a form can also be access by calling <form>.<inputname>. So if one of your input's is named 'submit' it overrides the <form>.submit() function with <form>.submit - being the input DOM element.... if that makes sense? So when jQuery calls <form>.submit() it doesn't work because submit is no longer a function. So, if you change the name of your button it should work.

即jQuery调用DOM对象的

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

Not sure why the console doesn't log an error, perhaps jQuery is first checking that the submit function exists and is just ignoring the request if the function doesn't exist.

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

#5


4  

i added an invisible submit button to the form, and instead of calling the submit() function, i call the click() function on the submit button =)

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

the button: <div style="display:none"><input id="alternateSubmit" type="submit" /></div>

按钮:

the crazy way to get around the form submission: $("#alternateSubmit").click();

绕过表单提交的疯狂方法:$(“#alternateSubmit”)。click();

#6


2  

erase attribute "name" in your submit button :

在提交按钮中删除属性“name”:

this is your code :

这是你的代码:

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

should be like this :

应该是这样的:

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

#7


-1  

Looks like you have the submit happening in a callback that only runs after an ajax post in your onclick handler.

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

In other words, when you click submit, the browser has to first go out and hit the checkForReplace action.

换句话说,当您单击“提交”时,浏览器必须先出去并点击checkForReplace操作。

#8


-3  

its Ajax call, why you need to submit your form while you already process it using ajax. You can navigate away from page using

它的Ajax调用,为什么你需要在使用ajax处理它时提交表单。您可以使用导航离开页面

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