añadir campos textbox a form

kaiowa · #1 (**permalink**) 22/10/2004, 05:17

Hola, como puedo hacer que al dar a un boton se vayan agregando campos textbox a un formulario?

Alguien podria ayudarme?

Un saludo

JavierB · #2 (**permalink**) 22/10/2004, 06:02

Hola kaiowa.

Un código sencillo:

Código HTML:

<html>
<head>
<script>
function anadir(obj) {
  elem=document.createElement('input');
	obj.appendChild(elem);
}
</script>
</head>
<body>
<form>
<input type="button" onclick="anadir(this.form)" />
</form>
</body>
</html>

Si lo necesitas más complicado, seguro que podemos complicarlo

Saludos,

kaiowa · #3 (**permalink**) 22/10/2004, 07:01

muchas gracias,

¿y como hago para que cada campo añadido se llame de una manera diferente? del tipo de text1,text2,text3.... lo necesito para recoger todos los campos con un bucle.

Muchas gracias,

Un saludo

JavierB · #4 (**permalink**) 24/10/2004, 03:15

Hola de nuevo.

Lo de dar un nombre a los campos se me ha atragantado, osea que no he sido capas. Se supone que sería algo así:

elem=document.createElement('input');
elem.name='text1'; // o elem.setAttribute('name','text1');
obj.appendChild(elem);

pero lueno no consigo recoger el valor. Si que se puede dandole un id, pero no se si te servirá. A ver si hay suerte y alguien con más luces lo consigue.

Saludos,

pintix · #5 (**permalink**) 25/10/2004, 01:22

Hola,

primero puedes probar a crear el atributo, a ver si en dos pasos funciona:

elem=document.createElement('input');
attr = elem.createAttribute ('name');
attr.value = 'text1';
obj.appendChild(elem);

PS modificado para cambiar código

dark_night · #6 (**permalink**) 30/10/2004, 06:08

yo necesito lo mismo...pero al hacer lick los cuadros aparecen uno al lado del otro y yo necesito ke aparescan hacia abajo...ocmo lo hago???

JavierB · #7 (**permalink**) 30/10/2004, 08:49

Hola dark_night.

Código HTML:

function anadir(obj) {
	elem=document.createElement('br');
  obj.appendChild(elem);
  elem=document.createElement('input');
	obj.appendChild(elem);
}

Saludos,

CRISMA · #8 (**permalink**) 30/10/2004, 10:15

igual me uno... necesito algo como esto (en mi caso agrego textarea) y todo chevere hasta ahora, pero con otro detallito: habra manera de que el boton simpre aparezca al final?

Gracias

JavierB · #9 (**permalink**) 30/10/2004, 10:37

Hola CRISMA.

Has los liguientes cambios en el código:

