JSFiddle - React, Tailwind, and code Playground

HTML

<form id="myForm" action="javascript:alert('form submitted')" method="post">
    <input type="submit" value="Submit">
</form>

CSS

body {
    margin: 12px; 
}
h3 {
    margin: 15px 0 2px 0;
}
form {
    margin: 0 0 5px 0;
    border: 1px solid #000;
    padding: 10px;
}

JavaScript

var formSubmitQueue = 'formSubmitQueue';

function mySubmitHandler() {
    var def = $.Deferred();
    if (confirm("Handler A: Click\n \"OK\"  for ajax success\n \"Cancel\" for ajax error")) { def.resolve(); }
    else { def.reject(); }
    return def.promise();
}

//Now build the queue of other functions to be executed on ajax success
$("#myForm").on(formSubmitQueue, function(e, def) {
    if(def.state() !== 'rejected') {
        if (!confirm('Handler B')) {
            def.reject();
        }
    }
}).on(formSubmitQueue, function(e, def) {
    if(def.state() !== 'rejected') {
        if (!confirm('Handler C')) {
            def.reject();
        }
    }
}).on(formSubmitQueue, function(e, def) {
    if(def.state() !== 'rejected') {
        if (!confirm('Handler D')) {
            def.reject();
        }
    }
});

$("#myForm").on('submit', function(e) {
    var $form = $(this);
    e.preventDefault();
    mySubmitHandler().done(function() {
        //alert('simulated ajax success');
        var def = $.Deferred().done(function() {
            $form.get(0).submit();
        }).fail(function() {
            alert('A handler in the custom queue suppressed form submission');
        });
        //add extra custom handler to resolve the Deferred.
        $form.off(formSubmitQueue+'.last').on(formSubmitQueue+'.last', function(e, def) {
            def.resolve();
        });
        $form.trigger(formSubmitQueue, def);
    }).fail(function() {
        alert('ajax failed');
    });
});