Send form after user action

Question

I have a form, and a list of actions that the user can choose, depending on the action that was chosen, the user must confirm the submission, leave a message or simply send the form.

I have almost everything ready, what I’m not getting is to pick up when the user confirms this sending and the message left.

<form action="#" method="post" id="form-create">
    <div class="form-group">
        <label class="control-label" for="titulo">Titulo</label>
        <input  type="text" name="titulo" id="titulo" class="form-control" maxlength="255"/>
    </div>

    <div class="form-group">
        <label class="control-label">Ação</label>
        <div class="radio">
            <label>
                <input type="radio" name="actionFormDoc" value="1" data-tipo-mensagem="null" data-label="Manter" /> Manter
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="actionFormDoc" value="2" data-tipo-mensagem="message" data-label="Salvar" /> Salvar
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="actionFormDoc" value="3" data-tipo-mensagem="confirm" data-label="Finalizar" /> Finalizar
            </label>
        </div>
    </div>

    <div class="form-group">
        <input type="submit" class="btn btn-primary" id="save" value="Salvar" />
    </div>
</form>



<!-- MODALS -->
<div id="message" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModelMessage" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Envie uma mensagem de observação</h4>
            </div>
            <div class="modal-body">
                <textarea name="obs" id="obs" rows="3" class="form-control"></textarea>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="sendMessage">Enviar</button>
            </div>
        </div>
    </div>
</div>

<div id="confirm" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModelConfirm" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Confirmar ação?</h4>
            </div>
            <div class="modal-body">
                Confirmar ação?
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Não</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="confirmado">Sim</button>
            </div>
        </div>
    </div>
</div>

and javascript

$( function() {
    var formCreate = $("form#form-create");

    $("#save").click(function(event) {
        event.preventDefault();

        var tipoMensagem = $('input[name="actionFormDoc"]:checked').data('tipo-mensagem');
        var valMensagem = $('input[name="actionFormDoc"]:checked').data('label');
        var sendConfirm = false;

        if (tipoMensagem == 'confirm') {
            $('#confirm .modal-body').text('Deseja realmente ' +valMensagem+ ' o documento?')
            $('#confirm').modal()
                .one('click', '#confirmado', function (e) {
                sendConfirm = true;
            });
        }

        if (tipoMensagem == 'message') {
            $('#message').modal()
                .one('click', '#sendMessage', function (e) {
                sendConfirm = true;
            });
        }

        if (tipoMensagem == 'null') {
            sendConfirm = true;
        }

        if (sendConfirm == true) {
            formCreate.submit();
        }
    });
});

Follow an example link running on jsfiddle

Answer 1

The problem here is that the user confirms asynchronous with that validation that is running, so you have to change the logic that makes the formCreate.submit(); to be run after this user interaction.

Note: up to the use of .one() that you’re adding multiple times and will run the code multiple times.

I suggest you switch to:

    if (tipoMensagem == 'confirm') {
        $('#confirm .modal-body').text('Deseja realmente ' +valMensagem+ ' o documento?')
        $('#confirm').modal().off().one('click', '#confirmado', function (e) {
             enviar(formCreate);
        });
    }

    if (tipoMensagem == 'message') {
        $('#message').modal().off().one('click', '#sendMessage', function (e) {
             enviar(formCreate);
        });
    }

    if (tipoMensagem == 'null') {
        enviar(formCreate);
    }

});

function enviar(form){
    form.submit();
}

Example: http://jsfiddle.net/1zhq5rk3/1/