表单提交 jQuery 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22982741/
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
Form Submit jQuery does not work
提问by Phil
I have that form
我有那个表格
<form action="deletprofil.php" id="form_id" method="post">
<div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
<button type="submit" name="submit" value="1" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
<button type="submit" name="submit" value="2" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
</div>
</form>
and that Popup from jQuery Mobile
和那个弹出窗口 jQuery Mobile
<div class="ui-popup-container pop in ui-popup-active" id="popupDialog-popup" tabindex="0" style="max-width: 1570px; top: 2239.5px; left: 599px;">
<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;" class="ui-popup ui-body-b ui-overlay-shadow ui-corner-all">
<div data-role="header" data-theme="a" role="banner" class="ui-header ui-bar-a">
<h1 class="ui-title" role="heading" aria-level="1">Delete Page?</h1>
</div>
<div role="main" class="ui-content">
<h3 class="ui-title">Sicher dass Sie das Profil l?schen wollen?</h3>
<p>Es kann nicht mehr rückg?ngig gemacht werden.</p>
<a href="#" id="NOlink" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">Abbrechen</a>
<a href="#" id="OKlink" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">OK</a>
</div>
</div>
</div>
with my jQuery Code
用我的 jQuery 代码
<script language="javascript" type="text/javascript">
$(function(){
$('#form_id').bind('submit', function(evt){
$form = this;
evt.preventDefault();
$("#popupDialog").popup('open');
$("#NOlink").bind( "click", function() {
$("#popupDialog").popup('close');
});
$("#OKlink").bind( "click", function() {
$("#popupDialog").popup('close');
$( "#form_id" ).submit();
});
});
});
</script>
The popup shows up but the form submit does not work. Does someone have any ideas?
弹出窗口显示但表单提交不起作用。有人有什么想法吗？
回答by mplungjan
The NUMBER ONE error is having ANYTHING with the reserved word submitas IDor NAMEin your form.
头号错误是具有保留字ANYTHINGsubmit作为ID或NAME在窗体中。
if you do have submitas id or name, you need to rename that form element, if you want to call .submit()on the form since the form's submit method/handler is shadowed by the name/id attribute.
如果您确实有submitid 或 name，您需要重命名该表单元素，如果您想调用.submit()该表单，因为表单的提交方法/处理程序被 name/id 属性隐藏。
Several other things:
其他几件事：
As mentioned, you need to submit the form using a simpler event than the jQuery one
如前所述，您需要使用比 jQuery 更简单的事件提交表单
BUT you also need to cancel the clicks on the links
但是您还需要取消对链接的点击
Why, by the way, do you have two buttons? Since you use jQuery to submit the form, you will never know which of the two buttons were clicked unless you set a hidden field on click.
为什么，顺便说一句，你有两个按钮？由于您使用 jQuery 提交表单，除非您在单击时设置隐藏字段，否则您永远不会知道单击了两个按钮中的哪一个。
<form action="deletprofil.php" id="form_id" method="post">
<div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
<button type="submit" value="1" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
<button type="submit" value="2" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
</div>
</form>
$(function(){
$("#NOlink, #OKlink").on("click", function(e) {
e.preventDefault(); // cancel default action
$("#popupDialog").popup('close');
if (this.id=="OKlink") {
document.getElementById("form_id").submit(); // or $("#form_id")[0].submit();
}
});
$('#form_id').on('submit', function(e){
e.preventDefault();
$("#popupDialog").popup('open');
});
});
Judging from your comments, I think you really want to do this:
从你的评论来看，我认为你真的想这样做：
<form action="deletprofil.php" id="form_id" method="post">
<input type="hidden" id="whichdelete" name="whichdelete" value="" />
<div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">
<button type="button" value="1" class="delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>
<button type="button" value="2" class="delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>
</div>
</form>
$(function(){
$("#NOlink, #OKlink").on("click", function(e) {
e.preventDefault(); // cancel default action
$("#popupDialog").popup('close');
if (this.id=="OKlink") {
// trigger the submit event, not the event handler
document.getElementById("form_id").submit(); // or $("#form_id")[0].submit();
}
});
$(".delete").on("click", function(e) {
$("#whichdelete").val(this.value);
});
$('#form_id').on('submit', function(e){
e.preventDefault();
$("#popupDialog").popup('open');
});
});
回答by Arun P Johny
Because when you call $( "#form_id" ).submit();it triggers the external submit handler which prevents the default action, instead use
因为当您调用$( "#form_id" ).submit();它时会触发阻止默认操作的外部提交处理程序，而是使用
$( "#form_id" )[0].submit();
or
或者
$form.submit();//declare `$form as a local variable by using var $form = this;
When you call the dom element's submit method programatically, it won't trigger the submit handlers attached to the element
当您以编程方式调用 dom 元素的 submit 方法时，它不会触发附加到该元素的提交处理程序
回答by BrownEyes
According to http://api.jquery.com/submit/
根据http://api.jquery.com/submit/
The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to elements. Forms can be submitted either by clicking an explicit
<input type="submit">,<input type="image">, or<button type="submit">, or by pressing Enterwhen certain form elements have focus.
当用户尝试提交表单时，将提交事件发送到元素。它只能附加到元素上。可以通过单击明确的
<input type="submit">、<input type="image">、 或<button type="submit">或Enter在某些表单元素具有焦点时按来提交表单。
So basically, .submitis a binding function, to submit the form you can use simple Javascript:
所以基本上，.submit是一个绑定函数，提交表单你可以使用简单的Javascript：
document.formName.submit().
回答by Benni
Since every control element gets referenced with its name on the form element (see forms specs), controls with name "submit" will override the build-in submit function.
由于每个控件元素都在表单元素上以其名称引用（请参阅表单规范），因此名称为“submit”的控件将覆盖内置提交函数。
Which leads to the error mentioned in comments above:
这导致了上面评论中提到的错误：
Uncaught TypeError: Property 'submit' of object
#<HTMLFormElement>is not a function
未捕获的类型错误：对象的属性“提交”
#<HTMLFormElement>不是函数
As in the accepted answer above the simplest solution would be to change the name of that control element.
正如上面接受的答案一样，最简单的解决方案是更改该控制元素的名称。
However another solution could be to use dispatchEventmethod on form element:
然而，另一种解决方案可能是dispatchEvent在表单元素上使用方法：
$("#form_id")[0].dispatchEvent(new Event('submit'));
回答by Ali Rasouli
if there is one error in the the submit function,the submit function will be execute. in other sentences prevent default(or return false) does not work when one error exist in submit function.
如果提交函数中有一个错误，则提交函数将被执行。在其他句子中，当提交函数中存在一个错误时，防止默认（或返回假）不起作用。
回答by Richard Bradley Smith
If you are doing form validation such as
如果您正在进行表单验证，例如
type="submit" onsubmit="return validateForm(this)"
validateForm = function(form) {
if ($('input#company').val() === "" || $('input#company').val() === "Company") {
$('input#company').val("Company").css('color','red'); finalReturn = false;
$('input#company').on('mouseover',(function() {
$('input#company').val("").css('color','black');
$('input#company').off('mouseover');
finalReturn = true;
}));
}
return finalReturn;
}
Double check you are returning true. This seems simple but I had
仔细检查您是否返回 true。这看起来很简单，但我有
var finalReturn = false;
When the form was correct it was not being corrected by validateForm and so not being submitted as finalReturn was still initialized to false instead of true. By the way, above code works nicely with address, city, state and so on.
当表单正确时，validateForm 不会对其进行更正，因此不会被提交，因为 finalReturn 仍然被初始化为 false 而不是 true。顺便说一下，上面的代码可以很好地处理地址、城市、州等。
回答by DevBodin
Alright, this doesn't apply to the OP's exact situation, but for anyone like myself who comes here facing a similar issue, figure I should throw this out there-- maybe save a headache or two.
好吧，这并不适用于 OP 的确切情况，但对于像我这样面临类似问题的人来说，我应该把它扔掉——也许可以避免一两个头痛。
If you're using an non-standard "button" to ensure the submitevent isn't called:
如果您使用非标准的“按钮”来确保submit不会调用该事件：
<form>
<input type="hidden" name="hide" value="1">
<a href="#" onclick="submitWithChecked(this.form)">Hide Selected</a>
</form>
Then, when you try to access this.formin the script, it's going to come up undefined. As I discovered, apparently anchor elements don't have same access to a parent formelement the way your standard form elements do.
然后，当您尝试this.form在脚本中访问时，它将出现未定义。正如我发现的那样，显然锚元素不能form像标准表单元素那样访问父元素。
In such cases, (again, assuming you are intentionally avoiding the submitevent for the time-being), you can use a buttonwith type="button"
在这种情况下，（同样，假设您submit暂时有意避开该事件），您可以使用buttonwithtype="button"
<form>
<input type="hidden" name="hide" value="1">
<button type="button" onclick="submitWithChecked(this.form)">Hide Selected</a>
</form>
(Addendum 2020: All these years later, I think the more important lesson to take away from this is to check your input. If my function had bothered to check that the argument it received was actually a form element, the problem would have been much easier to catch.)
（附录 2020：这么多年后，我认为从中吸取的更重要的教训是检查您的输入。如果我的函数费心去检查它收到的参数实际上是一个表单元素，那么问题就会很多更容易捕捉。）
回答by Antony
Don't forget to close your form with a </form>. That stopped submit() working for me.
不要忘记用</form>. 这停止了 submit() 为我工作。
回答by Badar Uddin Tariq
Some time you have to give all the form element into a same div.
有时您必须将所有表单元素放入同一个 div 中。
example:-
例子：-
If you are using ajax submit with modal.
如果您使用带模态的 ajax 提交。
So all the elements are in modal body.
所以所有元素都在模态体中。
Some time we put submit button in modal footer.
有时我们将提交按钮放在模态页脚中。
