Cuando se añaden input type="text" debido a que has seleccionado un número de hermanos > 0 el InnerHtml me añade dichos input, pero me envía al hola.html y no debería porque los input son required.
<!Doctype html>
<html>
<head>
<title>Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function cargar(){
document.getElementById("idbtnsend").addEventListener("click",repaso,false);
function repaso(evento){
var confi = confirmar();
if(confi) {
alert("final prven");
}else{
evento.preventDefault();
}
}
}
function hermanos(){
var txt='';
document.getElementById("nuevocontenido").innerHTML = txt;
var hermanos = document.getElementById("Idhermano").value;
if(hermanos > 0){
var contador = 0;
while (contador != hermanos){
contador++;
txt += "<label for='hermano'>Hermano " + contador + "Nombre: <input type='text' id='idtxtnombre"+contador+"' name='txtnombre"+contador+"' value='' required></label><br/>";
txt += "<label for='hermano'>Hermano " + contador + "Apellido: <input type='text' name='txtapellido"+contador+"' value='' required></label><br/>";
}
document.getElementById("nuevocontenido").innerHTML += txt;
document.getElementById("idtxtnombre1").focus();
}
}
function confirmar(){
var listasexo = document.formconf.elements["genero"];
var sexo;
for(var i = 0 ; i < listasexo.length; i++){
if(listasexo[i].checked){
sexo = listasexo[i].value;
}
}
var hermanos = document.getElementById("Idhermano").value;
var dni = document.getElementById("Idtxtdni").value;
var nombre = document.getElementById("Idtxtname").value;
var apellido = document.getElementById("Idtxtapellido").value;
var direccion = document.getElementById("Idtxtdireccion").value;
var edad = document.getElementById("Idtxtedad").value;
var fecha = document.getElementById("Idtxtfecha").value;
var mvl = document.getElementById("Idtxtmvl").value;
var confi = confirm("Enviando ??" + dni + "Con nombre: "+ nombre + " ,Apellidos: " +apellido + " ,con "+ hermanos + " ,Sexo: " + sexo + " ,Dirección: " + direccion + " ,edad: " +edad + " ,nacido: " + fecha + " , teléfono: " + mvl);
return confi;
}
</script>
</head>
<body onload="cargar();">
<main>
<form name="formconf" action="hola.html" method="POST">
<label for="nombre">DNI: <input type="text" name="txtdni" id="Idtxtdni" value="" required></label><br/>
<label for="nombre">NOMBRE: <input type="text" name="txtname" id="Idtxtname" value="" required></label><br/>
<label for="apellido">APELLIDO: <input type="text" name="txtapellido" id="Idtxtapellido" value="" required></label><br/>
<label for="hermanos">Hermanos: <input type="number" name="txthermano" id="Idhermano" value="" onblur="hermanos();"></label><br/>
<fieldset>
<legend> Sexo </legend>
<input type="radio" name="genero" value="Hombre" > <label for="genhom">Hombre</label>
<input type="radio" name="genero" value="Mujer" > <label for="genmuj">Mujer</label>
</fieldset>
<label for="direccion">DIRECCIÓN: <input type="text" name="txtdireccion" id="Idtxtdireccion" value="" required></label><br/>
<label for="edad">EDAD: <input type="number" name="txtedad" id="Idtxtedad" value="" required></label><br/>
<label for="fecha_nac">FECHA NAC: <input type="text" name="txtfecha" id="Idtxtfecha" value="" required></label><br/>
<label for="telefono">TELEFONO: <input type="text" name="txtmvl" id="Idtxtmvl" value="" required></label><br/>
<input type="submit" value="Enviar" id="idbtnsend" name="btnsend" >
</form>
<div id="nuevocontenido">
</div>
</main>
</body>
</html>
//------ hola.html
<!Doctype html>
<html>
<head>
<title>Llegada Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
</script>
</head>
<body>
llegué
</body>
</html>
Se puede ver muy rápido como el innerHtml añade bien los inputs pero rápidamente me manda al hola.html y debería quedarse en el FORM porque los nuevos input son de tipo de required y eso que le pongo el foco para que lo detecte el html...