1

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

1 respuesta 1

2

Estás insertando nuevos Inputs FUERA del formulario, ya que el div #nuevoContenido está fuera de este. La solución sería meter el #nuevoContenido dentro del form para que la norma de requiered sea aplicada. El atrributo required solo funciona dentro de el elemento form

Añado un snippet con la solución:

    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;  

    } 
<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/>
     <div id="nuevocontenido">

     </div>
            <input type="submit" value="Enviar" id="idbtnsend" name="btnsend" >
        </form>



    </main>  
</body>

PD: Realmente yo utilizaría Jquery para manejar el enevento onChange en el input de hermanos y bootstrap para el estilo del form

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.