-1

La idea es que tengo un formulario, y al rellenarlo y darle a un botón, muestra los resultados justo debajo, en la misma página HTML. Se supone que al hacer clic en:

<input type="button" name="validar" value="Mostrar" onclick="mostrarFormu()">

Debería mostrar mi formulario mediante la función:

function mostrarFormu() {

            var cap = document.getElementById("captcha");
            var botones = document.getElementById("botones");
            var formu = document.getElementById("formu");
            var resultado = document.getElementById("resultado");

            formu.style.display = "none"; // ocultar formulario
            resultado.style.display = "block"; // mostrar resultado
            cap.style.display = "none";
            botones.style.display = "none";

            var sex = document.getElementsByName("genero");
            for (var i = 0; i < sex.length; i++) {
                if (sex[i].checked === true) {
                    sexo = "Tu sexo es: " + sex[i].value + "<br>";
                }
            }

            var dni = "DNI: " + document.getElementById("dni").value + "<br/>";
            var nombre = "NOMBRE: " + document.getElementById("nombre").value + "<br/>";
            var apellidos = "APELLIDOS: " + document.getElementById("apellidos").value + "<br/>";
            var domicilio = "DOMICILIO: " + document.getElementById("domicilio").value + "<br/>";
            var cp = "CP: " + document.getElementById("cp").value + "<br/>";
            var provincia = "PROVINCIA: " + document.getElementById("provincia").value + "<br/>";
            var nacimiento = "FECHA DE NACIMIENTO: " + document.getElementById("nacimiento").value + "<br/>";
            var hijos = "Nº DE HIJOS: " + document.getElementById("hijos").value + "<br/>";

            resultado.innerHTML += dni;
            resultado.innerHTML += nombre;
            resultado.innerHTML += apellidos;
            resultado.innerHTML += sexo;
            resultado.innerHTML += domicilio;
            resultado.innerHTML += cp;
            resultado.innerHTML += provincia;
            resultado.innerHTML += nacimiento;
            resultado.innerHTML += hijos;

            for (var i = 0; i < vectorHijos.length; i++) {
                var hijo = "Tu hij@ se llama: " + vectorHijos[i] + "<br/>";
                resultado.innerHTML += hijo;
            }
        }

El head:

