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

javascript, jquery, twitter-bootstrap-3

Solution

I ended up using AnaelFavre's PopConfirm jQuery plugin, which leverages Bootstrap's popover feature. I made some minor edits to the main component, `jquery.popconfirm.js` (such as changing the buttons to English instead of the default French). It's nice because it handles a form submission or a link click automatically. The only thing I wish it would do is toggle closed any other open popovers when `.popConfirm()` is triggered. But, I'm sure this could easily be solved.

Usage is pretty simple. To solve my problem above, to confirm a form submission with a Bootstrap popover, use the following example:

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"
});

*This is all working using jQuery 1.10.2 and 2.0.3, Bootstrap 3.0.3, and the PopConfirm plugin on 1/2/14 *

Problem

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: 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!!

Original source