1

Sé que existe para Java una herramienta llamada JOptionPane que te muestra una ventana emergente, bien sea un mensaje, una pregunta, una confirmación, etc.

En Java, para mostrar un mensaje se utiliza: JOptionPane.showMessageDialog();

¿Cómo podría mostrarse una ventana emergente en PHP?

Quiero que una vez guardado un registro en la BD, o no sea guardado, me muestre un mensaje del tipo:

Cliente guardado | Cliente no guardado

Código:

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

2 respuestas 2

3

La manera más corta (y la menos elegante) es desplegar una alerta

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 para hacerlo con modales (tomándome de la respuesta de @Edu3D que se me adelantó), puedes tener dos modales y gatillarlos manualmente. Según tu ejemplo, sería:

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

Llevando eso a la respuesta original:

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

}
2
  • 1
    Sí, esa manera la he "ignorado" debido a que no es elegante... ¿En versión modal cómo sería?
    – omaza1990
    Commented el 19 dic. 2017 a las 11:24
  • 1
    Edité la respuesta para mostrar cómo sería con un modal (me colgué de la respuesta de @Edu3D
    – ffflabs
    Commented el 19 dic. 2017 a las 11:50
3

Te muestro una versión en modal, en este ejemplo simplemente se está mostrando la modal al presionar el botón. Para realizarlo en tu código tendrías que añadir dentro de cada condición:

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

Lo que se está haciendo es llamar a una modal creada por bootstrap tomando las dependencias de terceros:

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js

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

1
  • 1
    Upvote porque gracias a tu código complementé mi respuesta
    – ffflabs
    Commented el 19 dic. 2017 a las 11:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.