PDA

Ver la Versión Completa : Crear elementos de formulario html dinámicamente con javascript

jandroruiz
28-02-2013, 14:44:05
Hola a todos.

Digamos que tengo algo así:


<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
28-02-2013, 16:06:21
Hola,

Te recomiendo un par de articulos que tratan el tema:


How to dynamically add form elements via JavaScript (http://www.randomsnippets.com/2008/02/21/how-to-dynamically-add-form-elements-via-javascript/)
Plugin jQuery para añadir campos en un formulario (http://www.desarrolloweb.com/articulos/jquery-anadir-campo-formulario.html)
jandroruiz
28-02-2013, 17:48:52
Gracias, movorack. En los enlaces he conseguido casi lo que quería. Sin embargo, hay una cosa que no consigo.

Tengo primeraPagina.html


<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


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


<?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:


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
28-02-2013, 18:44:44
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
28-02-2013, 19:09:51
No sé lo que he hecho, pero ahora sí me funciona. Gracias movorack.
Fer1027
23-07-2016, 14:55:52
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
26-07-2016, 10:56:51
Hola Fer1027. Como a todos los novatos, te emplazo a que leas nuestra Guía de estilo (http://www.clubdelphi.com/foros/guiaestilo.php).

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