0

Boa noite pessoal, tenho uma dúvida a respeito de modal. Eu possuo um form de confirmação de endereço, porém eu enviei meus dados via banco, até ai tudo bem, o problema é: gostaria de saber quando eu clico no botão confirmar como eu faço para ele me retornar uma modal "Seu pedido foi registrado"?

PedidosCLientes.php

 <form action="connectpedido.php" id="contact_form" class="contact-form" method="post">
  <ul class="row">
    <li class="col-sm-12">
      <label>
        <input type="text" class="form-control" name="cliente_nome" id="nome" placeholder="Nome *" x-moz-errormessage="campo obrigatório" required />
      </label>
    </li>
    <li class="col-sm-6">
      <label>
        <input type="text" class="form-control" name="cliente_email" id="email" placeholder="E-mail *" required x-moz-errormessage="campo obrigatório" />
      </label>
    </li>
    <li class="col-sm-6">
      <label>
        <input type="text" class="form-control" name="cliente_telefone" id="telefone" placeholder="Telefone *" required x-moz-errormessage="campo obrigatório" />
      </label>
    </li>
    <li class="col-sm-6">
      <label>
        <input type="text" class="form-control" name="cliente_bairro" id="bairro" placeholder="Bairro *" required x-moz-errormessage="campo obrigatório" />
      </label>
    </li>
    <li class="col-sm-6">
      <label>
        <input type="text" class="form-control" name="cliente_rua" id="rua" placeholder="rua *" required x-moz-errormessage="campo obrigatório" />
      </label>
    </li>
    <li class="col-sm-6">
      <label>
        <input type="text" class="form-control" name="cliente_complemento" id="complemento" placeholder="complemento *" />
      </label>
    </li>

  </ul>

  <div class="col-sm-12 text-center">
    <input type="submit" id="bt-confirmar" class="btn btn-default " value="CONFIRMAR" name="confirmar" />
  </div>
</form>

connectpedido.php

<?php
include_once("scripts/config.php");
include_once("scripts/funcoes.php");
?>

<?php
$objConn = new objConexao();
$conn = $objConn->fcnConn();


$nome = $_POST['cliente_nome'];
$email = $_POST['cliente_email'];
$telefone = $_POST['cliente_telefone'];
$bairro = $_POST['cliente_bairro'];
$rua = $_POST['cliente_rua'];
$complemento = $_POST['cliente_complemento'];

$sql = "INSERT INTO cliente(cliente_nome,cliente_email,cliente_telefone,cliente_bairro,cliente_rua,cliente_complemento) VALUES ";
$sql .= "('$nome', '$email', '$telefone','$bairro','$rua','$complemento')";
echo $sql;
mysql_query($sql,$conn) or die(mysql_error());
mysql_close($conn);
echo "Cliente cadastrado com sucesso!";


?>

Quando eu aperto o botao de confirmar ele me redireciona e dispara o echo de confirmação, eu gostaria que ele disparasse a mensagem dentro de uma modal,sem exibir os valores do banco como eu poderia fazer isso?

5
  • 1
    Para abrir o modal na mesma página. você terá que fazer uma requisição assíncrona (AJAX) para o seu PHP e se este retornar uma resposta HTTP 200, você exibe o modal. O Bootstrap já possui suporte para modal se quiser utilizar. Você tem conhecimentos sobre AJAX?
    – Woss
    Commented 12/05/2017 às 1:55
  • Está confuso, primeiro vc diz retornar uma modal "Seu pedido foi registrado" e depois ...... redireciona e dispara o echo de confirmação, eu gostaria que ele disparasse a mensagem dentro de uma modal. Esse echo é echo "Cliente cadastrado com sucesso!";
    – user60252
    Commented 12/05/2017 às 1:58
  • Para clarear, esse modal seria em qual página? PedidosCLientes.php ou connectpedido.php ??
    – user60252
    Commented 12/05/2017 às 1:59
  • Leo, a modal dispararia dentro do Pedidosclientes.php, eu possuo pouco conhecimento em AJAX, eu deveria colocar a classe de conexão dentro da pagian que contém o formulário? Commented 12/05/2017 às 2:05
  • É só copiar o formulário e substituir na na sua página. A parte da <div id='myModal' para baixo coloca no final da pagina do formulário (PedidosCLientes.php). Na pagina connectpedido.php é só retirar o echo "Cliente cadastrado com sucesso!";
    – user60252
    Commented 12/05/2017 às 11:51

