0

Olá estou desenvolvendo um formulário de solicitação, o problema é o botão, ou ele salva (usando o type submit), ou ele aparece o modal (usando o type button), há alguma forma de fazer um botão que salve os dados do formulário e ao mesmo tempo exiba a mensagem modal? Estou aprendendo, aceito qualquer sugestão.

<button type="submit" name="botao" data-target="#modal-success" class="col-md-12 btn btn-success">SOLICITAR</button>
<div class="modal fade" id="modal-success">
        <div class="modal-dialog">
          <div class="modal-content bg-success">
            <div class="modal-header">
              <h4 class="modal-title">Mensagem de Confirmação</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <p>Solicitação registrada com êxito</p>
              <p>Para consultar o nº do seu TICKET consulte o Histórico de Solicitação</p>
            </div>
            <div class="modal-footer justify-content-between">
              <a href="home.php?acao=chamados"><button type="button" class="btn btn-outline-light">Histórico de Chamados</button></a>
              <button type="button" class="btn btn-outline-light" data-dismiss="modal">Fechar</button>
          </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>
1
  • 1
    Aconselho você fazer uma requisição ajax com o submit e quando a sua requisição retornar sucesso (você realmente conseguiu salvar a solicitação). dai por javascript vc abre o modal com a mensagem de sucesso. Pois mesmo que você consiga abri o modal e submeter ao mesmo tempo. ele sempre mostrará o modal, até mesmo quando não der certo 8/02/2021 às 18:16

1 Resposta 1

1

Sempre ao realizar o submit a página será recarregada sendo assim "abortando" o processo restante que seria a exibição do modal.

Então você pode submeter os dados sem recarregar a página usando o ajax, ou deixar a página ser recarregada e preenchendo modal usando o php+js ou até mesmo escrevendo modal inteiro com o php.

Eu particularmente prefiro o ajax neste cenário, vou colocar um exemplo bem simples e a adaptação bem como melhoria fica contigo, seria algo próximo disso:

jQuery $.ajax https://api.jquery.com/jquery.ajax/

Bootstrap .modal("show") https://getbootstrap.com/docs/4.0/components/modal/#options

<?php

//apenas se receber um post do tipo ajax
if($_POST['ajax']) {
$js = "";
if($_POST['solicitar']) {
    /* ... faz todo o processo de solicitação */
    if($solicitado) $js = "modalShow('Titulo Sucesso', 'Nome = {$_POST['nome']}', 'Rodapé', 'modal-md', 'bg-success')";
    else $js = "modalShow('Titulo Erro', 'Nome = {$_POST['nome']}', 'Rodapé', 'modal-sm', 'bg-danger')";
}
die($js);
}

?>
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
    <div class="content">
    <div class="row">
        <div class="col-sm-4">
        <form id="form-submit">
            <div class="form-group">
            <input type="text" class="form-control" id="nome">
            </div>
            <button type="submit" class="btn btn-primary">Enviar</button>
        </form>
        </div>
    </div>
    </div>
    
    <div class="modal fade" id="modal">
    <div class="modal-dialog">
        <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title"></h4>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body"></div>
        <div class="modal-footer justify-content-between"></div>
        </div>
    </div>
    </div>
    
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script>
    $(document).ready(function() {
        $('#form-submit').submit(function(e) {
        e.preventDefault(); //evitar o comportamento padrão do submit
        $.ajax({
            url: '<?=$_SERVER['PHP_SELF']?>',
            type: 'POST',
            data: {
            ajax: true, 
            solicitar: true, 
            nome: $('#nome').val()
            }
        })
        .done(function(res) {
            console.log("success");
            eval(res); //executa o js da resposta
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
        
    
        });
    });
    
    function modalShow(title, body, footer, width = 'modal-md', dialogClass = 'bg-success') {
        //tamanho do modal, modal-sm, modal-md, modal-lg
        if(width) $('#modal .modal-dialog').addClass(width);
        
        //bg-success ou outras classes que deseje aplicar
        if(dialogClass) $('#modal .modal-content').addClass(dialogClass);
        
        //setar o titulo
        $('#modal .modal-header .modal-title').html(title);
        
        //setar o body
        $('#modal .modal-body').html(body);
        
        //setar o footer
        $('#modal .modal-footer').html(footer);
        
        //disparar o modal
        $("#modal").modal('show');
    }
    </script>
</body>
</html>

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 .