Popup window message in PHP

0

I know that a tool called JOptionPane exists for Java that shows you a pop-up window, be it a message, a question, a confirmation, etc.

In Java, to show a message, use: JOptionPane.showMessageDialog ();

How could a pop-up window appear in PHP?

I want that once I have saved a record in the BD, or it is not saved, it shows me a message of the type:

  

Saved client | Client not saved

Code:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Formulario de Registro</title>
        <link rel="stylesheet" href="css/estilos_registrar.css">
        <script type="text/javascript" src="js/validar_formulario.js"></script>
    </head>

    <body background="imagenes/fondo_campo2.jpg">
        <!--<h1>Formulario de Registro</h1>-->
        <form name="miformulario" id="miformulario" action="registrar.php" method="POST" class="form-register" onsubmit="return validar_formulario();">
            <h2 class="form-titulo">CREA UNA CUENTA</h2>
            <div class="contenedor-inputs">
                <!-- Por cada etiqueta de <input> <label for="id_mismo_que_input">XXXX: </label> -->             <!-- required para HTML5 -->
                <input type="text" name="nombre" id="nombre" placeholder="Nombre" tabindex="1" class="input-2" onkeypress="return soloLetras(event);">
                <input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" tabindex="2" class="input-2">
                <br/>
                <input type="text" name="idemail" id="email" placeholder="Email" tabindex="3" class="input-1">
                <br/>
                <input type="text" name="dni" id="dni" placeholder="DNI" maxlength="9" tabindex="4" class="input-2" onkeypress="return soloLetrasNumeros(event);">
                <input type="text" name="telefono" id="telefono" placeholder="Teléfono" maxlength="9" tabindex="5" class="input-2" onkeypress="return soloNumeros(event);">
                <br/>
                <input type="password" name="password" id="password1" placeholder="Contraseña" tabindex="6" class="input-2">
                <input type="password" name="password" id="password2" placeholder="Repetir contraseña" tabindex="7" class="input-2">
                <br/>
                <input type="submit" value="Registrar" name="registrar" class="registrar" tabindex="8"/>
                <?php
                    include "Clases/BD.php";
                    //Si pulsamos el botón "Registrar"...
                    if(isset($_POST["registrar"])){
                        $nombre = $_POST["nombre"];
                        $apellidos = $_POST["apellidos"];
                        $dni = $_POST["dni"];
                        $telefono = $_POST["telefono"];
                        $idemail = $_POST["idemail"];
                        $password = $_POST["password"];

                        $idemails = BD::obtenerEmails();
                        if(in_array(strtolower($idemail), array_change_key_case($idemails,CASE_LOWER))){
                            header ("Location: no.php");
                        }else{
                            //Llamamos al método "insertarCliente" y le pasamos los parámetros del formulario.
                            BD::insertarCliente($idemail, $nombre, $apellidos, $dni, $telefono, $password);
                            header ("Location: si.php");
                        }
                    }
                ?>
                <p class="form-link">¿Ya tienes una cuenta? <a href="iniciar_sesion_cliente.php">Ingresa aquí</a></p>
            </div>
        </form>
        <!--<div class="footer">
            <p>Copyrigth</p>
        </div>-->
    </body>
</html>
    
asked by omaza1990 19.12.2017 в 12:02
source

2 answers

2

The shortest (and least elegant) way is to display an alert

if(in_array(strtolower($idemail), array_change_key_case($idemails,CASE_LOWER))){

   echo "<script>alert('Usuario ya existe');</script>";

} else {

  //Llamamos al método "insertarCliente" y le pasamos los parámetros del formulario.
   BD::insertarCliente($idemail, $nombre, $apellidos, $dni, $telefono, $password);
   echo "<script>alert('Usuario insertado exitosamente');</script>";

}

EDIT to do it with manners ( taking me from the answer of @ Edu3D that came before me ), you can have two manners and trigger them manually. According to your example, it would be:

$(function() {
    $("#btnExito").click(function(){        
      $('#modal_exito').modal('show');
    });
});

