1

Tenho um formulário, e uma lista de ações que o usuário pode escolher, dependendo da ação que foi escolhida, o usuário deve confirmar o envio, deixar uma mensagem ou simplesmente envia o formulário.

Já tenho quase que tudo pronto, o que não estou conseguindo é pegar quando o usuário confirma esse envio e a mensagem deixada.

<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>

e o 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();
        }
    });
});

Segue um link com exemplo rodando no jsfiddle

1 Resposta 1

1

O problema aqui é que o utilizador confirma asíncrono com essa validação que está a correr, então tens de mudar a lógica que faz o formCreate.submit(); para ser corrido depois dessa interação do utilizador.

Nota: atênção ao uso do .one() que estás a adicionar multiplas vezes e vai correr o código multiplas vezes.

Sugiro mudares para:

    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();
}

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

4
  • Sergio, essas mudanças que sugeriu já me ajudaram, só não entendi porque parou de funcionar os botões de fechar o modal. Commented 14/09/2015 às 11:14
  • @MarceloDiniz quando se usa $('#message').modal().off() isso retira todos os oscultadores de evento. Testa assim: jsfiddle.net/1zhq5rk3/2. Funciona?
    – Sergio
    Commented 14/09/2015 às 13:02
  • Acabei resolvendo assim: jsfiddle.net/marcelod/1hbLL8an essa questao toda, ainda assim agradeco sua ajuda. Commented 14/09/2015 às 14:09
  • @MarceloDiniz ótimo. Se achares que a minha resposta ajudou a resolver o problema podes marcar como aceite, se não podes dar uma resposta tua a explicar o que funcionou.
    – Sergio
    Commented 14/09/2015 às 15:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .