jQuery 使用 bootbox.confirm() 确认表单提交
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11313586/
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
Confirm form submission using bootbox.confirm()
提问by theDmi
I have a form and want to intercept form submission to display a confirmation dialog using bootbox.
我有一个表单，想拦截表单提交以使用bootbox显示一个确认对话框。
- User enters some data
- User hits submit
- A confirmation dialog is shown
- 用户输入一些数据
- 用户点击提交
- 显示确认对话框
If the user hits OK, then the form should submit, if not it should just stay on the page.
如果用户点击OK，那么表单应该提交，否则它应该留在页面上。
I tried this:
我试过这个：
$('#myForm').submit(function() {
return bootbox.confirm("Are you sure?");
});
However, bootbox.confirm()immediately returns, the confirmation dialog is hidden again.
但是，bootbox.confirm()立即返回，确认对话框再次隐藏。
I then noticed that there is a callback parameter on bootbox.confirm(). However, if I'm to call $('#myForm').submit()from the callback, this will obviously just show the confirmation dialog again.
然后我注意到 上有一个回调参数bootbox.confirm()。但是，如果我$('#myForm').submit()要从回调中调用，这显然只会再次显示确认对话框。
So what is the proper way to confirm form submission?
那么确认表单提交的正确方法是什么？
回答by Nuno Reis
I only got this working by preventing the default form behaviour, here is the solution below. I'm using this in a list of forms, each one with a submit delete button and it works fine.
我只是通过防止默认表单行为来实现这一点，这是下面的解决方案。我在一个表单列表中使用它，每个表单都有一个提交删除按钮，它工作正常。
<script type="text/javascript">
$('form').submit(function(e) {
var currentForm = this;
e.preventDefault();
bootbox.confirm("Are you sure?", function(result) {
if (result) {
currentForm.submit();
}
});
});
</script>
回答by theDmi
As always: Just after you ask a question, you find the answer yourself :-) . See this answer: https://stackoverflow.com/a/2420806/219187(also note the comment in the answer).
与往常一样：在您提出问题之后，您会自己找到答案 :-) 。请参阅此答案：https: //stackoverflow.com/a/2420806/219187（另请注意答案中的评论）。
Adapted to my problem, the solution looks as follows:
针对我的问题，解决方案如下：
$('#myForm').submit(function() {
var currentForm = this;
bootbox.confirm("Are you sure?", function(result) {
if (result) {
currentForm.submit();
}
});
});
回答by Amine Minou
This code works perfectly for me...
这段代码非常适合我......
<script type="text/javascript">
$('#myForm').click(function(e) {
e.preventDefault();
var msg = 'Souhaitez vous vraiment supprimer ce produit ?';
bootbox.confirm(msg, function(result) {
if (result) {
$('#myForm').submit();
}
});
});
</script>
回答by Toni Kuosmanen
You can a solve this by passing additional parameters to your submit handler using the .trigger() method:
您可以通过使用 .trigger() 方法将附加参数传递给您的提交处理程序来解决此问题：
$('form').submit(function (e, confirmed) {
var currentForm = $(e.currentTarget);
if (!confirmed) {
e.preventDefault();
bootbox.confirm("Are you sure?", function (result) {
if (result) {
currentForm.trigger('submit', { confirmed: true });
}
});
}
});
When the form is first submitted, the 'confirmed' parameter is undefined and the bootbox dialog is displayed. If the user confirms the action in the dialog, submit event is triggered again with the additional parameter and the form is submitted normally.
首次提交表单时，未定义“已确认”参数并显示引导框对话框。如果用户在对话框中确认了该操作，则提交事件会再次触发并带有附加参数，表单将正常提交。
回答by Alexandr Sulimov
My solution
我的解决方案
@Html.ActionLink("Delete", "DeleteReport", new { id = item.Id }, new { @class = "btn btn-danger", onclick = String.Format("return ASE.ConfirmAction(this.href, 'Delete {0}?');", item.Name) })
var ASE = {
ConfirmAction: function (href, text) {
bootbox.confirm(text, function (result) {
if (result)
window.location = href;
});
return false;
}
}
