Add Delete Confirmation Modal To Form With jQuery

In this tutorial we are going to learn how you will add a confirmation modal box to your forms for things like deleting. Most tutorials I've seen on this only show an example for how you will do this with a form designed with one purpose and that is to delete the entity populated in the form, meaning that you only have one submit button for the purpose of deleting. This tutorial is going to show you how to add a dialog box with two submit buttons on the form, this means you can use this example on an edit form where you have one submit button to edit the entity and the other submit button to delete the entity.

#HTML Form And Modal Box

First let's start of by creating our HTML form, I'm going to keep this example very basic as the important part is the submit buttons and the JavaScript. Below is the HTML form with the modal box content underneath, the modal box has two buttons on it one to confirm the delete and another to cancel the delete.

<form action="" method="">

<p><label for="username">Username:</label> <input type="text" name="username" id="username"></p>

<input type="submit" id="delete" name="delete" value="Delete" class="confirm-delete-modal" />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>

<div class="modal modal-effect-blur" id="modal-1">
    <div class="modal-content">
        <h3>Are you sure you want to delete?</h3>
        <div>
            <button class="modal-delete">Delete</button>
            <button class="modal-delete-cancel">Cancel</button>
        </div>
    </div>
</div>
<div class="modal-overlay"></div>

Now to explain exactly what we need the functionality to do...when the form is populated with the entity data we can either edit this data and click the edit submit button, on the server side we can pick up which submit button was clicked this will be added to the $_POST variable. We don't have to do anything to the edit button as we simply want this to submit the form, but the delete button we need to disable the default behaviour and change the click event to display a modal box. Then we need to add another click event to the confirmation delete button, which will submit the form using the delete submit button so that the server-side can pick up that the delete submit button was clicked. ## The jQuery

In this example I am using jQuery to perform the functionality of the modal box and triggering the form submit. First we need to disable the default behaviour of the delete submit button, we can do this easily by adding a click event to the delete button and returning false.

$('.confirm-delete-modal').on('click', function(e){
    return false;
});

We also need to display the modal box when we disable the default behaviour, this is done by adding the HTML class of modal-show.

$('.confirm-delete-modal').on('click', function(e){
    $('#modal-1').addClass('modal-show');
    return false;
});

Now we can add the functionality to the two buttons on the modal box, the cancel button is simply going to hide the modal box by removing the modal-show HTML class.

$('.modal-delete-cancel').on('click', function(){
    $(this).closest('.modal').removeClass('modal-show');
});

Normally in jQuery you can submit a form by using the function .submit() but we need to make sure that we pick up on the server side which submit button was clicked so we want to make sure that the delete button is clicked. To do this we are going to trigger a click event on the form delete button.

$('.modal-delete').on('click', function(){
    $('.confirm-delete-modal').trigger('click');
});

The problem we have now is that we've already changed the default behaviour of this button to return false and therefore not submit the form, so we need to make sure on this trigger event we change the functionality to return true and submit the form. This can be done in many different ways in this example we are going to add a data-attr to the form element then if this is set we return true and submit the form, if it's not set then we display the modal box and return false, which gives us the final jQuery below.

var $ = jQuery.noConflict();
jQuery(document).ready(function( $ ){
    delete_confirmation_modal.init();
});

var delete_confirmation_modal =
{
    init: function()
    {
        $('.confirm-delete-modal').on('click', function(e){
            if($(this).closest('form').attr('data-submit') == "true")
            {
                $(this).closest('form').removeAttr('data-submit');
                $('.modal-delete').closest('.modal').removeClass('modal-show');
                return true;
            } else {
                $('#modal-1').addClass('modal-show');
                return false;
            }
        });

        $('.modal-delete').on('click', function(){
            $(this).closest('.modal').prev('form').attr('data-submit', 'true');
            $('.confirm-delete-modal').trigger('click');
        });

        $('.modal-delete-cancel').on('click', function(){
          $(this).closest('.modal').removeClass('modal-show');
        });
    }
}