Pink Code Pink Code - 5 months ago 50
jQuery Question

confirm delete using bootstrap 3 modal box

i need to confirm delete using bootstrap 3 modal box(YES/NO). how do can create this?

HTML Code:

<form action ="<?php echo $URL .'/admin/privileges.php?action=editable' ?>" method="POST">
<button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button></td>
</form>

Answer

Working demo http://jsfiddle.net/L3ddq/1/

You need the modal in your HTML. When the delete button is clicked it pops the modal. It's also important to prevent the click of that button from submitting the form. When the confirmation is clicked, that submits the form.

<form action ="<?php echo $URL .'/admin/privileges.php?action=editable' ?>" method="POST">
<button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button>
</form>

<div id="confirm" class="modal hide fade">
  <div class="modal-body">
    Are you sure?
  </div>
  <div class="modal-footer">
    <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
    <button type="button" data-dismiss="modal" class="btn">Cancel</button>
  </div>
</div>

jQuery

$('button[name="remove_levels"]').on('click', function(e){
    var $form=$(this).closest('form'); 
    e.preventDefault();
    $('#confirm').modal({ backdrop: 'static', keyboard: false })
        .one('click', '#delete', function() {
            $form.trigger('submit'); // submit the form
        });
        // .one() is NOT a typo of .on()
});
Comments