4

me gustaría mejorar la estética en la forma de enseñar una a alerta.

Tengo un formulario en un modal, que al pulsar en botón submit, después de validar los campos, lo envio a un php que inserta los datos en una base de datos. Seguidamente, se notifica una alerta en la pantalla.

Este el el form

<form action="insertar.php" method="GET" onsubmit="return validaCampos();">                    
                    <div class="form-group">
                        <label for="nombre">Nombre:</label>
                        <input class="form-control" id="nombre" name="nombre" type="text" placeholder="Nombre"></input>
                    </div>
                    <div class="form-group">
                        <label for="edad">Edad:</label>
                        <input class="form-control" id="edad" name="edad" type="text" placeholder="Edad"></input>
                    </div>
                    <div class="form-group">
                        <label for="direccion">Direccion:</label>
                        <input class="form-control" id="direccion" name="direccion" type="text" placeholder="Direccion"></input>
                    </div>

                    <input type="submit" class="btn btn-success" value="Salvar">
               </form>

Este es el insertar

    <?php


        $mysqli = new mysqli("localhost", "root", "", "bdpersona"); 
        $nom = $_GET['nombre'];
        $edad = $_GET['edad'];
        $dir = $_GET['direccion'];                      
        $sql = $mysqli->query("insert into tbcontactos (nombre, edad, direccion) values ('$nom', $edad, '$dir') ");         

?>  

        <SCRIPT LANGUAGE="javascript"> 
        alert("Contacto Registrado"); 
        </SCRIPT> 
        <META HTTP-EQUIV="Refresh" CONTENT="0; URL=listar.php">

De la siguiente forma: introducir la descripción de la imagen aquí

En un segundo plano se actualiza la lista y no vas a ella hasta pulsa el aceptar.

Funciona todo bien, pero lo veo un poco "cutre" o anticuado. Vosotros que menejais el tema, ¿hay alguna forma de hacerlo más "chulo" o "moderno" la alerta de que ya se ha registrado el usuario?

Muchas gracias.

2
  • Te recomiendo jquery-confirm si deseas un ejemplo puedes ver mi respuesta puedes usar esta librería y es muy simple de implementar, puedes usar ya sea confirm o alert, leelo y me cuentas. el 19 mar. 2018 a las 17:06
  • no puedes editar los alert() lo que tienes que hacer es usar tus propios alert o bien usar los de otras librerias
    – LPZadkiel
    el 19 mar. 2018 a las 17:21

3 respuestas 3

9

Si sólo es el tema visual puedes usar Sweet Alert 2, tiene diseños modernos y que se adaptan a distintas funcionalidades según necesites.

$('button').on('click', () => {

  swal(
    '¡Genial!',
    'Mensaje de éxito',
    'success'
  )
})
   
<!-- Swwet alert -->
<script src="https://unpkg.com/[email protected]/dist/sweetalert2.all.js"></script>
<!-- Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<button>Un botoncito</button>


O también toastr para el manejo mas pequeño de validaciones , con mensajes pequeños Toastr.
Página para editar toast Editar Toastr introducir la descripción de la imagen aquí

5

Según tengo entendido no es posible aplicar reglas de estilos para editar los alert() o confirm().

Te recomiendo SweetAlert, Alertify o BootBox

swal(
    "Buen trabajo!",
    "El contacto ha sido registrado!",
    "success"
   );
<link href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.8.0/sweetalert2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.8.0/sweetalert2.min.js"></script>
<button id="btnSA">Probar SweetAlert </button>

Documentación Sweetalert

Alertify

alertify.alert('Buen trabajo!', "El contacto ha sido registrado!");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- JavaScript -->
<script src="//cdn.jsdelivr.net/npm/[email protected]/build/alertify.min.js"></script>

<!-- CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/alertify.min.css"/>
<!-- Default theme -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/build/css/themes/default.min.css"/>

Documentación alertify

BootBox

bootbox.alert("El contacto ha sido registrado!");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>

Documentación BootBox

4

De igual manera te lo menciono aunque no lo preguntadste directamente, el código que muestras para dar el alta es altamente inseguro a inyección SQL y no deberías mandar data que no pase por un prepare antes; te dejo un ejemplo que pudieras revisar

<?php
$mysqli = new mysqli("localhost", "root", "", "bdpersona"); 

        $sql = $mysqli->prepare("insert into tbcontactos (nombre, edad, direccion) values (?, ?, ?) ");
        $sql->bind_param("sis", $nom, $edad, $dir);
        $nom = $_GET['nombre'];
        $edad = $_GET['edad'];
        $dir = $_GET['direccion'];
        $sql->execute();

Como puedes notar antes de que se manden directamente los valores se enmascaran con signos de interrogación y después hacen una especie de interpolación cuando en bindParam se los doy a conocer además de eso le indico con s que lo que recibe son cadenas de texto y con i con será un entero

4
  • ostiaaa muchísimas!! gracias enserio, esto es parte de mi TFG y me viene de lujo, ¿como puedo aprender más de estas cosas?, tu código funciona perfectamente!! Puedes darme más información? mil gracias
    – Vidal
    el 19 mar. 2018 a las 17:43
  • dame un momento y te paso una fuente de aquí de la plataforma solo que la encuentre
    – user75901
    el 19 mar. 2018 a las 17:48
  • este recurso lo escribió @AlvaroMontoro moderador y me parece excelente para que tengas conocimiento efectivo del tema es.stackoverflow.com/questions/18232/…
    – user75901
    el 19 mar. 2018 a las 17:50
  • muchas gracias!!!!
    – Vidal
    el 19 mar. 2018 a las 18:06

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.