$(function() {
    $("#btnFalla").click(function(){        
      $('#modal_falla').modal('show');
    });
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Formulario de Registro</title>

<input type="button" value="Abrir modal éxito" name="registrar" id="btnExito" class="registrar" tabindex="8" />
<input type="button" value="Abrir modal falla" name="registrar" id="btnFalla" class="registrar" tabindex="8" />

<div class="modal fade" id="modal_exito" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">Usuario creado correctamente</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
<div class="modal fade" id="modal_falla" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3 class="modal-title">Usuario ya existe</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

Bringing that to the original answer:

if(in_array(strtolower($idemail), array_change_key_case($idemails,CASE_LOWER))){

   echo "<script>$(function() { $('#modal_falla').modal('show'); });</script>";

} else {

  //Llamamos al método "insertarCliente" y le pasamos los parámetros del formulario.
   BD::insertarCliente($idemail, $nombre, $apellidos, $dni, $telefono, $password);
   echo "<script>$(function() { $('#modal_exito').modal('show'); });</script>";

}
    
answered by 19.12.2017 в 12:22
2

I show you a modal version, in this example the mode is simply shown by pressing the button. To do it in your code you should add within each condition:

echo "<script>$('#myModal').modal('show');</script>";

What you are doing is calling a modal created by bootstrap taking the dependencies of third parties:

  

link    link    link

$(document).ready(function(){
    $(".registrar").click(function(e){
      if(e.target.id == 'btnRegistrar'){
        $("#modal-title").text("Usuario creado correctamente");
      }else{
        $("#modal-title").text("El correo ya existe");
      }
      $('#myModal').modal('show');
    });
});
<!DOCTYPE html>
<html lang="es">
    <head>    
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Formulario de Registro</title>
        <link rel="stylesheet" href="css/estilos_registrar.css">
        <script type="text/javascript" src="js/validar_formulario.js"></script>
    </head>

    <body background="imagenes/fondo_campo2.jpg">
        <!--<h1>Formulario de Registro</h1>-->
        <form name="miformulario" id="miformulario" action="registrar.php" method="POST" class="form-register" onsubmit="return validar_formulario();">
            <h2 class="form-titulo">CREA UNA CUENTA</h2>
            <div class="contenedor-inputs">
                <!-- Por cada etiqueta de <input> <label for="id_mismo_que_input">XXXX: </label> -->             <!-- required para HTML5 -->
                <input type="text" name="nombre" id="nombre" placeholder="Nombre" tabindex="1" class="input-2" onkeypress="return soloLetras(event);">
                <input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" tabindex="2" class="input-2">
                <br/>
                <input type="text" name="idemail" id="email" placeholder="Email" tabindex="3" class="input-1">
                <br/>
                <input type="text" name="dni" id="dni" placeholder="DNI" maxlength="9" tabindex="4" class="input-2" onkeypress="return soloLetrasNumeros(event);">
                <input type="text" name="telefono" id="telefono" placeholder="Teléfono" maxlength="9" tabindex="5" class="input-2" onkeypress="return soloNumeros(event);">
                <br/>
                <input type="password" name="password" id="password1" placeholder="Contraseña" tabindex="6" class="input-2">
                <input type="password" name="password" id="password2" placeholder="Repetir contraseña" tabindex="7" class="input-2">
                <br/>
                <input type="button" value="Registrar Correcto" name="registrar" id="btnRegistrar" class="registrar" tabindex="8"/>
                <input type="button" value="Registrar Error" name="registrar" id="btnRegistrarWrong" class="registrar" tabindex="8"/>
                <?php
                    include "Clases/BD.php";
                    //Si pulsamos el botón "Registrar"...
                    if(isset($_POST["registrar"])){
                        $nombre = $_POST["nombre"];
                        $apellidos = $_POST["apellidos"];
                        $dni = $_POST["dni"];
                        $telefono = $_POST["telefono"];
                        $idemail = $_POST["idemail"];
                        $password = $_POST["password"];

                        $idemails = BD::obtenerEmails();
                        if(in_array(strtolower($idemail), array_change_key_case($idemails,CASE_LOWER))){
                            header ("Location: no.php");
                        }else{
                            //Llamamos al método "insertarCliente" y le pasamos los parámetros del formulario.
                            BD::insertarCliente($idemail, $nombre, $apellidos, $dni, $telefono, $password);
                            header ("Location: si.php");
                        }
                    }
                ?>
                <p class="form-link">¿Ya tienes una cuenta? <a href="iniciar_sesion_cliente.php">Ingresa aquí</a></p>
            </div>
        </form>
        <!--<div class="footer">
            <p>Copyrigth</p>
        </div>-->
        
         <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-sm">
    
      <!-- Modal content-->
      <div class="modal-content-sm">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h3 class="modal-title" id="modal-title">Usuario creado correctamente</h3>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
    </body>
</html>
    
answered by 19.12.2017 в 12:33