<head>
    <title>Formulario</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <script>

        var vectorHijos = new Array();
        var formulario = document.forms[0].elements;


        function mostrarFormu() {

            var _html = "";

            var cap = document.getElementById("captcha");
            var botones = document.getElementById("botones");
            var formu = document.getElementById("formu");
            var resultado = document.getElementById("resultado");

            formu.style.display = "none"; // ocultar formulario
            resultado.style.display = "block"; // mostrar resultado
            cap.style.display = "none";
            botones.style.display = "none";

            var sex = document.getElementsByName("genero");
            for (var i = 0; i < sex.length; i++) {
                if (sex[i].checked === true) {
                    sexo = "Tu sexo es: " + sex[i].value + "<br>";
                }
            }

            var dni = "DNI: " + document.getElementById("dni").value + "<br/>";
            var nombre = "NOMBRE: " + document.getElementById("nombre").value + "<br/>";
            var apellidos = "APELLIDOS: " + document.getElementById("apellidos").value + "<br/>";
            var domicilio = "DOMICILIO: " + document.getElementById("domicilio").value + "<br/>";
            var cp = "CP: " + document.getElementById("cp").value + "<br/>";
            var provincia = "PROVINCIA: " + document.getElementById("provincia").value + "<br/>";
            var nacimiento = "FECHA DE NACIMIENTO: " + document.getElementById("nacimiento").value + "<br/>";
            var hijos = "Nº DE HIJOS: " + document.getElementById("hijos").value + "<br/>";

            _html += dni;
            _html += nombre;
            _html += apellidos;
            _html+= sexo;
            _html += domicilio;
            _html += cp;
            _html += provincia;
            _html += nacimiento;
            _html += hijos;

            for (var i = 0; i < vectorHijos.length; i++) {
                var hijo = "Tu hij@ se llama: " + vectorHijos[i] + "<br/>";
                _html += hijo;
            }

            resultado.innerHTML = _html;
        }

        function comprobar() {
            nif();
            huecosVacios();
        }

        function huecosVacios() {
            var vector = document.forms[0].elements;
            var dato;
            for (var i = 0; i < vector.length; i++) {
                dato = vector[i].value;
                if (dato.trim().equals("") === true) {
                    alert(llego);
                    dato = false;
                }
            }
            if (dato === false) {
                alert("Debe rellenar todos los datos");
            }
        }


        function nif() {
            var numero;
            var letr;
            var letra;
            var expresion_regular_dni;
            var dni = document.getElementById("dni").value;
            expresion_regular_dni = /^\d{8}[a-zA-Z]$/;
            if (expresion_regular_dni.test(dni) === true) {
                numero = dni.substr(0, dni.length - 1);
                letr = dni.substr(dni.length - 1, 1);
                numero = numero % 23;
                letra = 'TRWAGMYFPDXBNJZSQVHLCKET';
                letra = letra.substring(numero, numero + 1);
                if (letra !== letr.toUpperCase()) {
                    alert('Dni erróneo, la letra del NIF no se corresponde');
                }
            } else {
                alert('Dni erróneo, formato no válido');
            }
        }

        function sacarProvincia() {
            var codigo = "";
            var prov = "";
            var cod;
            codigo = document.getElementById("cp").value;
            if (codigo.length < 5) {
                alert("El codigo postal debe tener 5 dígitos.");
            } else {
                cod = parseInt(codigo.substring(0, 2));
                if (cod === 2) {
                    prov = "ALBACETE";
                    document.getElementById("provincia").value = prov;
                } else if (cod === 19) {
                    prov = "GUALADAJARA";
                    document.getElementById("provincia").value = prov;
                } else if (cod === 16) {
                    prov = "CUENCA";
                    document.getElementById("provincia").value = prov;
                } else if (cod === 13) {
                    prov = "CIUDAD REAL";
                    document.getElementById("provincia").value = prov;
                } else if (cod === 45) {
                    prov = "TOLEDO";
                    document.getElementById("provincia").value = prov;
                }
            }
        }


        function validarFecha() {
            var fecha = new Date();
            fecha = document.getElementById("nacimiento").value;
            var array_fecha = fecha.split("-");

            if (array_fecha.length !== 3) {
                alert("Fecha no valida");
            } else {
                var dia = array_fecha[2];
                var mes = array_fecha[1];
                var anio = array_fecha[0];

                var hoy = new Date();
                var ahora_anio = hoy.getYear();
                var ahora_mes = hoy.getMonth() + 1;
                var ahora_dia = hoy.getDate();

                var edad = (anio - ahora_anio - 1900) * -1;
                console.log(edad);
                console.log(ahora_anio - 118);

                if (ahora_anio - 118 === anio) {
                    if (ahora_mes > mes) {
                        edad--;
                        console.log(edad);
                    } else if (ahora_mes === mes) {
                        if (ahora_dia > dia) {
                            edad--;
                            console.log(edad);
                        }
                    }
                }
                if (edad < 18) {
                    alert("Eres menor de edad no puedes estar aquí");
                    var cap = document.getElementById("captcha");
                    var botones = document.getElementById("botones");
                    var formu = document.getElementById("formu");
                    var menorDeEdad = document.getElementById("menorDeEdad");
                    formu.style.display = "none";
                    cap.style.display = "none";
                    menorDeEdad.style.display = "block";
                    botones.style.display = "none";
                }
            }
        }


        function contarHijos() {
            var nhijos = 0;
            var nombre = "";
            hijos = parseInt(document.getElementById("hijos").value);
            console.log(hijos);
            for (var i = 0; i < hijos; i++) {
                do {
                    nombre = prompt("¿Nombre de tu hij@?");
                    console.log(nombre);
                    vectorHijos[i] = nombre;
                    if (vectorHijos[i].trim() === "") {
                        alert("Debe introducir datos");
                    }
                } while (vectorHijos[i].trim() === "");
            }
        }


        var code;
        function createCaptcha() {
            //limpia el contenido del div del captcha
            document.getElementById('captcha').innerHTML = "";
            var charsArray =
                    "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ@!#$%^&*";
            var lengthOtp = 6;
            var captcha = [];
            for (var i = 0; i < lengthOtp; i++) {
                //con esto no se podrán repetir caracteres
                var index = Math.floor(Math.random() * charsArray.length + 1); //obtiene siempre el siguiente en el array
                if (captcha.indexOf(charsArray[index]) === -1)
                    captcha.push(charsArray[index]);
                else
                    i--;
            }
            var canv = document.createElement("canvas");
            canv.id = "captcha";
            canv.width = 100;
            canv.height = 50;
            var ctx = canv.getContext("2d");
            ctx.font = "25px Georgia";
            ctx.strokeText(captcha.join(""), 0, 30);
            //almacena el captcha para poder validarlo
            code = captcha.join("");
            document.getElementById("captcha").appendChild(canv); // agrega canv al cuerpo
        }
        function validarCaptcha() {
            event.preventDefault();
            debugger
            if (document.getElementById("cpatchaTextBox").value === code) {
                alert("Captcha Validado!");
            } else {
                alert("Captcha Incorrecto. Prueba de nuevo!");
                createCaptcha();
            }
        }


    </script>
</head>

El body:

<body onload="createCaptcha()">

    <form onsubmit="validarCaptcha()" name="formu">

        <p>DNI:</p>
        <input type="text" class="cajas" id="dni" value="" onblur="nif()" maxlength="9" required="required">
        <p>NOMBRE:</p>
        <input type="text" class="cajas" id="nombre" value="" required="required">
        <p>APELLIDOS:</p>
        <input type="text" class="cajas" id="apellidos" value="" required="required">
        <fieldset>
            <legend>SEXO</legend>
            <input type="radio" name="genero" value="hombre" > HOMBRE<br>
            <input type="radio" name="genero" value="mujer"> MUJER<br>
        </fieldset>
        <p>DOMICILIO:</p>
        <input type="text" class="cajas" id="domicilio" value="" required="required">
        <p>CP:</p>
        <input type="text" class="cajas" id="cp" onblur="sacarProvincia();" required="required">
        <p>PROVINCIA:</p>
        <input type="text" class="cajas" id="provincia" value="" required="required">
        <p>FECHA DE NACIMIENTO:</p>
        <input type="date" class="cajas" id="nacimiento" value="" onblur="validarFecha()" required="required">
        <p>HIJOS:</p>
        <input type="number" id="hijos" class="cajas" value="0" onblur="contarHijos();" required="required">

        <br>

        <div id="captcha">
        </div>
        <input type="text" placeholder="Introduce los caracteres de arriba" id="cpatchaTextBox"/>
        <br>


        <input type="button" name="boton" value="Comprobar" onclick="comprobar()">
        <input type="button" name="validar" value="Mostrar" onclick="mostrarFormu()">


    </form>

    <div id="resultado">
        <h1>Resultados</h1>
    </div>




</body>

Al hacer clic en el botón no muestra nada, no sé qué estoy haciendo mal. Gracias de antemano.

7
  • 1
    ¿Podrías pasar también el formulario? ahorrarías mucho tiempo. Saludos. Commented el 15 dic. 2018 a las 16:54
  • Hecho. Gracias por el consejo. Commented el 15 dic. 2018 a las 17:07
  • Donde pusiste la etiqueta script del javascript?
    – amblador
    Commented el 15 dic. 2018 a las 17:11
  • En el head, he pegado el script entero por si el error está ahí. Gracias Commented el 15 dic. 2018 a las 17:16
  • fijate en la consola si hay errores, hay varias funciones e IDs referenciados que faltan en el código mostrado. (no hace falta mostrar todo), en principio presiona F12 y a ver que sale: incluye el o los errores que veas Commented el 15 dic. 2018 a las 17:19

2 respuestas 2

0

Prueba lo siguiente:

  1. declara una nueva variable var _html = "";
  2. en lugar de resultado.innerHTML += dni; haz esto: _html += dni; para el dni. Haz lo mismo para todo lo demás.
  3. al final resultado.innerHTML = _html;

Espero que sea lo que necesites. Si no funciona, por favor añade el resto de HTML que falta.

actualización

Veo que mientras tanto has añadido más código. Her simplificado algo tu código porque en el HTML tienes varias onblur que llaman una funcion que no la tengo.

que he hecho:
  • he añadido algunos id que no tenias en el HTML.
  • no hay ningún elemento botones así que lo he comentado en el javascript
  • también he comentado lo de vectorHijos porque no tengo ningún vectorHijos. Probablemente los tienes en otra parte.

El principal error era lo que te había comentado antes: resultado.innerHTML = _html Por favor pruebalo y dime como te ha ido.

