I can not retrieve data from a form (HTML and JavaScript)

Question

I can not retrieve data from a form (HTML and JavaScript)

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

The idea is that I have a form, and when I fill it out and click on a button, it shows the results just below, on the same HTML page. It is assumed that when you click on:

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

I should show my form using the function:

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

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

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

When I click on the button it does not show anything, I do not know what I'm doing wrong. Thanks in advance.

javascript html5

asked by Estudiante Desarrollo Web 15.12.2018 в 17:38

source

2 answers

0

First error I found.

formu.style.display="none"; // hide form ( this is fine ).

var formu = document.getElementById ("formu"); // you are looking for id but the item you are looking for does not exist, which is the following:

You have it like this: < form onsubmit="validateCaptcha ()" name="formu" >

It must be like this since you are looking for id:

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

And after correcting that, I could not find the element with the id = 'buttons' in the html. what are you using here.

buttons.style.display="none";

I hope this serves you.

answered by 15.12.2018 в 18:41

How to insert images in JSP? Delete and Rebuild BD

score 0 · Accepted Answer

Try the following:

declares a new variable var _html = "";

instead of resultado.innerHTML += dni; do this: _html += dni; for the ID. Do the same for everything else.

at the end resultado.innerHTML = _html;

I hope it is what you need. If it does not work, please add the rest of the missing HTML.

update

I see that in the meantime you have added more code. It simplified your code somewhat because in HTML you have several onblur that call a function that I do not have.

What have I done:

I added some id that you did not have in the HTML.
there is no botones element so I've commented on it in javascript
I've also commented on vectorHijos because I do not have any vectorHijos . You probably have them elsewhere.

The main error was what I had told you before: resultado.innerHTML = _html Please try it and tell me how it went.

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>