JSFiddle - React, Tailwind, and code Playground

HTML

<form class="prompt">
    <input type="text" name="name" />
    <input type="submit" value="Submit" />
</form>

JavaScript

function getInput() {
        return new Promise(function (resolve, reject) {
            var $form = $("form.prompt").one('submit', function (event) {
                var input = $form.find("input").val();
                event.preventDefault();
                resolve(input);
            });
        });
    };
    
    // start by making essentially a "blank", resolved promise:
    var prm = Promise.resolve();

    // next, append a function to perform, which returns a promise; 
    // this will cause prm to effectively "block" until the promise 
    // getInput returns is resolved
    prm = prm.then(function() {
        return getInput().then(function(response) {
            alert("input resolved; response is " + response);
        });
    });

    // do it again -- this function won't execute until the previous promise resolves!
    prm = prm.then(function() {
        return getInput().then(function(response) {
            alert("input resolved again; response is " + response);        
        });
    });