entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

Duda uso de modal en formulario

Hace nada he descubierto la existencia de los modales, y me pareció muy interesante para añadirlo a la web. Me fijé en el código de w3schools, lo copié a mi código y, sí, aparece, pero durante 1 segundo y luego desaparece, mostrando una página en blanco. Me gustaría añadir el modal cuando se presione el botón "Enviar", que aparezca la ventanita, y cuando se cierre se envíen los datos y se resetée el formulario. He estado buscando varias horas, pero no encuentro nada, o me lío, o no sé cómo hacerlo.

Mando el código que tengo en varios archivos.

Index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>Formulario</title>
        <link rel="stylesheet" type="text/css" href="estilo.css">
    </head>
    <body>
        <div class="form">
            <form action="guardar.php" method="POST">
                <p>Nombre</p>
                <label for="nombre">Su nombre</label>
                <br><br>
                <input type="text" name="nombre" placeholder="Nombre" required>
                <p>Correo</p>
                <label for="correo">Direccion De Correo</label>
                <br><br>
                <input type="email" name="correo" placeholder="[email protected]" required>
                <p>Mensaje</p>
                <label for="mensaje">Su Mensaje</label>
                <br><br>
                <textarea name="mensaje" placeholder="Mensaje" required></textarea>
                <br>
                <br>
                <button id="myBtn" class="button" input type="submit" value="Enviar">Enviar</button>

            </form>
        </div>

        <!-- The Modal -->
        <div id="myModal" class="modal">

        <!-- Modal content -->
         <div class="modal-content">
           <span class="close">&times;</span>
           <p>Some text in the Modal..</p>
         </div>

</div>
<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>
    </body>
</html>

guardar.php:

<?php
    //conectamos Con el servidor
    $host="localhost";
    $user="root";
    $pass="";
    $db="prueba";

    $con = mysqli_connect($host,$user,$pass,$db) or die ("Problemas al conectar");
    mysqli_select_db($con,$db) or die ("Problemas al conectar con la base de datos");

    //recuperar las variables
    $nombre=$_POST['nombre'];
    $correo=$_POST['correo'];
    $mensaje=$_POST['mensaje'];

    //Hacer secuencia sql
    $sql="INSERT INTO datos (nombre, correo, mensaje) VALUES ('{$nombre}','{$correo}','{$mensaje}')";

    //ejecutamos la sentencia de sql
    $ejecutar=mysqli_query($con,$sql);

    //verificamos la ejecucion
    if($ejecutar){

    echo"Datos Guardados Correctamente<br><a href='index.html'>Volver</a>";

    }else{

    echo "Hubo Algun Error";

    }
?>

Supongo que el problema principalmente estará en "guardar.php" en el

if($ejecutar){

        echo"Datos Guardados Correctamente<br><a href='index.html'>Volver</a>";

    }else{
        echo"Hubo Algun Error";
    }

El problema es que no sé qué poner en el "if" si sale bien.

1 Respuesta

3votos

KevinconK Puntos1520

Hola, buenas tardes.
Primero que nada verifica que cuentes con los links correspondientes, si no los tienes aquí te los pongo a continuación:

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

Aquí te adjunto un ejemplo simple de una modal:

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

        <!-- Modal -->
        <div id="myModal" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
              </div>
              <div class="modal-body">
                <p>Some text in the modal.</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
            </div>

          </div>
        </div>
    </body>
    <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>
</html>

Solo bastaría poner tu formulario dentro del div "<div class="modal-body">".

No se si tengas conocimiento en AJAX y JQuery, eso te ayudaría un monton.

1voto

Lilii comentado

Gracias por la respuesta! Ahora me aparece el modal sin cambiar a la página en blanco, pero cuando le doy a enviar, no me envía los datos, sino que solo me aparece el modal. ¿Podrías ayudarme con eso, por favor? Nunca he usado ni AJAX ni JQuery

3votos

KevinconK comentado

Hola, Buenos Dias, me alegra que te haya servido.

Primero que nada , antes de utilizar Jquery , es importante que te familiarices con las funciones.
aqui te sugiero un link: "https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Funciones".
"https://developer.mozilla.org/es/docs/Glossary/jQuery".

La verdad es una herramienta muy importante, ya que te ahorra mucho tiempo, al momento de desarrollar.

También te sugiero que leas algo de bootstrap, el cual sirve para darle algo de diseño a nuestros formularios (botones, colores, etc.), a continuación te adjunto un link.
PD: la versión que utilice es la 3.3.7.
"https://getbootstrap.com/docs/3.3/components/".
index.php

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <!-- Trigger the modal with a button -->
        <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

        <!-- Modal -->
        <div id="myModal" class="modal fade" role="dialog">
          <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Formulario</h4>
              </div>
              <div class="modal-body">
                    <div class="form">
                        <form id="form_datos" method="POST"> <!--Fijate que añadi un id, y realice algunas modificaciones-->
                            <div class="form-group">
                                <label for="">*Nombre:</label>
                                <input type="text" name="nombre" placeholder="Nombre" class='form-control' required>
                            </div>
                            <div class="form-group">
                                <label for="">*Correo:</label>
                                <input type="email" name="correo" placeholder="[email protected]" class='form-control' required>
                            </div>
                            <div class="form-group">
                                <label for="">*Su Mensaje:</label>
                                <textarea name="mensaje" placeholder="Mensaje" class='form-control' required></textarea>
                            </div>
                        </form>
                    </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cerrar</button>
                <button id="myBtn" type="button" class="btn btn-success pull-right" data-dismiss="modal">Enviar</button> <!--Boton que enviar los datos a la bd-->
              </div>
            </div>

          </div>
        </div>
    </body>
    <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>

    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.6.1.js"></script>

    <script>
        $('#myBtn').click(function(){ // Al dar clic al boton de enviar me ejecuta esta funcion.
            $.ajax({
                data: $('#form_datos').serialize(), //datos que se envian a traves de ajax
                url: 'guardar_registro.php', //archivo que recibe la peticion
                type: 'POST', //método de envio
                dateType: 'html',
                success: function(response) 
                {
                    if(response == "ok"){ // Valido la respuesta del archivo guardar_registro.php
                        alert("Datos Guardados");
                        $('#form_datos')[0].reset(); //Limpio los campos del formulario
                    }else{
                        alert("Ha Ocurrido un Error");
                    }
                }
            });
            return false; //Evitar que se recargue la pagina.
        })
    </script>
</html>

guardar.php

<?php

    //Recibo las variables , por metodo POST
    $nombre  = $_POST['nombre'];
    $correo  = $_POST['correo'];
    $mensaje = $_POST['mensaje'];

    //Aqui va toda tu configuracion con tu bd

    //Inserto a la bd

    //si todo sale bien imprimo esto, para posteriormente validarlo en el index.php
    echo "ok";
?>

Saludos

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta