Agregar Fila de campos al cliquear boton

k-seraph · #1 (**permalink**) 05/07/2005, 10:04

Hola,

Necesito hacer que al cliquear en el boton de un formulario en ves de hacer submit se agregue una fila mas de campos identicos.

Me explico mejor;

Tengo dos campos, nombre_1 y edad_1, al hacer clic en el boton agregar otro se agregue 2 campos d nombres nombre_2 y edad_2 y asi aumennato el numero de campos y el numero que identifica el mismo hasta que el usuario cliquee en otro boton de nombre inscribir.

Es posible hacer esto en js? Como se haria?

Saludos a todos y de antemano gracias.

JavierB · #2 (**permalink**) 05/07/2005, 10:10

Hola k-seraph

En este mensaje se traró el tema:

http://www.forosdelweb.com/f13/crear-campos-ocultos-para-sabios-245938/

Saludos,

k-seraph · #3 (**permalink**) 05/07/2005, 13:09

Gracias JavierB,

Ahora, como podria hacer para que los campos salgan arriba del boton y no al lado? y como puedo hacer para agregar filas a la tabla html (donde deberian estar contenidos los campos)

gracias de antemano

k-seraph · #4 (**permalink**) 08/07/2005, 10:43

Hola, estoy agregando campos dinamicos a mi form usando el siguente codigo
(cortesia de JavierB y modificado a mis necesidades)

Código:

 
function add(form) {
 var n=0;
     n++;
     form=form.form;

       code=document.createElement('input');
       code.type='text';
       code.name='cod_'+n;
       code.size='5';

       cant=document.createElement('input');
       cant.type='text';
       cant.name='cant_'+n;
       code.size='3';

  form.appendChild(code);
  form.appendChild(cant);
}

y lo llamo de la siguente manera

Código HTML:

<form>
input type="button" value="agregar" onclick="add(this)">
</form>

Ahora, com hago para que no salgan los campos del lado derecho del boton? necesito ubicarlo en una tabla HTML que esta sobre el boton que los agrega.

Saludos a todos y de antemano gracias...

JavierB · #5 (**permalink**) 08/07/2005, 11:15

Hola de nuevo.

Se me había despistado este mensaje y hasta ahora no me he dado cuenta que estaba pendiente. A ver si este código te sirve:

Código PHP:

  <html> 
<head> 
<title>Untitled</title> 
<script> 
 var n=0; 
function add() { 
  pepe = document.getElementById('tabla'); 
  n++; 
  fila = document.createElement('tr'); 
   
  celda = document.createElement('td'); 
  fila.appendChild(celda); 
  code=document.createElement('input'); 
  code.type='text'; 
  code.name='cod_'+n; 
  code.size='5'; 
  celda.appendChild(code); 
   
  celda = document.createElement('td'); 
  fila.appendChild(celda);       
  cant=document.createElement('input'); 
  cant.type='text'; 
  cant.name='cant_'+n; 
  cant.size='3'; 
  celda.appendChild(cant); 
  pepe.appendChild(fila); 
 
} 
</script> 
</head> 
<body> 
<table border="1"> 
<tbody id="tabla"> 
</tbody> 
</table> 
 <form> 
 <input type="button" value="agregar" onclick="add()"> 
 </form> 
</body> 
</html>

He puesto var n=0 fuera de la función para que no vuelva a empezar a cero cada vez que la llames.

Saludos,

k-seraph · #6 (**permalink**) 09/07/2005, 19:19

Gracias JavierB, pero tengo un problema.. cuando hago clic en el boton no pasa nada... he mirado tu nuevo codigo y no veo el error me ayudas?

De antemano gracias y saludos

JavierB · #7 (**permalink**) 10/07/2005, 02:33

Rehola.

He probado el código en Internet Explorer 6.0 y Firefox 1.4 y funciona bien. Al pulsar el botón se añade una fila con dos celdas y en cada celda un cuadro de texto.

Saludos,

k-seraph · #8 (**permalink**) 10/07/2005, 09:52

Recontrahola XD, ya vi lo que estaba haciendo mal... ya funciona perfecto ahora, es posible llamar otra funcion js para que solo se pueda escribir numeros y limitar el tamaño?

intente lo siguente:

Código:

  code.maxlength='2';
  code.onKeyPress='return acceptNum(event)';

no funciona, no da error pero tampoco ni limita la cantidad de caracteres ni llama la funcion...

la funcion se encuentra en el mismo .js que esta...

agrego el codigo completo para mejor entender...

Código:

var n=0;
function add() {
  pepe = document.getElementById('tabla');
  n++;
  fila = document.createElement('tr');

  celda = document.createElement('td');
  celda.align='center';

  fila.appendChild(celda);
  code=document.createElement('input');
  code.type='text';
  code.name='cod_'+n;
  code.size='5';
  code.maxlength='2';
  code.onKeyPress='return acceptNum(event)';
  celda.appendChild(code);

  celda = document.createElement('td');
  celda.align='center';
  fila.appendChild(celda);
  cant=document.createElement('input');
  cant.type='text';
  cant.name='cant_'+n;
  cant.size='2';
  cant.maxlength='2';
  cant.onKeyPress='return acceptNum(event)';
  celda.appendChild(cant);
  pepe.appendChild(fila);

}

espero me puedan ayudar.. saludos...

JavierB · #9 (**permalink**) 10/07/2005, 10:31

¿Que se dice después de Recontrahola? Bueno, no importa. Te pongo un par de líneas más de código, lo malo es que el asignar el evento onkeypress no he conseguido que funcione en Firefox:

Código:

code.maxLength='2';
code['onkeypress'] = function() {return acceptNum(event)};

Saludos,

k-seraph · #10 (**permalink**) 10/07/2005, 10:56

Gracias JavierB, lo de FF en este caso no importa ya que es un sistema que funcionara dentro de una intranet empresarial (no se tendra acceso desde internet, solo las maquinas de la red privada) y estas trabajan con IE.

Gracias por tu ayuda, ya logre hacer lo que deseaba...

Saludos.

JavierB · #11 (**permalink**) 10/07/2005, 11:26

Me alegro de que al final lo hayas podido solucionar. Hasta otra

k-seraph · #12 (**permalink**) 10/07/2005, 12:17

Hola de nuevo... uso este mismo post para mantener organizadito el foro....

Ya todo funciona perfecto pero ahora me gustaria darle focus al campo que se acaba de crear dinamicamente... de esta forma el usuario solo hace clic al boton y empeiza a escribir en el campo....

Como hago esto?

Saludos y gracias de nuevo

ADRIANA_TE_AMO · #13 (**permalink**) 12/07/2005, 15:12

Cómo podría hacerse para que al igual que se agrega, un botón para borrar una fila de campos ???

guiweb · #14 (**permalink**) 01/08/2005, 12:58

Hola yo use el codigo que dejaron mas arriba, pero yo ademas de agregar 2 text box, deseo agregar un boton que al hacer click sobre el, me agregue 2 text box mas otro boton agregar, aqui dejo mi codigo, solo que no me esta funcionando....

Código HTML:

<html> 
<head> 
<title>Untitled</title> 
 
</head> 
<body> 
<table border="1"> 
<tbody id="tabla"> 
</tbody> 
</table> 
<form> 
&nbsp;<input type="button" value="agregar" onclick="add()"></form> 
<script> 
var n=0; 
function add() { 
  pepe = document.getElementById('tabla'); 
   n++;
  fila = document.createElement('tr'); 
  
  celda = document.createElement('td'); 
  fila.appendChild(celda); 
  code=document.createElement('input'); 
  code.type='text'; 
  code.name='cod_'+n; 
  code.size='5'; 
  celda.appendChild(code); 
   
  celda = document.createElement('td'); 
  fila.appendChild(celda);       
  cant=document.createElement('input'); 
  cant.type='text'; 
  cant.name='cant_'+n; 
  cant.size='3'; 
  celda.appendChild(cant); 
  pepe.appendChild(fila); 
 
 //esto esta agregado por mi

  celda = document.createElement('td'); 
  fila.appendChild(celda);       
  boton=document.createElement('input'); 
  boton.type='button'; 
  boton.value='Agregar';
  boton.onclick='add()';
  boton.name='button'+n; 
  boton.size='3'; 
  celda.appendChild(boton); 
  pepe.appendChild(fila);

} 
</script>
</body> 
</html>

que estoy haciendo mal con el codigo de agregar boton????

inetd · #15 (**permalink**) 10/03/2006, 14:33

Excelente el script, pero se podra hacer lo mismo con <textarea> ?

Gracias

inetd · #16 (**permalink**) 13/03/2006, 10:37

Cita:

Iniciado por inetd

Excelente el script, pero se podra hacer lo mismo con <textarea> ?

Gracias

Amigos me contesto solo, era solo cambiar

code=document.createElement('input');
por
code=document.createElement('textarea');

y eliminar la linea
code.type='text';

Lo que me falta es como poner un texto arriba de cada Tabla
xejemplo Tabla Nº 1... Tabla Nº n

augusto_jaramil · #17 (**permalink**) 13/03/2006, 18:08