1 Resposta 1

1

PedidosCLientes.php

<form id="contact_form" class="contact-form" method="post">
  <ul class="row">
    <li class="col-sm-12">
      <label>
        <input type="text" class="form-control" name="cliente_nome" id="nome" placeholder="Nome *" x-moz-errormessage="campo obrigatório" required />
      </label>
    </li>
    <li class="col-sm-6">
      <label>
        <input type="text" class="form-control" name="cliente_email" id="email" placeholder="E-mail *" required x-moz-errormessage="campo obrigatório" />
      </label>
    </li>
    <li class="col-sm-6">
      <label>
        <input type="text" class="form-control" name="cliente_telefone" id="telefone" placeholder="Telefone *" required x-moz-errormessage="campo obrigatório" />
      </label>
    </li>
    <li class="col-sm-6">
      <label>
        <input type="text" class="form-control" name="cliente_bairro" id="bairro" placeholder="Bairro *" required x-moz-errormessage="campo obrigatório" />
      </label>
    </li>
    <li class="col-sm-6">
      <label>
        <input type="text" class="form-control" name="cliente_rua" id="rua" placeholder="rua *" required x-moz-errormessage="campo obrigatório" />
      </label>
    </li>
    <li class="col-sm-6">
      <label>
        <input type="text" class="form-control" name="cliente_complemento" id="complemento" placeholder="complemento *" />
      </label>
    </li>

  </ul>

  <div class="col-sm-12 text-center">
    <input type="submit" id="bt-confirmar" class="btn btn-default " value="CONFIRMAR" name="confirmar" />
  </div>
</form>

     <div id='myModal' class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title text-success">Cliente cadastrado com sucesso</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#contact_form').submit(function(){
            var dados = jQuery( this ).serialize();
            jQuery.ajax({
                type: "POST",
                url: "connectpedido.php",
                data: dados,
                success: function( data )
                {
                    $('#myModal').modal('show');
                }
            });
            return false;
        });
    });
    </script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

connectpedido.php

Utilizando uma requisição AJAX para este arquivo, pode não fazer muito sentido você exibir mensagens, visto que estas não chegarão à tela do usuário. Desta forma, você poderá remover os echo do arquivo. É importante salientar que a função de callback success somente é executada quando a resposta HTTP obtida possui o status code 200. Nem sempre o servidor consegue identificar corretamente e, em alguns casos, pode ocorrer do código PHP executar normalmente, mas no jQuery acusar que deu erro, pois o status code foi diferente de 200. Para garantir que não tenha esse problema, você pode definir manualmente o valor através da função http_response_code:

if (mysql_query($sql, $con)) {
    // Cadastro realizado com sucesso:
    http_response_code(200);
} else {
    // Erro ao realizar o cadastro:
    http_response_code(500);
}

Se no PHP ocorrer algum erro e o cadastro não for realizado com sucesso, uma callback error no jQuery é executada.

Explicação

Para enviar formulário para o php sem refresh primeiro importe a lib jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

e dispare a função no evento onsubmit do formulário: jQuery('#contact_form').submit(function(){

Vi alguns tutoriais( de blogs, fóruns e video aulas ), usando o evento onclick do botão submit(ou button), “fingem”, que isso funciona, e depois várias pessoas vão aos fóruns, por causa dos problemas gerados por esses códigos mal escritos e incorretos.

O correto é usar no onsubmit do form, e “desativar” ele, com aquele return false;

O método .serialize(), cria a query string com os dados do formulário, e usa essa variável para enviar a função ajax.

No success: function( data ), é o callback que será disparado, onde será chamada a janela do modal.

2
  • 1
    +1 Resposta bem sucinta, mas direta e suficientemente clara. Se me permite um comentário, o jQuery executa a callback success somente quando a resposta for HTTP 200, porém, nem sempre por padrão o Apache (não sei outros servidores) envia uma resposta 200 quando o desenvolvedor não especifica. Nesses casos, todos os códigos estão certos, o PHP é executado normalmente, mas no jQuery será executada a callback error. O ideal é adicionar no PHP http_response_code(200) quando tudo foi realizado com sucesso e http_response_code(500) quando algo der errado.
    – Woss
    Commented 12/05/2017 às 11:31
  • Pronto, adicionei esta informação.
    – Woss
    Commented 12/05/2017 às 11:44

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 .