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.