The following uses Form buttons to mark photographs as different qualities. If Quality 1 or Quality 2 or chosen the php code should fire. However if "delete" is chosen instead of assigning a quality I would like an "Are you sure" validation before executing the script. I don't want the validation unless the delete button is pressed. As the form code even changes css I don't want the code to run at all if delete is pressed until OK on "Are you sure" has been confirmed. I tried some methods but the form ran instantaneously, probably because of the $('form').on('click', 'input[type="submit"]', function(e) { line. I stripped my attempts from this as it just confuses the issue. I would like the syntax for the validation on this. Any help greatly appreciated. (I stripped the code for the images as that is not needed in the example).

Javascript

$(function() {
    $('form').on('click', 'input[type="submit"]', function(e) {
        $.ajax({
            type: 'post',
            url: "mycode.php",
            data: $(this).parent().serialize(),
        });
        var clicked = $(this),
            imageName = clicked.data("image");
        clicked.removeClass("c_off").addClass("c_on");
        $('input[type="submit"]').each(function() {
            var self = $(this);
            if (!clicked.is(self)) {
                if (self.hasClass("c_on") && imageName == self.data("image"))
                    self.removeClass("c_on").addClass("c_off");
            }
        });
        e.preventDefault();
    });
});

HTML

<form>
    <input name="num" type="hidden" value="101">
    <input name="shw" type="hidden" value="1">
    <input type="submit" value="Delete" class="c_off" data-image="67">
</form>

<form>
    <input name="num" type="hidden" value="101">
    <input name="shw" type="hidden" value="2">
    <input type="submit" value="Quality A" class="c_on" data-image="67">
</form>

<form>
    <input name="num" type="hidden" value="101">
    <input name="shw" type="hidden" value="3">
    <input type="submit" value="Quality B" class="c_off" data-image="67">
</form>

Here is fiddle: http://jsfiddle.net/zeog65js/1/

$(function() {
    $('form').on('click', 'input[type="submit"]', function(e) {
        if($(this).val() == 'Delete') {
            if (confirm("Delete it?")) {
              doAjax($(this));
            }
        } else {
            doAjax($(this));
        }

        e.preventDefault();
    });
    function doAjax(that){
        $.ajax({
            type: 'post',
            url: "mycode.php",
            data: $(this).parent().serialize(),
        });
        var clicked = that,
            imageName = clicked.data("image");
        clicked.removeClass("c_off").addClass("c_on");
        $('input[type="submit"]').each(function() {
            var self = $(this);
            if (!clicked.is(self)) {
                if (self.hasClass("c_on") && imageName == self.data("image"))
                    self.removeClass("c_on").addClass("c_off");
                }
        });
    }
});

more