jQuery：表单未使用 $("#id").submit() 提交，但会使用“提交”按钮提交？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3303874/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery: form not submitting with $("#id").submit(), but will submit with a 'submit' button?
提问by Garrett
<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!
谢谢！
采纳答案by NateDSaint
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().
jQuerysubmit()事件添加了一个在您提交表单时发生的事件侦听器。所以你的代码基本上没有绑定到提交事件。如果您希望提交该表单，请使用老式 JavaScriptdocument.formName.submit()。
I'm leaving my original answer above intact to point out where I was off. What I meantto 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，则视为成功单击提交按钮并发生正常的浏览器行为。然后，您还以事件处理程序的形式将逻辑与标记分离。
Hopefully this makes more sense.
希望这更有意义。
回答by Adam Berecz
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:
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.
请参阅 jQuery submit() 文档：
表单及其子元素不应使用与表单属性（例如提交、长度或方法）冲突的输入名称或 ID。名称冲突会导致令人困惑的失败。有关完整的规则列表并检查您的标记是否存在这些问题，请参阅 DOMLint。
回答by sahan maldeniya
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 对象并submit()在该 DOM 元素中执行函数。
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 页面中有多个表单元素，则必须了解“表单”的正确顺序
回答by Donovan
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() 函数应该触发表单提交，如果你没有传递一个处理程序给它，但它没有的原因是因为你的提交按钮被命名为“提交”并且覆盖了表单的提交函数。
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调用<form>.submit()DOM对象的函数，但是表单内的所有输入也可以通过调用访问<form>.<inputname>。因此，如果您的输入之一被命名为“提交”，它会覆盖该<form>.submit()函数<form>.submit- 作为输入 DOM 元素......如果这有意义吗？因此，当 jQuery 调用时<form>.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 首先检查提交函数是否存在，如果函数不存在则忽略请求。
回答by Garrett
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>
按钮：
<div style="display:none"><input id="alternateSubmit" type="submit" /></div>
the crazy way to get around the form submission:
$("#alternateSubmit").click();
绕过表单提交的疯狂方式：
$("#alternateSubmit").click();
回答by Robith Ritz
erase attribute "name" in your submit button :
擦除提交按钮中的“名称”属性：
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" />
回答by vaibhav raychura
Try this, worked for me
试试这个，对我有用
if you do have submit as id or name, you need to rename that form element.
如果您确实以 id 或 name 的形式提交，则需要重命名该表单元素。
can not give id="submit" to any other element of form if you want to use element.submit() in script.
如果您想在脚本中使用 element.submit()，则不能将 id="submit" 赋予表单的任何其他元素。
回答by Joe Martinez
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 操作。
回答by Developer
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";