Mil felicitaciones a los creadores de este script.....

Lo he estado tantiando y me ha parecido bastante bueno.... solo tengo una inquietud: he estado intentando agregar "style" para ponerle color a los botones (background-color) y dimensiones a los campos (width) pero pailas... me da un error todo cacharro que no he podido resolver ( setting a property that has only getter )

El codigo que he puesto es:

Código PHP:

  function add() { 
  pepe = document.getElementById('tabla'); 
  n++; 
  fila = document.createElement('tr'); 
 
  celda = document.createElement('td'); 
  fila.appendChild(celda); 
  boton1=document.createElement('input'); 
  boton1.type='button'; 
  boton1.name='i'+n; 
  boton1.size='1'; 
  boton1.value='V'; 
[B]  boton1.style='width: 10; background-color:#738EB5'; [/B] 
  boton1['onKeyPress'] = function () { return handleEnter(this, event) }; 
  celda.appendChild(boton1); 
  pepe.appendChild(fila);

Sera que se puede hacer esto.... yo creo que si falta ver como

Mil Gracias a Todos

Un Cordial Saludo

JavierB · #18 (**permalink**) 14/03/2006, 01:52

Hola augusto_jaramil

Puedes poner los estilos uno por uno:

boton1.style.width = '10px';
boton1.style.backgroundColor = '#738eb5';

o echar un vistazo a esta página donde proponen un código que me parece bastante interesante:

http://slayeroffice.com/code/functio...yleString.html

Saludos,

inetd · #19 (**permalink**) 17/03/2006, 06:32

Hola JavierB
Super buenos los ejemplos, pero es posible poner un texto ensima del input, como una forma de identificarlos visualmente.
exemplo.
Cuadro de Texto 1
Cuadro de Texto 2
...
Cuadro de Texto n

inetd · #20 (**permalink**) 20/03/2006, 13:23

Aguien me puede ayudar ?
Pleaseeeeeeeeeeeeee

Cita:

Iniciado por inetd

Hola JavierB
Super buenos los ejemplos, pero es posible poner un texto ensima del input, como una forma de identificarlos visualmente.
exemplo.
Cuadro de Texto 1
Cuadro de Texto 2
...
Cuadro de Texto n

inetd · #21 (**permalink**) 21/03/2006, 12:36

Cita:

Iniciado por inetd

Aguien me puede ayudar ?
Pleaseeeeeeeeeeeeee

Logre agregar texto, pero el texto aparece al lado del input y yo necesito colocarlo sobre el input

Código PHP:

  <script> 
 var n=0; 
function add() { 
  pepe = document.getElementById('tabla'); 
  n++; 
  fila = document.createElement('tr'); 
  celda = document.createElement('td'); 
 
###### Texto ####### 
 text = document.createElement('th'); 
 text.appendChild(document.createTextNode("ACUERDO Nº "+n)); 
 fila.appendChild(text); 
################### 
 
 fila.appendChild(celda); 
  code=document.createElement('input'); 
  code.type='text'; 
  code.name='cod_'+n; 
  code.size='5'; 
  celda.appendChild(code); 
   
  celda = document.createElement('td'); 
  fila.appendChild(celda);       
  cant=document.createElement('input'); 
  cant.type='text'; 
  cant.name='cant_'+n; 
  cant.size='3'; 
  celda.appendChild(cant); 
  pepe.appendChild(fila); 
 
} 
</script>

caricatos · #22 (**permalink**) 21/03/2006, 13:05

Hola:

Tal vez sea suficiente poner detrás del texto un salto de línea (tag br)...

text.appendChild(document.createTextNode("ACUERDO Nº "+n));
text.appendChild(document.createElement("br"));

fila.appendChild(text);

Otro link sobre el tema: http://www.forosdelweb.com/f13/dom-228166/

Saludos

inetd · #23 (**permalink**) 21/03/2006, 13:45

caricatos

No funciono

caricatos · #24 (**permalink**) 21/03/2006, 15:22

Cita:

Iniciado por inetd

caricatos

No funciono

¿Qué es lo que no funcionó...?

He probado añadir saltos de línea así, y funciona...

Saludos

chalchis · #25 (**permalink**) 21/03/2006, 17:33

http://chalchis.webcindario.com/Scripts/formulario.htm

saludos

Cita:

Iniciado por k-seraph

Hola,

Necesito hacer que al cliquear en el boton de un formulario en ves de hacer submit se agregue una fila mas de campos identicos.

Me explico mejor;

Tengo dos campos, nombre_1 y edad_1, al hacer clic en el boton agregar otro se agregue 2 campos d nombres nombre_2 y edad_2 y asi aumennato el numero de campos y el numero que identifica el mismo hasta que el usuario cliquee en otro boton de nombre inscribir.

Es posible hacer esto en js? Como se haria?

Saludos a todos y de antemano gracias.

miglos · #26 (**permalink**) 03/05/2006, 12:17

Saludos!
Estoy trabajando en algo similar a lo que plantea Chalchis en su script, todo va bien, ahora, como se forma la cadena para enviar los datos ingresados?

chalchis · #27 (**permalink**) 03/05/2006, 12:24

yo tomo como referencia a unos de los campos
$size_lista=count($_POST['posicion'])

ya empiezo a recorrer
for ($i=0;$i<$size_lista;$i++)
{

}

recuerda poner en los names de los componentes algo asi
name="nombre[]"

saludos

miglos · #28 (**permalink**) 03/05/2006, 12:46

Te agradezco la repsuesta chalchis, pero se me ha complicado el asunto, podrias ponerme un ejemplo por favor, o tienes el script de verificar().??? Osea, q sucede luego de hacer submit?

chalchis · #29 (**permalink**) 03/05/2006, 12:52

eso eso solo para validar que los campos no vayan
vacios con javascript

function verificar(formulario)
{
//select-one
var campos=document.forms.formulario.elements;
var errorpasa="v";
for (x=0;x<campos.length;x++)
{
//alert(campos[x].type);
if(campos[x].type=="select-one")
{
//alert(campos[x].id);
if(campos[x].value=="")
{
if(campos[x].name=="lista_categoria[]")
{
alert('Error campo vacio: se requiere seleccionar una categoría.');
campos[x].focus();
errorpasa="f";
break;
}

if(campos[x].name=="lista_articulos[]")
{
alert('Error campo vacio: se requiere seleccionar el artículo a solicitar.');
campos[x].focus();
errorpasa="f";
break;
}

if(campos[x].name="lista_unidades[]")
{
alert('Error campo vacio: seleccione la unidad de medida en la que requiere el artículo');
campos[x].focus();
errorpasa="f";
break;
}

if(campos[x].name=="lista_proveedores[]")
{
//alert("debe elegir un proveedor o seleccionar no especificar");
alert('Error campo vacio: se requiere seleccionar el proveedor del artículo\nsi desconoce el proveedor escoja lo opcion No especificar.');
campos[x].focus();
errorpasa="f";
break;
}
}
}

if(campos[x].type=="text")
{
if(campos[x].name=="txprecio[]")
{
if(campos[x].id=="tximporte")
{
if(campos[x].value=="")
{
alert("Error campo vacio: especifique el $ importe que desea solicitar.");
campos[x].focus();
errorpasa="f";
break;
}
}
}

if(campos[x].name=="txcantidad[]")
{
if(campos[x].value=="")
{
alert("Error campo vacio: se requiere la cantidad a solicitar del artículo seleccionado.");
campos[x].focus();
errorpasa="f";
break;
}
}

}

if(campos[x].type=="textarea")
{
if(campos[x].value=="")
{
if(campos[x].id=="txjustificado")
{
alert("Error campo vacio: se requiere especificar el motivo por el cual solicita el artículo.");
campos[x].focus();
errorpasa="f";
break;
}
else
{
if(campos[x].id=="txjustificadoimporte")
{
alert("Error campo vacio: se requiere especificar el motivo por el cual solicita el efectivo.");
campos[x].focus();
errorpasa="f";
break;
}
}
}
}

}

if(errorpasa=="v")
{
if (confirm("¿Los datos introducidos estan correctos?"))
{
return(true);
}
else
{
return(false);
}
}
else
{
return(false);
}

}

Cita:

Iniciado por miglos

Te agradezco la repsuesta chalchis, pero se me ha complicado el asunto, podrias ponerme un ejemplo por favor, o tienes el script de verificar().??? Osea, q sucede luego de hacer submit?

miglos · #30 (**permalink**) 03/05/2006, 13:11

Cierto, pense que aqui venia lo del envio de los datos, pero claro, su nombre lo dice validar!!

Lo que queria era ver como tomabas los valores seleccionados, lo que yo estoy haciendo es seleccionar los valores de 2 selects y un textbox, donde indico la cantidad de cada producto

ejemplo
======
[cant]---[tipo]--------[modelo] [+] (el boton "+" me agrega una nueva fila)
---3 ----pin pad-------SC552
---2-----POS ---------SP152
---1-----printer -------P-350

luego, al hacer submit, deseo guardar esos valores a una base de datos.
Entonces me falta guardar los valores ingresados.
Te agradezco nuevamente!!!