function mostrarFormu() {

            var cap = document.getElementById("captcha");
            //var botones = document.getElementById("botones");
            var formu = document.getElementById("formu");
            var resultado = document.getElementById("resultado");
  var sexo="";        
  var _html = ""

            formu.style.display = "none"; // ocultar formulario
            resultado.style.display = "block"; // mostrar resultado
            cap.style.display = "none";
            //botones.style.display = "none";

            var sex = document.getElementsByName("genero");
            for (var i = 0; i < sex.length; i++) {
                if (sex[i].checked === true) {
                    sexo = "Tu sexo es: " + sex[i].value + "<br>";
                }
            }

            var dni = "DNI: " + document.getElementById("dni").value + "<br/>";
            var nombre = "NOMBRE: " + document.getElementById("nombre").value + "<br/>";
            var apellidos = "APELLIDOS: " + document.getElementById("apellidos").value + "<br/>";
            var domicilio = "DOMICILIO: " + document.getElementById("domicilio").value + "<br/>";
            var cp = "CP: " + document.getElementById("cp").value + "<br/>";
            var provincia = "PROVINCIA: " + document.getElementById("provincia").value + "<br/>";
            var nacimiento = "FECHA DE NACIMIENTO: " + document.getElementById("nacimiento").value + "<br/>";
            var hijos = "Nº DE HIJOS: " + document.getElementById("hijos").value + "<br/>";

            _html += dni;
            _html += nombre;
            _html += apellidos;
            _html += sexo;
            _html += domicilio;
            _html += cp;
            _html += provincia;
            _html += nacimiento;
            _html += hijos;
/*
            for (var i = 0; i < vectorHijos.length; i++) {
                var hijo = "Tu hij@ se llama: " + vectorHijos[i] + "<br/>";
                _html += hijo;
            }*/
  
  
  resultado.innerHTML = _html
        }
<form onsubmit="validarCaptcha()" name="formu" id="formu">

        <p>DNI:</p>
        <input type="text" class="cajas" id="dni" value=""  maxlength="9" required="required">
        <p>NOMBRE:</p>
        <input type="text" class="cajas" id="nombre" value="" required="required">
        <p>APELLIDOS:</p>
        <input type="text" class="cajas" id="apellidos" value="" required="required">
        <fieldset>
            <legend>SEXO</legend>
            <input type="radio" name="genero" value="hombre" > HOMBRE<br>
            <input type="radio" name="genero" value="mujer"> MUJER<br>
        </fieldset>
        <p>DOMICILIO:</p>
        <input type="text" class="cajas" id="domicilio" value="" required="required">
        <p>CP:</p>
        <input type="text" class="cajas" id="cp"  required="required">
        <p>PROVINCIA:</p>
        <input type="text" class="cajas" id="provincia" value="" required="required">
        <p>FECHA DE NACIMIENTO:</p>
        <input type="date" class="cajas" id="nacimiento" value="" onblur="validarFecha()" required="required">
        <p>HIJOS:</p>
        <input type="number" id="hijos" class="cajas" value="0"  required="required">

        <br>

        <div id="captcha">
        </div>
        <input type="text" placeholder="Introduce los caracteres de arriba" id="cpatchaTextBox"/>
        <br>


        <input type="button" name="boton" value="Comprobar" onclick="comprobar()">
        <input type="button" name="validar" value="Mostrar" onclick="mostrarFormu()">


    </form>

    <div id="resultado">
        <h1>Resultados</h1>
    </div>

2
  • He hecho lo que me has dicho pero nada, quizás el problema esté en otro sitio. He añadido el código que falta. Gracias Commented el 15 dic. 2018 a las 17:06
  • 1
    SOLUCIONADO! Aplicando lo que me has dicho y quitando esto: formu.style.display = "none"; // ocultar formulario resultado.style.display = "block"; // mostrar resultado cap.style.display = "none"; botones.style.display = "none"; Ha funcionado. GRACIAS! Commented el 15 dic. 2018 a las 17:28
0

Primer error que encontré.

formu.style.display = "none"; // ocultar formulario (esto esta bien).

var formu = document.getElementById("formu"); //estas buscando por id pero el elemento que buscas no existe, que es el siguiente:

Tu lo tienes asi: < form onsubmit="validarCaptcha()" name="formu" >

Debe ser así ya que estas buscando por id:

< form onsubmit="validarCaptcha()" name="formu" id="formu" >

Y después de corregir eso, no pude encontrar el elemento con el id='botones' en el html. que estas utilizando aquí.

botones.style.display = "none";

Espero te sirva esto.

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.