Double Confirmation Plugin With jQuery And Bootstrap - safe-delete

safe-delete is a useful jQuery plugin that uses Bootstrap modal component to create a double confirmation dialog for safe delete action.

The plugin disables the Delete action button until you type the correct Safe Text (password/key/authentication code) you specify.

Supports both Bootstrap 4 and Bootstrap 3.

How to use it:

1. Include jQuery library and Bootstrap framework on the webpage.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>

2. Include the safe-delete-bs4.js(for Bootstrap 4) or safe-delete.js (for Bootstrap 3) after jQuery.

<script src="/path/to/safe-delete-bs4.js"></script>
<!-- OR -->
<script src="/path/to/safe-delete.js"></script>

3. Attach the plugin to your delete action button. That's it.

<button class="btn btn-danger btn-safe-delete" data-safe-delete-id="1234">
  DELETE
</button>

$('.btn-safe-delete').on('click', function(){
  $(this).safeDelete();
});

4. Customize the case sensitive Safe Word (Default: DELETE.).

$('.btn-safe-delete').on('click', function(){
  $(this).safeDelete({
    safeText : "jQueryScript"
  });
});

5. Customize the default Delete/Cancel buttons.

$('.btn-safe-delete').on('click', function(){
  $(this).safeDelete({
    deleteButton : "DELETE",
    cancelButton : "NEVERMIND"
  });
});

6. Customize the title of the confirm dialog.

$('.btn-safe-delete').on('click', function(){
  $(this).safeDelete({
    popupTitle : "Type jQueryScript then click the button"
  });
});

7. Execute a callback when you confirm the delete action.

$('.btn-safe-delete').on('click', function(){
  $(this).safeDelete({
    yesCallback : function(){
      $.ajax({
          url: '/my/delete/url/' + id,
          type: 'DELETE'
      });
    }
  });
});

8. Execute a callback when you cancel the delete action.

$('.btn-safe-delete').on('click', function(){
  $(this).safeDelete({
    noCallback: function(){}
  });
});

---

This awesome jQuery plugin is developed by jqueryscript. For more Advanced Usages, please check the demo page or visit the official website.