How to confirm a form submission with Bootstrap 3 popovers and jQuery

Question

问

How to confirm a form submission with Bootstrap 3 popovers and jQuery

手机用户2702938100 发布于 2023-02-07 10:14

I have rows of items in a list that each have their own delete button. Before deleting the item, I'd like to use Bootstrap's popovers to display a confirmation before the form is actually submitted:

enter image description here

I used to use the Fast Confirm jQuery plugin for this, but I'm sure there's a simpler, cleaner way to do this without plugins.

I can pass the values from the form to jQuery, and trigger the popover, but I'm not sure how to submit the form based on the responses selected in the popover. Also, whenever another delete button is triggered, it would be preferable to disable any other open popovers. I recognize that this is fundamentally a Javascript/jQuery question, and I would greatly appreciate any help or suggestions.

Here's a Bootply that shows my progress so far: http://www.bootply.com/103376

Thanks!!

bhall.. 6

我最终使用了AnaelFavre的PopConfirm jQuery插件,该插件利用了Bootstrap的popover功能.我对主要组件进行了一些小的修改jquery.popconfirm.js(例如将按钮更改为英语而不是默认的法语).这很好,因为它会自动处理表单提交或链接点击.我希望它能做的唯一事情就是在触发时关闭任何其他开放式弹出式窗口.popConfirm().但是,我相信这很容易解决.

用法非常简单.要解决上面的问题,要使用Bootstrap popover确认表单提交,请使用以下示例:

HTML:

JS:

$(".btn-delete").popConfirm({
    title: "Delete Item",
    content: "Are you sure you want to delete this item?",
    placement: "top"
});

*这一切都在使用jQuery 1.10.2和2.0.3,Bootstrap 3.0.3以及1/2/14*上的PopConfirm插件

1 个回答

我最终使用了AnaelFavre的PopConfirm jQuery插件,该插件利用了Bootstrap的popover功能.我对主要组件进行了一些小的修改jquery.popconfirm.js(例如将按钮更改为英语而不是默认的法语).这很好,因为它会自动处理表单提交或链接点击.我希望它能做的唯一事情就是在触发时关闭任何其他开放式弹出式窗口.popConfirm().但是,我相信这很容易解决.

用法非常简单.要解决上面的问题,要使用Bootstrap popover确认表单提交,请使用以下示例:

HTML:
```
<form action="yourDeleteScript.php" method="post">
<input type="hidden" name="id" value="100">
<button class="btn btn-default btn-delete" type="submit">Delete</button>
</form>

<script type="text/javascript" src="jquery.popconfirm.js"></script>
```
JS:
```
$(".btn-delete").popConfirm({
    title: "Delete Item",
    content: "Are you sure you want to delete this item?",
    placement: "top"
});  
```
*这一切都在使用jQuery 1.10.2和2.0.3,Bootstrap 3.0.3以及1/2/14*上的PopConfirm插件
2023-02-07 10:18 回答

无聊的紫布丁

撰写答案