ejemplo #4 formulario formulario avanzado

PHOTO EMBED

Tue Feb 06 2024 16:56:01 GMT+0000 (Coordinated Universal Time)

Saved by @jrg_300i #undefined 

<!DOCTYPE html>
<html>
<head>
    <title>Formulario con ventana emergente</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <!-- Enlace al archivo de estilos de Bootstrap -->
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <!-- Inclusión de la biblioteca jQuery -->
    <style>
        #dragon-logo {
            position: absolute; /* Posición absoluta para el logo */
            top: 10px; /* Alineación superior a 10px */
            right: 10px; /* Alineación derecha a 10px */
            width: 50px; /* Ancho del logo */
        }
        input[type="text"], input[type="submit"] {
            margin-bottom: 2px; /* Espacio de 2px entre los campos de texto y el botón */
        }
    </style>
    <script>
        $(document).ready(function() {
            // Crear el formulario
            var formulario = document.createElement("form");
            formulario.classList.add("border", "p-3", "rounded", "bg-light"); // Agregar clases para estilos de borde, relleno y fondo
            formulario.style.display = "flex"; // Establecer el estilo de visualización como flex
            formulario.style.flexDirection = "column"; // Establecer la dirección de los elementos como columna
            formulario.style.alignItems = "center"; // Centrar los elementos horizontalmente

            var titulo = document.createElement("h2");
            titulo.textContent = "Formulario de prueba"; // Establecer el texto del título del formulario
            formulario.appendChild(titulo); // Agregar el título al formulario

            var campoTexto1 = document.createElement("input");
            campoTexto1.type = "text"; // Establecer el tipo de campo como texto
            campoTexto1.name = "nombre"; // Establecer el nombre del campo
            campoTexto1.placeholder = "Nombre"; // Establecer el marcador de posición del campo
            formulario.appendChild(campoTexto1); // Agregar el campo al formulario

            var espacio = document.createElement("br"); // Agregar un salto de línea entre los campos de texto
            formulario.appendChild(espacio);

            var campoTexto2 = document.createElement("input");
            campoTexto2.type = "text"; // Establecer el tipo de campo como texto
            campoTexto2.name = "apellido"; // Establecer el nombre del campo
            campoTexto2.placeholder = "Apellido"; // Establecer el marcador de posición del campo
            formulario.appendChild(campoTexto2); // Agregar el campo al formulario

            var botonEnviar = document.createElement("input");
            botonEnviar.type = "submit"; // Establecer el tipo de botón como enviar
            botonEnviar.value = "Enviar Formulario"; // Establecer el texto del botón
            botonEnviar.classList.add("btn", "btn-info"); // Agregar clases de Bootstrap para estilos de botón
            formulario.appendChild(botonEnviar); // Agregar el botón al formulario

            var contenedor = document.getElementById("miContenedor"); // Obtener el contenedor del formulario
            contenedor.style.display = "flex"; // Establecer el estilo de visualización como flex
            contenedor.style.justifyContent = "center"; // Centrar los elementos horizontalmente
            contenedor.appendChild(formulario); // Agregar el formulario al contenedor

            formulario.addEventListener("submit", function(event) {
                event.preventDefault(); // Evitar el envío del formulario por defecto

                var nombre = campoTexto1.value; // Obtener el valor del campo de nombre
                var apellido = campoTexto2.value; // Obtener el valor del campo de apellido

                var popupForm = $("<div class='modal fade' id='popupForm' tabindex='-1' role='dialog'>" + // Crear la ventana emergente con clase fade
                    "<div class='modal-dialog modal-dialog-centered' role='document'>" + // Centrar la ventana emergente
                    "<div class='modal-content bg-danger'>" + // Agregar clase "danger" para el fondo rojo
                    "<div class='modal-header'>" +
                    "<h5 class='modal-title'>Datos enviados</h5>" +
                    "<button type='button' class='close' data-dismiss='modal' aria-label='Close'>" +
                    "<span aria-hidden='true'>×</span>" +
                    "</button>" +
                    "</div>" +
                    "<div class='modal-body' style='color: white'>" + // Establecer el color del texto en blanco
                    "<p>Nombre: " + nombre + "</p>" +
                    "<p>Apellido: " + apellido + "</p>" +
                "</div>" +
                "</div>" +
                "</div>" +
                "</div>");

            $("body").append(popupForm); // Agregar la ventana emergente al cuerpo del documento

            $("#popupForm").modal("show"); // Mostrar la ventana emergente

            setTimeout(function() {
                $("#popupForm").modal("hide"); // Ocultar la ventana emergente después de 2 segundos
            }, 2000);

            setTimeout(function() {
                campoTexto1.value = ""; // Limpiar el campo de nombre
                campoTexto2.value = ""; // Limpiar el campo de apellido
            }, 3000);
        });
    });
    </script>
</head>
<body>
    <div id="miContenedor" class="container">
        <!-- El formulario y el código JavaScript aquí -->
    </div>
    <img id="dragon-logo" src="dragon.png"> <!-- Agregar el logo al documento -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> <!-- Inclusión del archivo de scripts de Bootstrap -->
</body>
</html>
content_copyCOPY

https://www.w3schools.com/html/tryit.asp?filename