Question

I’m looking for why my form isn’t submitting with that code :

$("#my_form").on('submit', function(e) {
    if (!myCondition) {
        if (anotherCondition === true) {

            e.preventDefault();
            $('#modal').modal('show');
            $("#btn_valid").on('click', function(e) {
                return true;
            });       
        }
    }
    return true;
});

The modale (who was present in the DOM) is showing but then if I hit the #btn_valid the form is not submitted and the modal stay on screen.

If I remove the e.preventDefault, the process is not stopped, meaning that the modale is showing and right after the form is submitting without pressing the button on the modale.

What am I doing wrong ?

Thanks.

Answer 1

Try this:

$(function() {
    var submitForm = false;
    $('#my_form').submit(function(e) {
        if (!submitForm) {
            e.preventDefault();
            $('#modal').modal('show');
        }
    });

    $("#btn_valid").on('click', function(e) {
        submitForm = true;
        $('#my_form').submit();
    });
});

You will see that once you click your button in the modal it will set submitForm to true and when you enter the form submit callback handler you will fall through the if statement, finally submitting the form as usual.