Crear elementos de formulario html dinámicamente con javascript

jandroruiz · #1 28-02-2013

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

[movorack] · #2 28-02-2013

Hola,

Te recomiendo un par de articulos que tratan el tema:

jandroruiz · #3 28-02-2013

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

[movorack] · #4 28-02-2013

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.

jandroruiz · #5 28-02-2013

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

Fer1027 · #6 23-07-2016

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!

Ñuño Martínez · #7 26-07-2016

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

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
Ocultar y mostrar elementos mediante JavaScript	foetus	HTML, Javascript y otros	2	26-11-2007 14:00:23
2 preguntitas JavaScript-HTML	Deiv	HTML, Javascript y otros	1	26-01-2007 05:15:26
como imprimir con javascript o html o php	rls	Varios	1	12-11-2006 15:53:11
Crear dinámicamente componentes en el formulario	D@byt	Varios	2	27-11-2005 22:30:05
Una facil de html y javascript	Alejo	Internet	5	12-09-2004 15:33:03