function anadir(obj) {

por: function anadir(obj,boton) {

obj.appendChild(elem);

por: obj.insertBefore(elem,boton);

<input type="button" onclick="anadir(this.form)" />

por: <input type="button" onclick="anadir(this.form,this)" />

Saludos,

CRISMA · #10 (**permalink**) 30/10/2004, 11:42

me funcionó perfecto, muchas gracias Javier...

si a alguien le sirve el código queda asi:

Código HTML:

<html>
<head>
<script>
function anadir(obj,boton) {
  elem=document.createElement('textarea');
  obj.insertBefore(elem,boton);
  elem=document.createElement('br');
  obj.insertBefore(elem,boton);
}
</script>
</head>
<body>
<form>
<input type="button" onclick="anadir(this.form,this)"/>
</form>
</body>
</html>

cada vez que se pulsa el boton se agrega un textarea en la parte superior

CRISMA · #11 (**permalink**) 30/10/2004, 12:08

Aja soy yo otra vez, no entiendo porque los valores de los textarea no me llegan a la pagina donde los envio...

igual si hago "ver codigo" a la pagina donde creo los textarea no aparecen estos, aunque los veo creados. entonces no se ni con que nombre se estan enviando...

estare haciendo algo mal?

JavierB · #12 (**permalink**) 30/10/2004, 12:53

Yo también soy yo otra vez.

Un poco más de código:

function anadir(obj,boton) {
elem=document.createElement('textarea');
elem.setAttribute ('name','apellidos');
obj.insertBefore(elem,boton);

Saludos,

dark_night · #13 (**permalink**) 30/10/2004, 13:12

no entiendo eso ultimo

elem.setAttribute ('name','apellidos');???

CRISMA · #14 (**permalink**) 30/10/2004, 14:05

ok ya veo lo del problema de dar el nombre

"Lo de dar un nombre a los campos se me ha atragantado".

todos se envian con el mismo nombre...

no habrá forma de contar las veces que se hace click al boton y concatenar esta variable al nombre del elemento (texarea, campo) ???

CRISMA · #15 (**permalink**) 30/10/2004, 14:10

aja dark_night el nombre de los texarea creados es apellidos y se pasan por metodo GET.

por ejemplo:
si hago click dos veces en el boton creo dos textarea, pero para los dos el atributo "name" es apellidos, y cuando los envio (en este caso a la pagina recibecampos.jsp) en la barra direccion se ve

http://127.0.0.1:8080/adi/recibecamp...ellidos=texto2

JavierB · #16 (**permalink**) 31/10/2004, 04:04

Rehola.

Código HTML:

<script>
var num=0;
function anadir(obj,boton) {
  elem=document.createElement('textarea');
  num++;
  elem.setAttribute ('name','apellidos'+num);
  obj.insertBefore(elem,boton);
  elem=document.createElement('br');
  obj.insertBefore(elem,boton);
}
</script>

Saludos,

kepawe · #17 (**permalink**) 31/10/2004, 16:46

Hola a todos

Para evitar que se cree más de una vez el campo apellidos. Lo he comprobado en IE6 y Mozilla 1.7 . Si no estoy equivado debe funcionar en IE5+ y NS6+.

Código PHP:

  <html> 
<head> 
<script> 
function anadir(obj,boton) { 
// comprobamos si esta creado el campo apellidos  
for(var ct= 0;ct < document.forms.length;ct++){ 
    if(document.forms[ct].name =="form1"){ 
            for(var ct1 = 0 ;ct1 < document.forms[ct].elements.length; ct1++){ 
                if(document.forms[ct].elements[ct1].name == "apellidos"){ 
             
                return false 
                 
                } 
             
            } 
    } 
 
} 
 
  elem=document.createElement('textarea'); 
  obj.insertBefore(elem,boton); 
  elem.setAttribute ('name','apellidos'); 
  elem=document.createElement('br'); 
  obj.insertBefore(elem,boton); 
   
} 
</script> 
</head> 
<body> 
<form name="form1"> 
<input type="button" onclick="anadir(this.form,this)"/> 
</form> 
</body> 
</html>

Un saludo a todos.

kepawe · #18 (**permalink**) 31/10/2004, 17:04

Hola de nuevo a todos.
No me he dado cuenta que JavierB ya ha contestado a la pregunta, bueno es otra forma de solucionar el problema pero la solución de JavierB es mucho más practica.

Un saludo a todos.

anabelhig · #19 (**permalink**) 09/02/2011, 08:30

Hola Javier me gustaria saber de que forma puedo hacer lo mismo peri insertando label antes de cada textarea.

IsaBelM · #20 (**permalink**) 09/02/2011, 08:33

los métodos son los mismos createElement y insertBefore, pero ahora creas un label

anabelhig · #21 (**permalink**) 16/02/2011, 09:36

Bien ahora me surge otra duda como puedo hacer para recibir los parametros en jsp, teniendo en cuenta que el usuario puede agragar mas o menos campos, dado que el formulario es dinamico

Agradezco mucho a la persona que me pueda colaborar.