Foros Club Delphi - Crear elementos de formulario html dinámicamente con javascript

Foros Club Delphi (https://www.clubdelphi.com/foros/index.php)

- HTML, Javascript y otros (https://www.clubdelphi.com/foros/forumdisplay.php?f=38)

- - Crear elementos de formulario html dinámicamente con javascript (https://www.clubdelphi.com/foros/showthread.php?t=82366)

Crear elementos de formulario html dinámicamente con javascript

Hola a todos.

Digamos que tengo algo así:

Código:

<label>Fecha de nacimiento</label><br><br>

<label>D&iacute;a</label>

<input type="number" max="31" min="1" step="1" name="dia_0" size="2">

<label>Mes</label>

<input type="number" max="12" min="1" step="1" name="mes_0" size="2">

<label>A&ntilde;o</label>

<input type="number" max="2012" min="1913" step="1" name="anyo_0" size="2"><br><hr/>



<input type="submit" value="Enviar datos"/>

Querría saber cómo puedo crear estas mismas lineas cuando pulse un button. Si lo pulso 2 veces, que me salgan estos mismos campos dos veces y que pueda seguir pulsando el button "Enviar datos" para procesarlo con php. También, que cada nuevo campo "dia_x", "mes_x" y "anyo_x" se renombre y que la x se sustituya por 1,2,3, etc.

Muchas gracias

Un saludo

Gracias, movorack. En los enlaces he conseguido casi lo que quería. Sin embargo, hay una cosa que no consigo.

Tengo primeraPagina.html

Código:

<body>

        <script src="segundaPagina.js">

        </script>

                

        <form method="POST" action="procesar.php">

                <div id="insertar">

                        <input type="text" name="dia_0">

                </div>

                <input type="button" value="Add another text input" onClick="addInput('insertar');"><br><br>

                <input type="submit" value="Enviar datos"> 

        </form>                

                

</body>

segundaPagina.js

Código:

var counter = 1;

var limit = 5;

var contador = 1;

function addInput(divName)

{

    if (counter == limit)  

        {

        alert("You have reached the limit of adding " + counter + " inputs");

    }

    else 

        {

        var newdiv = document.createElement('div');

        newdiv.innerHTML = "<br><input type='text' name='dia_"+contador+"'>";

        document.getElementById(divName).appendChild(newdiv);

        counter++;

        contador++;

    }

}

Con estos dos archivos creo varios campos del formulario con éxito, pero cuando mando esta información a procesar.php

Código:

<?php

        $dia_0 = $_POST['dia_0'];

        $dia_1 = $_POST['dia_1'];

        $dia_2 = $_POST['dia_2'];

        $dia_3 = $_POST['dia_3'];

        $dia_4 = $_POST['dia_4'];

        

        echo $dia_0."<br>";

        echo $dia_1."<br>";

        echo $dia_2."<br>";

        echo $dia_3."<br>";

        echo $dia_4."<br>";

?>

Me sale esto:

Código:

Notice: Undefined index: dia_1 in C:\xampp\htdocs\html_js\procesar.php on line 3



Notice: Undefined index: dia_2 in C:\xampp\htdocs\html_js\procesar.php on line 4



Notice: Undefined index: dia_3 in C:\xampp\htdocs\html_js\procesar.php on line 5



Notice: Undefined index: dia_4 in C:\xampp\htdocs\html_js\procesar.php on line 6

5

¿En qué estoy fallando?

Muchas gracias

1. Con las herramientas de desarrollador de tu navegador, revisa el html que te genera el javascript
2. En el PHP, revisa que llega por el POST.

No sé lo que he hecho, pero ahora sí me funciona. Gracias movorack.

Crear elementos de formulario html dinámicamente con javascript

Yo tengo el codigo para crearlo, pero como puedo hacer un conteo de los que el usuario agrego? Antes de usar los datos con php? Alguien puede ayudar!

Hola Fer1027. Como a todos los novatos, te emplazo a que leas nuestra Guía de estilo.

Respecto a tu pregunta, bastaría con tener una variable para ello, ir incrementándola y enviarla, por ejemplo, vía campo oculto (hiden).