Modal to inform users that registration was successful

2

Well, I wanted the user to register in the system and if it worked out, a modal saying that:

  

Registered user successfully

If already exists the matricula or email informed will appear a modal with something like:

  

Enroll or Existing Email

And if the user informs the password empty or the passwords do not match a modal with something like:

  

Password does not match

<?php 

include("includes/conexao.php");//conexão com o banco

if(isset($_POST["registrar"])) {
    //Busca no banco a quantidade de usuarios que tenham a mesma matricula OU o mesmo email
    $querySelect = "SELECT * FROM usuario WHERE matricula = ?  OR email = ?";

     //prepara a query
    $statement = $connection->prepare($querySelect);

    $statement->bindValue(1, $_POST['matricula']);
    $statement->bindValue(2, $_POST['email']);
    $statement->execute();
    $total = $statement->rowCount();

    //Verificase o valor retornado é 0 (Nenhum usuário igual cadastrado)
 if($total == 0){
        $senha           = $_POST['senha'];
        $confirma_senha  = $_POST['confirma_senha'];
        if (empty($senha)) {
            $mensagem = "<span class='aviso'><b>Aviso</b>: Senha não foi alterada!</span>";
        } else if ($senha == $confirma_senha) {
            $query = "INSERT INTO usuario (nome, sobrenome, matricula, email, senha) 
                  VALUES (:nome, :sobrenome, :matricula, :email, :senha)";

            $statement = $connection->prepare($query);


            $valores = array();
            $valores[':nome'] = (isset($_POST['primeiroNome']) ? $_POST['primeiroNome'] : '');
            $valores[':sobrenome'] = (isset($_POST['sobrenome']) ? $_POST['sobrenome'] : '');
            $valores[':matricula'] = (isset($_POST['matricula']) ? $_POST['matricula'] : '');
            $valores[':email'] = (isset($_POST['email']) ? $_POST['email'] : '');
            $valores[':senha'] = (isset($_POST['senha']) ? $_POST['senha'] : '');

            $result = $statement->execute($valores);

            if(!empty($result)){
                $mensagem = "<span class='aviso'><b>Sucesso</b>: deu certo!</span>";
            }
        } else {
             $mensagem = "<span class='aviso'><b>Aviso</b>: Senha e repetir senha são diferentes!</span>";

        }

    }

}


?>
  

The alert to inform if passwords are the same

<script> 
        function validarSenha(){
        senha = document.formulario.senha.value
        confirma_senha = document.formulario.confirma_senha.value
        if (senha == confirma_senha){
            alert("Usuário cadastrado com sucesso!!")
            return true;


        }
        else{ 
            alert("As Senha não correspondem!!")
            return false;
        }
    }
   </script>
  

code that I wanted to reuse

 <script src="vendor/jquery/jquery.min.js"></script>
        <script>
        $(document).ready(function () {
            // evento de "submit"
            $("#b_enviar").click(function (e) {
                // parar o envio para que possamos faze-lo manualmente.
                e.preventDefault();
                // captura o formulário
                var form = $('#caixa')[0];
                // cria um FormData {Object}
                var data = new FormData(form);
                // processar
                $.ajax({
                    type: "POST",
                    url: "http://localhost/nsi/registro.php", //acerte o caminho para seu script php
                    data: data,
                    processData: false, // impedir que o jQuery tranforma a "data" em querystring
                    contentType: false, // desabilitar o cabeçalho "Content-Type"
                    //cache: false, // desabilitar o "cache"
                    // manipular o sucesso da requisição
                }).done(function(retorno){
                    console.log(retorno);
                    retorno = parseInt(retorno);  


                    if(retorno==1)
                      {
                        //alert("Formulário enviado com sucesso");
                        $("#myModalSucess").modal('show');
                         console.log();
                        $(':input','#caixa')
                          .not(':button, :submit, :reset, :hidden')
                          .val('')
                          .removeAttr('checked')
                          .removeAttr('selected');
                      }
                       else
                      {
                        //alert("erro ao enviar formulário");
                        $("#myModalError").modal('show'); 


                      }


                });
            });
        });
        </script>
  

Form

 <form method="POST" id="caixa" action="registro.php" onsubmit="return validarSenha()"name="formulario">
            <div class="form-group">
               <div class="form-row">
                  <div class="col-md-6">
                     <label for="primeiroNome">Primeiro nome</label>
                     <input type="text" class="form-control" id="primeiroNome" name="primeiroNome" placeholder="Digite seu primeiro nome" required="required">
                  </div>
                  <div class="col-md-6">
                     <label for="Sobrenome">Sobrenome</label>
                     <input type="text" class="form-control" id="Sobrenome" name="sobrenome" placeholder="Digite seu Sobrenome" required="required" autofocus="autofocus">
                  </div>
               </div>
            </div>
            <div class="col-md-6" id="matricula">
               <label for="primeiroNome">Matrícula</label>
               <input type="text" class="form-control"  name="matricula" placeholder="Digite sua matrícula" required="required" autofocus="autofocus">
            </div>
            <div class="form-group">
               <label for="email">E-mail</label>
               <input type="email" class="form-control" id="email" name="email" placeholder="Digite seu email" required="required" autofocus="autofocus">
            </div>
            <div class="form-group">
               <div class="form-row">
                  <div class="col-md-6">
                     <label for="senha">Senha</label>
                     <input type="password" class="form-control" id="senha" name="senha" placeholder="Digite sua senha" required="required" autofocus="autofocus">
                  </div>
                  <div class="col-md-6">
                     <label for="confirma_senha">confirmar senha</label>
                     <input type="password"  class="form-control" id="confirmaSenha" name="confirma_senha" placeholder="Confirme sua senha" required="required" autofocus="autofocus">
                  </div>
               </div>
            </div>
            <div>
               <input type="submit" id="b_enviar" class="btn btn-primary btn-block" name="registrar" value="Registra-se"/>
            </div>
            <div class="text-center">
               <a href="#" class="d-block small mt-3">Esqueceu sua senha?</a>
               <a href="login.php" class="d-block small mt-3">Login?</a>
            </div>
         </form>
    
asked by anonymous 12.11.2018 / 22:24

1 answer

2

Create a modal on the page with any id any (not already using elsewhere) with the empty body. At each alert (be it success, error, wrong passwords etc.) you send a text (pure or HTML) to the modal body (class .modal-body ) and show the modal:

Modal code (I put the id alertas ):

<div class="modal fade" id="alertas" tabindex="-1" role="dialog" aria-labelledby="alertasLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

In the script you play the text for modal and show it:

$(".modal-body").html("As Senha não correspondem!!");
$("#alertas").modal('show');

I'll leave an illustrative example:

$("form").submit(function(e){

   e.preventDefault();
   
   var senha = this.senha.value;
   var senha_confirma = this.senha_confirma.value;
   
   if(!senha || !senha_confirma){
      var texto_alerta = "Digite as duas senhas!";
   }else if(senha == senha_confirma){
      var texto_alerta = "Cadastro ok!";
   }else{
      var texto_alerta = "As Senha não correspondem!!";
   }
   
   $(".modal-body").html(texto_alerta);
   $("#alertas").modal('show');

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<form>
   <div>
      <label>Digite uma senha</label>
      <p>
         <input type="text" name="senha">
      </p>
   </div>
   <div>
      <label>Confirme a senha</label>
      <p>
         <input type="text" name="senha_confirma">
      </p>
   </div>
   <button>OK</button>
</form>
<div class="modal fade" id="alertas" tabindex="-1" role="dialog" aria-labelledby="alertasLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
    
12.11.2018 / 22:59