When input type="text" is added because you have selected a number of siblings > 0 the InnerHtml adds these input, but sends me to hello.html and should not because the input is 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>
// ------ hello.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>
You can see very fast how the innerHtml adds the inputs well but it quickly sends me to the hello.html and it should stay in the FORM because the new input is of the required type and that I put the focus to be detected by the html ...