Crear y remover inputs

neodani · #1 (**permalink**) 07/12/2009, 11:17

Buenas,

He conseguido modificar el siguiente script y me permite agregar o quitar nuevas "cajas inputs", pero sabría de que forma tengo que decirle para que en lugar de añadir una caja texto, me agregase toda una fila de 4 inputs.

Este el código, es 100% funcional.

Código html:

Ver original<html>
<head>
<title>Agregar y/o quitar cajas </title>
<style>
body, td, th, div, p {
color:#000000;
font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
font-size:small;
}
dd div {
margin-top:0.3em;
}
a.addlink {
background:transparent url(add.png) no-repeat scroll left top;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 20px;
text-decoration:none;
}
a.removelink {
background:transparent url(delete.png) no-repeat scroll 4px 0;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 24px;
text-decoration:none;
}
</style>
<script>
function addhostfield()
{
  var container = document.getElementById('defaulthostlist');
  var row = document.createElement('div');
  var input = document.createElement('input');
  var link = document.createElement('a');
  
  input.name = '_default_host[]';
  input.size = '30';
  link.href = '#';
  link.onclick = function() { removehostfield(this.parentNode); return false };
  link.className = 'removelink';
  link.innerHTML = 'remove';
  
  row.appendChild(input);
  row.appendChild(link);
  container.appendChild(row);
}
 
function removehostfield(row)
{
  var container = document.getElementById('defaulthostlist');
  container.removeChild(row);
}
</script>
</head>
<body>
<dd>
<div>Agregar cajas y/o quitar cajas</div><br/>
<div id="defaulthostlist">
<div id="defaulthostentry0"><input type="text" value="" size="30" name="_default_host[]"/></div></div>
<div><a title="Add another field" class="addlink" href="javascript:addhostfield()">add</a></div>
</dd>
 
<!-- Hacer lo mismo pero con 4 inputs en horizontal -->
<input type="text" value="" size="30" name="cantidad"/>
<input type="text" value="" size="30" name="descripcion"/>
<input type="text" value="" size="30" name="precio"/>
<input type="text" value="" size="30" name="total"/>
 
</body>
</html>

¿Alguna idea?

Muchas gracias de antemano!

dggluz · #2 (**permalink**) 07/12/2009, 12:01

Neodani: el código de ahí está bastante claro: crea nodos y los agrega al formulario. Es fácil de modificar. Si no lo entiendes, creo que mejor que yo puede explicarlo este capítulo de este manual de javascript que encontré por la red. No puedo modificar el código por ti, sólo ayudarte, ya que el objetivo es que aprendas

. ¡Suerte!

PD: haz el intento tú; si no te sale, postea tu código y en eso sí te podré ayudar con más precisión.

PD2: ten en cuenta que si quieres procesar el formulario, para que PHP (hablo de PHP porque es el único lenguaje de servidor que manejo con soltura) pueda tomar el valor de todos los campos (por ejemplo, todos los campos precio), el nombre tiene que estar seguido de un par de corchetes ('precio[]') de modo que para PHP cada campo sea una nueva entrada a un array llamado $_REQUEST['nombre'] (o POST o GET, según tu método).

PD3: me quedé un poco mal ofreciendo tan poca ayuda. Para que no pierdas mucho tiempo, el código que está añadiendo campos es este:

Código javascript:

Ver original#
function addhostfield()
{
  var container = document.getElementById('defaulthostlist');
  // La creación de nodos es "en el aire", por eso se guardan en variables
  // los nodos recién se añadirán al DOM (a la página) cuando les hagamos un "append"
  // Crea el nodo 'div'
  var row = document.createElement('div');
  // Crea el nodo 'input'
  var input = document.createElement('input');
  // Crea el nodo 'a' (un link)
  var link = document.createElement('a');
 
  // Setea algunas propiedades del nodo input que creó:
  // setea el nombre
  input.name = '_default_host[]';
  // setea el tamaño
  input.size = '30';
  // Es raro que no haya seteado el "tipo" de input (debería ser "text"), yo lo haría así: input.type='text';
 
  // Ahora setea propiedades del nodo "a" que creó
  // setea adónde apunta
  link.href = '#';
  // setea la función onclick, según parece para que al cliquear en ese link, puedan removerse del DOM todos los nodos que está creando
  link.onclick = function() { removehostfield(this.parentNode); return false };
  // Como "class" es una palabra reservada en javascript, para acceder al atributo "class" de HTML, se usa la propiedad "className"
  link.className = 'removelink';
  // "innerHTML" significa "HTML interior", simplemente está seteando el "texto" del link
  link.innerHTML = 'remove';
 
  // Ahora "engancha los nodos"
  // Primero le agrega al nodo "div" que había creado el nodo "input" que también creó
  row.appendChild(input);
  // Hace lo mismo con el nodo link
  row.appendChild(link);
  // Ahora sí, se agrega el nodo "div" (que tiene al nodo link y al nodo input añadidos) a un nodo que ya estaba en el DOM, y por lo tanto, se agregan todos ellos al DOM
  container.appendChild(row);
}

Lo comenté para que quede más claro qué es lo que está haciendo paso a paso.

zerokilled · #3 (**permalink**) 07/12/2009, 15:54

tambien puedes intentar con cloneNode. con este puedes clonar un elemento con todos sus hijos y atributos de modo que no tienes que crear cada elemento. lo que yo suelo hacer es tener los elementos, al menos una sola vez, en el documento. luego busco ese elemento y lo clono. a partir de ahi sigo clonando la referencia y la agrego al documento. en tu caso, la seccion que quieres duplicar es esta (segun por el comentario)

Código:

<!-- Hacer lo mismo pero con 4 inputs en horizontal -->
<input type="text" value="" size="30" name="cantidad"/>
<input type="text" value="" size="30" name="descripcion"/>
<input type="text" value="" size="30" name="precio"/>
<input type="text" value="" size="30" name="total"/>

ahora bien, al menos necesitas que dichos elementos tenga un elemento padre, por ejemplo un P, para clonar todos sin mucho codigo.

neodani · #4 (**permalink**) 07/12/2009, 16:26

Cita:

Iniciado por dggluz

Neodani: el código de ahí está bastante claro: crea nodos y los agrega al formulario. Es fácil de modificar. Si no lo entiendes, creo que mejor que yo puede explicarlo este capítulo de este manual de javascript que encontré por la red. No puedo modificar el código por ti, sólo ayudarte, ya que el objetivo es que aprendas

. ¡Suerte!

PD: haz el intento tú; si no te sale, postea tu código y en eso sí te podré ayudar con más precisión.

PD2: ten en cuenta que si quieres procesar el formulario, para que PHP (hablo de PHP porque es el único lenguaje de servidor que manejo con soltura) pueda tomar el valor de todos los campos (por ejemplo, todos los campos precio), el nombre tiene que estar seguido de un par de corchetes ('precio[]') de modo que para PHP cada campo sea una nueva entrada a un array llamado $_REQUEST['nombre'] (o POST o GET, según tu método).

PD3: me quedé un poco mal ofreciendo tan poca ayuda. Para que no pierdas mucho tiempo, el código que está añadiendo campos es este:

Código javascript:

Ver original#
function addhostfield()
{
  var container = document.getElementById('defaulthostlist');
  // La creación de nodos es "en el aire", por eso se guardan en variables
  // los nodos recién se añadirán al DOM (a la página) cuando les hagamos un "append"
  // Crea el nodo 'div'
  var row = document.createElement('div');
  // Crea el nodo 'input'
  var input = document.createElement('input');
  // Crea el nodo 'a' (un link)
  var link = document.createElement('a');
 
  // Setea algunas propiedades del nodo input que creó:
  // setea el nombre
  input.name = '_default_host[]';
  // setea el tamaño
  input.size = '30';
  // Es raro que no haya seteado el "tipo" de input (debería ser "text"), yo lo haría así: input.type='text';
 
  // Ahora setea propiedades del nodo "a" que creó
  // setea adónde apunta
  link.href = '#';
  // setea la función onclick, según parece para que al cliquear en ese link, puedan removerse del DOM todos los nodos que está creando
  link.onclick = function() { removehostfield(this.parentNode); return false };
  // Como "class" es una palabra reservada en javascript, para acceder al atributo "class" de HTML, se usa la propiedad "className"
  link.className = 'removelink';
  // "innerHTML" significa "HTML interior", simplemente está seteando el "texto" del link
  link.innerHTML = 'remove';
 
  // Ahora "engancha los nodos"
  // Primero le agrega al nodo "div" que había creado el nodo "input" que también creó
  row.appendChild(input);
  // Hace lo mismo con el nodo link
  row.appendChild(link);
  // Ahora sí, se agrega el nodo "div" (que tiene al nodo link y al nodo input añadidos) a un nodo que ya estaba en el DOM, y por lo tanto, se agregan todos ellos al DOM
  container.appendChild(row);
}

Lo comenté para que quede más claro qué es lo que está haciendo paso a paso.

Muchas gracias a los dos por vuestros comentarios e interés :)

He intentado clonar el nodo (ya que a simple vista pensaba que era la más facil...) pero no se si lo estoy haciendo bien.

Por otro lado, si no utilizase la técnica de clonar, debería copiar de la linea 31 a la 45 (codigo de primer post) tantas veces como inputs quisiese?? me parece una barbaridad tantas lineas...

Añadí estas lineas para clonar el elemento, y me clona el elemento con sus inputs que ya tenía, por lo que va duplicándose cada vez más, cuando pulso el boton "add"

var fila = document.getElementById('fila');
cloneNode=fila.cloneNode(true);
fila.appendChild(cloneNode);

Y englobé en un div los 4 inputs
<div id="fila">
<input type="text" value="" size="5" name="cantidad"/>
<input type="text" value="" size="30" name="descripcion"/>
<input type="text" value="" size="5" name="precio"/>
<input type="text" value="" size="5" name="total"/>
<div>

zerokilled · #5 (**permalink**) 07/12/2009, 16:53

en el sentido tecnico esta bien. es decir, no genera error de ningun tipo. en el sentido logico quizas esta mal porque estas agregando la nueva clonacion dentro del elemento clonado, pero depende si es lo que querias lograr o no. es decir, te va quedando mas o menos la siguiente estructura. aparte que cada vez presionas el boton se van duplicando los que ya agregastes.

Código:

<div id="fila">
<input type="text" value="" size="5" name="cantidad"/>
<input type="text" value="" size="30" name="descripcion"/>
<input type="text" value="" size="5" name="precio"/>
<input type="text" value="" size="5" name="total"/>
<div id="fila">
<input type="text" value="" size="5" name="cantidad"/>
<input type="text" value="" size="30" name="descripcion"/>
<input type="text" value="" size="5" name="precio"/>
<input type="text" value="" size="5" name="total"/>
<div>
<div>

¿como lo hubiera hecho? pues quizas teniendo una estructura inicial como la siguiente,

Código:

<div id="contenedor"><p> <!-- fijate que ambos tags estan declarados en una misma linea sin separarse -->
<input type="text" value="" size="5" name="cantidad"/>
<input type="text" value="" size="30" name="descripcion"/>
<input type="text" value="" size="5" name="precio"/>
<input type="text" value="" size="5" name="total"/></p>
<div>
[Boton Add]

y el script,

Código:

var container = document.getElementById('contenedor');
container.appendChild(container.firstChild.cloneNode(true));

neodani · #6 (**permalink**) 08/12/2009, 05:56

He probado como decías ZeroKilled, pero tengo dos problemas.

1 - El botón add aparece 1 vez debajo de la primera caja de texto y luego al pulsar sobre él, aparecen las cajas de texto debajo del botón add y así sucesivamente. En el primer ej. aparecía tb solo una vez pero se iba poniendo al final de cada caja.

2 - No se como incluir el boton "remove" al final del ultimo input de cada linea, tal y como lo he puesto ahora aparece, pero no allí...

Estoy algo perdido...

Código html:

Ver original<html>
<head>
<title>Agregar y/o quitar cajas </title>
<style>
body, td, th, div, p {
color:#000000;
font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
font-size:small;
}
dd div {
margin-top:0.3em;
}
a.addlink {
background:transparent url(add.png) no-repeat scroll left top;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 20px;
text-decoration:none;
}
a.removelink {
background:transparent url(delete.png) no-repeat scroll 4px 0;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 24px;
text-decoration:none;
}
</style>
<script>
function addhostfield()
{
  /*var container = document.getElementById('defaulthostlist');
  var fila = document.getElementById('fila');
  var row = document.createElement('div');
  var input = document.createElement('input');
  var link = document.createElement('a');
  
  input.name = '_default_host[]';
  input.size = '30';
  link.href = '#';
  link.onclick = function() { removehostfield(this.parentNode); return false };
  link.className = 'removelink';
  link.innerHTML = 'remove';
  
  row.appendChild(input);
  row.appendChild(link);
  container.appendChild(row);*/
  
  var container = document.getElementById('contenedor');
  var link = document.createElement('a');
  link.href = '#';
  link.onclick = function() { removehostfield(this.parentNode); return false };
  link.className = 'removelink';
  link.innerHTML = 'remove';
  container.appendChild(link);
  
  container.appendChild(container.firstChild.cloneNode(true));
}
 
function removehostfield(row)
{
  var container = document.getElementById('contenedor');
  container.removeChild(row);
}
</script>
</head>
<body>
<div>Agregar cajas y/o quitar cajas</div><br/>
 
<div id="contenedor"><p> <!-- fijate que ambos tags estan declarados en una misma linea sin separarse -->
    <input type="text" value="" size="5" name="cantidad"/>
    <input type="text" value="" size="30" name="descripcion"/>
    <input type="text" value="" size="5" name="precio"/>
    <input type="text" value="" size="5" name="total"/>
    </p>
<div>
<div><a title="Add another field" class="addlink" href="javascript:addhostfield()">add</a></div>
</body>
</html>

Muchas gracias de antemano!

zerokilled · #7 (**permalink**) 08/12/2009, 09:46

te dejo un ejemplo que habia hecho para un amigo. no refleja exactamente tu caso pero tiene la misma base: agregar filas, y cada fila tiene un boton independiente para remover las filas. http://coffeescript.awardspace.com/price_unit/. si lo estudias estoy seguro que de ahi podras sacar ideas o soluciones a tu codigo.

neodani · #8 (**permalink**) 08/12/2009, 10:40

Cita:

Iniciado por zerokilled

te dejo un ejemplo que habia hecho para un amigo. no refleja exactamente tu caso pero tiene la misma base: agregar filas, y cada fila tiene un boton independiente para remover las filas. http://coffeescript.awardspace.com/price_unit/. si lo estudias estoy seguro que de ahi podras sacar ideas o soluciones a tu codigo.

Muchas gracias zerokilled, tiene muy buena pinta, voy a trastear :)

neodani · #9 (**permalink**) 08/12/2009, 11:18

Pensaba que solo haría falta este trozo de código

Código javascript:

Ver originalvar Handler = {
add: function(elem, event, handler, capture){
    try{
    elem.addEventListener(event, handler, capture);
    } catch(error){
    elem.attachEvent('on' + event, handler);
    }
},
 
remove: function(elem, event, handler, capture){
    try{
    elem.removeEventListener(event, handler, capture);
    } catch(error){
    elem.detachEvent('on' + event, handler);
    }
}
} // Handler;

Pero también hace falta todo el javascript price.js para conseguir el efecto, vaya si que es complicado....

Trasteando un poco he conseguido sacarlo sin utilizar tu código zerokilled. Mira que te parece.

¿Podrías simplificarlo??

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html> 
<head>
<title>Crear y remover inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body, td, th, div, p {
color:#000000;
font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
font-size:small;
}
input {
margin:0.3em;
}
a.removelink {
background:transparent url(delete.png) no-repeat scroll 4px 0;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 24px;
text-decoration:none;
}
a.addlink {
background:transparent url(add.png) no-repeat scroll left top;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 20px;
text-decoration:none;
cursor:pointer;
}
</style>
<script type="text/javascript">
<!--
num=0;
function crear(obj) {
  num++;
  fi = document.getElementById('productos'); 
  contenedor = document.createElement('div'); 
  contenedor.id = 'div'+num; 
  fi.appendChild(contenedor); 
 
  // primer input
  ele = document.createElement('input'); 
  ele.name = '_default_host[]';
  ele.className = 'cajatexto';
  ele.size = '5';
  contenedor.appendChild(ele); 
  
   // segundo input
  ele = document.createElement('input'); 
  ele.name = '_default_host[]';
  ele.className = 'cajatexto';
  ele.size = '30';
  contenedor.appendChild(ele); 
  
   // tercer input
  ele = document.createElement('input'); 
  ele.name = '_default_host[]';
  ele.className = 'cajatexto';
  ele.size = '5';
  contenedor.appendChild(ele); 
  
   // cuarto input
  ele = document.createElement('input'); 
  ele.name = '_default_host[]';
  ele.className = 'cajatexto';
  ele.size = '5';
  contenedor.appendChild(ele); 
  
  // boton eliminar
  ele = document.createElement('a'); 
  ele.href = '#';
  ele.name = 'div'+num;
  ele.onclick = function () {borrar(this.name)}
  ele.className = 'removelink';
  ele.innerHTML = 'Eliminar';
  contenedor.appendChild(ele);
}
function borrar(obj) {
  fi = document.getElementById('productos'); 
  fi.removeChild(document.getElementById(obj)); 
}
--> 
</script>
 
</head>
<body>
<form method="post" action="#">
<div id="productos"></div>
<div><a title="Add another field" class="addlink" onclick="crear(this)">Añadir</a></div>
</form> 
</body>
</html>

Salu2!

zerokilled · #10 (**permalink**) 08/12/2009, 11:46

por lo pronto, me parece que esta bastante bien. el codigo se parece un poco al que inicialmente tenias pero no esta mal. ¿simplificar el codigo? tendrias que usar cloneNode como en el ejemplo que te mostre en price_unit.

neodani · #11 (**permalink**) 08/12/2009, 15:23

Cita:

Iniciado por zerokilled

por lo pronto, me parece que esta bastante bien. el codigo se parece un poco al que inicialmente tenias pero no esta mal. ¿simplificar el codigo? tendrias que usar cloneNode como en el ejemplo que te mostre en price_unit.

Serías tan amable de hacerme el ejemplo de clonar en mi ejemplo anterior? Es que no consigo conseguir el mismo efecto. Este es lo más que he llegado clonando. Y si ejecutas el anterior y este veras que no se comportan igual.

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html> 
<head>
<title>Crear y remover inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body, td, th, div, p {
color:#000000;
font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
font-size:small;
}
input {
margin:0.3em;
}
a.removelink {
background:transparent url(delete.png) no-repeat scroll 4px 0;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 24px;
text-decoration:none;
}
a.addlink {
background:transparent url(add.png) no-repeat scroll left top;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 20px;
text-decoration:none;
cursor:pointer;
}
</style>
<script type="text/javascript">
<!--
num=0;
function crear(obj) {
  num++;
  fi = document.getElementById('productos'); 
  contenedor = document.createElement('div'); 
  contenedor.id = 'div'+num; 
  fi.appendChild(contenedor); 
 
  // boton eliminar
  ele = document.createElement('a'); 
  ele.href = '#';
  ele.name = 'div'+num;
  ele.onclick = function () {borrar(this.name)}
  ele.className = 'removelink';
  ele.innerHTML = 'Eliminar';
  contenedor.appendChild(ele);
  
  var container = document.getElementById('productos');
  container.appendChild(container.firstChild.cloneNode(true));
  
}
function borrar(obj) {
  fi = document.getElementById('productos'); 
  fi.removeChild(document.getElementById(obj)); 
}
 
 
--> 
</script>
 
</head>
<body>
<form method="post" action="#">
<div><a title="Añadir otra fila" class="addlink" onclick="crear(this)">Añadir</a></div>
<div id="productos"><p> 
<input type="text" value="" size="5" name="cantidad"/>
<input type="text" value="" size="30" name="descripcion"/>
<input type="text" value="" size="5" name="precio"/>
<input type="text" value="" size="5" name="total"/></p>
<div>
</form> 
</body>
</html>

Muchas gracias de antemano

zerokilled · #12 (**permalink**) 08/12/2009, 16:48

el elemento que usas para eliminar la fila tienes que agregarla al elemento clonado.

Código:

var clon = elemento.cloneNode(true);
clon.appendChild(elemento_borrar);

luego tienes que arreglar la funcion borrar para que elimie la fila, no el boton como tal.

neodani · #13 (**permalink**) 09/12/2009, 00:53

Cita:

Iniciado por zerokilled

el elemento que usas para eliminar la fila tienes que agregarla al elemento clonado.

Código:

var clon = elemento.cloneNode(true);
clon.appendChild(elemento_borrar);

luego tienes que arreglar la funcion borrar para que elimine la fila, no el boton como tal.

No lo consigo, misma situación aun cambiando las cosas...

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html> 
<head>
<title>Crear y remover inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body, td, th, div, p {
color:#000000;
font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
font-size:small;
}
input {
margin:0.3em;
}
a.removelink {
background:transparent url(delete.png) no-repeat scroll 4px 0;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 24px;
text-decoration:none;
}
a.addlink {
background:transparent url(add.png) no-repeat scroll left top;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 20px;
text-decoration:none;
cursor:pointer;
}
</style>
<script type="text/javascript">
<!--
num=0;
function crear(obj) {
  num++;
  fi = document.getElementById('productos'); 
  contenedor = document.createElement('div'); 
  contenedor.id = 'div'+num; 
  fi.appendChild(contenedor); 
 
  // boton eliminar
  ele = document.createElement('a'); 
  ele.href = '#';
  ele.name = 'div'+num;
  ele.onclick = function () {borrar(this.name)}
  ele.className = 'removelink';
  ele.innerHTML = 'Eliminar';
  fi.appendChild(ele);
  
  var container = document.getElementById('productos');
  container.appendChild(container.firstChild.cloneNode(true));
  
  var clon = elemento.cloneNode(true);
  clon.appendChild(ele);
}
function borrar(obj) {
  fi = document.getElementById('productos'); 
  fi.removeChild(document.parentNode); 
}
--> 
</script>
 
</head>
<body>
<form method="post" action="#">
<div><a title="Añadir otra fila" class="addlink" onclick="crear(this)">Añadir</a></div>
<div id="productos"><p> 
<input type="text" value="" size="5" name="cantidad"/>
<input type="text" value="" size="30" name="descripcion"/>
<input type="text" value="" size="5" name="precio"/>
<input type="text" value="" size="5" name="total"/></p>
<div>
</form> 
</body>
</html>

Muchas gracias de antemano!

zerokilled · #14 (**permalink**) 09/12/2009, 01:29

en rojo el codigo modificado. fijate lo que hace es simple: obtiene un clon de la fila, a ese clon le agrega el boton, y finalmente agrega el clon al elemento contenedor. en este caso asumo que lo agregarias al elemento contenedor porque de lo contrario no se que sentido tiene crear un DIV y agregarlo al DIV productos.

Código:

  ele.className = 'removelink';
  ele.innerHTML = 'Eliminar';
  
  var clone = fi.firstChild.cloneNode(true);
  clone.appendChild(ele);
  contenedor.appendChild(clone);

}

en todo caso, todavia tienes trabajo que hacer. ahora te toca ajustar la funcion de eliminar la fila.

neodani · #15 (**permalink**) 09/12/2009, 16:29

Cita:

Iniciado por zerokilled

en rojo el codigo modificado. fijate lo que hace es simple: obtiene un clon de la fila, a ese clon le agrega el boton, y finalmente agrega el clon al elemento contenedor. en este caso asumo que lo agregarias al elemento contenedor porque de lo contrario no se que sentido tiene crear un DIV y agregarlo al DIV productos.

Código:

  ele.className = 'removelink';
  ele.innerHTML = 'Eliminar';
  
  var clone = fi.firstChild.cloneNode(true);
  clone.appendChild(ele);
  contenedor.appendChild(clone);

}

en todo caso, todavia tienes trabajo que hacer. ahora te toca ajustar la funcion de eliminar la fila.

Tengo lo que me has dicho y he modificado el boton eliminar, ahora ya elimina correctamente. Pero salgo de una y caigo en otra.

¿Puede decirme porque sucede esto?

Nada más mostrar la página me aparece los 4 inputs y abajo el botón añadir (esto no está mal del todo, pero a diferencia del código del post (6 más abajo, donde consigo que funcione declarando cada input por separado)
Cuando pulso sobre Añadir, me los agrega debajo de este boton en lugar de arriba, por lo que queda raro raro, ademas la primera fila se queda sin botón "eliminar" :S:S:S

Si puedes ejecutar el código veras las paranoias que le dan...

Código javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html> 
<head>
<title>Crear input file - http://www.telefonica.net/web2/blas-mar/crear.html</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body, td, th, div, p {
color:#000000;
font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
font-size:small;
}
input {
margin:0.3em;
}
a.removelink {
background:transparent url(delete.png) no-repeat scroll 4px 0;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 24px;
text-decoration:none;
}
a.addlink {
background:transparent url(add.png) no-repeat scroll left top;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 20px;
text-decoration:none;
cursor:pointer;
}
</style>
<script type="text/javascript">
<!--
num=0;
function crear(obj) {
  num++;
  fi = document.getElementById('productos'); 
  contenedor = document.createElement('div'); 
  contenedor.id = 'div'+num; 
  fi.appendChild(contenedor); 
 
  // boton eliminar
  ele = document.createElement('a'); 
  ele.href = '#';
  ele.name = 'div'+num;
  ele.onclick = function () {borrar(this.name)}
  ele.className = 'removelink';
  ele.innerHTML = 'Eliminar';
  
  var clone = fi.firstChild.cloneNode(true);
  clone.appendChild(ele);
  contenedor.appendChild(clone);
}
function borrar(obj) {
  fi = document.getElementById('productos'); 
  fi.removeChild(document.getElementById(obj));
}
--> 
</script>
 
</head>
<body>
<form method="post" action="#">
<div id="productos"><p> 
<input type="text" value="" size="5" name="cantidad"/>
<input type="text" value="" size="30" name="descripcion"/>
<input type="text" value="" size="5" name="precio"/>
<input type="text" value="" size="5" name="total"/>
</p>
<a title="Añadir otra fila" class="addlink" onclick="crear(this)">Añadir</a></div>
<div>
<div>
</form> 
</body>
</html>

Muchas gracias de antemano!

zerokilled · #16 (**permalink**) 09/12/2009, 16:57

ubica el boton de añadir fuera del DIV. es decir, justo despues del DIV que contiene las filas.

neodani · #17 (**permalink**) 10/12/2009, 00:49

Cita:

Iniciado por zerokilled

ubica el boton de añadir fuera del DIV. es decir, justo despues del DIV que contiene las filas.

Te refereias así? se comporta igual, el botón Añadir se queda arriba

Código html:

Ver original<form method="post" action="#">
<div id="productos"><p> 
<input type="text" value="" size="5" name="cantidad"/>
<input type="text" value="" size="30" name="descripcion"/>
<input type="text" value="" size="5" name="precio"/>
<input type="text" value="" size="5" name="total"/>
</p><div>
<div><a title="Añadir otra fila" class="addlink" onclick="crear(this)">Añadir</a></div>
</form>

Muchas gracias de antemano!

zerokilled · #18 (**permalink**) 10/12/2009, 01:16

asi es como yo lo intente,

Código:

<form method="post" action="#">
<div id="productos"><p> 
<input type="text" value="" size="5" name="cantidad"/>
<input type="text" value="" size="30" name="descripcion"/>
<input type="text" value="" size="5" name="precio"/>
<input type="text" value="" size="5" name="total"/>
</p>
</div>
<a title="Añadir otra fila" class="addlink" onclick="crear(this)">Añadir</a>
</form>

por cierto, me olvide mencionarte que la primera fila se queda sin boton eliminar porque simplemente no aparece en el codigo html. se lo tienes que agregar, pero si lo haces las nuevas filas terminarian con dos botones de eliminar. primero porque en la fila clonada ya existe el boton y segundo porque en la funcion para agregar nuevas filas le estas creando un boton.

neodani · #19 (**permalink**) 10/12/2009, 17:06

Cita:

Iniciado por zerokilled

asi es como yo lo intente,

Código:

<form method="post" action="#">
<div id="productos"><p> 
<input type="text" value="" size="5" name="cantidad"/>
<input type="text" value="" size="30" name="descripcion"/>
<input type="text" value="" size="5" name="precio"/>
<input type="text" value="" size="5" name="total"/>
</p>
</div>
<a title="Añadir otra fila" class="addlink" onclick="crear(this)">Añadir</a>
</form>

por cierto, me olvide mencionarte que la primera fila se queda sin boton eliminar porque simplemente no aparece en el codigo html. se lo tienes que agregar, pero si lo haces las nuevas filas terminarian con dos botones de eliminar. primero porque en la fila clonada ya existe el boton y segundo porque en la funcion para agregar nuevas filas le estas creando un boton.

Diossssssssss menudo quebradero de cabeza!!!! este tema me supera, utilizaré la forma larga pero efectiva. Ya que no consigo con tu técnica de clonar zerokilled que funcione igual que aquí.

Código javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html> 
<head>
<title>Crear y remover inputs</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
body, td, th, div, p {
color:#000000;
font-family:"Lucida Grande",Verdana,Arial,Helvetica,sans-serif;
font-size:small;
}
input {
margin:0.3em;
}
a.removelink {
background:transparent url(delete.png) no-repeat scroll 4px 0;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 24px;
text-decoration:none;
}
a.addlink {
background:transparent url(add.png) no-repeat scroll left top;
color:#999999;
font-size:0.9em;
padding:1px 0 1px 20px;
text-decoration:none;
cursor:pointer;
}
</style>
<script type="text/javascript">
<!--
num=0;
function crear(obj) {
  num++;
  fi = document.getElementById('productos'); 
  contenedor = document.createElement('div'); 
  contenedor.id = 'div'+num; 
  fi.appendChild(contenedor); 
 
  // primer input
  ele = document.createElement('input'); 
  ele.name = '_default_host[]';
  ele.className = 'cajatexto';
  ele.size = '5';
  contenedor.appendChild(ele); 
  
   // segundo input
  ele = document.createElement('input'); 
  ele.name = '_default_host[]';
  ele.className = 'cajatexto';
  ele.size = '30';
  contenedor.appendChild(ele); 
  
   // tercer input
  ele = document.createElement('input'); 
  ele.name = '_default_host[]';
  ele.className = 'cajatexto';
  ele.size = '5';
  contenedor.appendChild(ele); 
  
   // cuarto input
  ele = document.createElement('input'); 
  ele.name = '_default_host[]';
  ele.className = 'cajatexto';
  ele.size = '5';
  contenedor.appendChild(ele); 
  
  // boton eliminar
  ele = document.createElement('a'); 
  ele.href = '#';
  ele.name = 'div'+num;
  ele.onclick = function () {borrar(this.name)}
  ele.className = 'removelink';
  ele.innerHTML = 'Eliminar';
  contenedor.appendChild(ele);
}
function borrar(obj) {
  fi = document.getElementById('productos'); 
  fi.removeChild(document.getElementById(obj)); 
}
--> 
</script>
 
</head>
<body>
<form method="post" action="#">
<div id="productos"></div>
<div><a title="Add another field" class="addlink" onclick="crear(this)">Añadir</a></div>
</form> 
</body>
</html>

Gracias de antemano!

zerokilled · #20 (**permalink**) 10/12/2009, 17:53

lo mismo que tienes pero con cloneNode. de nuevo, la ventaja es evitarse tener que crear los elementos uno a uno, y por ende, simplificacion de codigo.

Código:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>
<script type='text/javascript'>
self.onload = function(){
var product = document.getElementById("productos");
clone = product.firstChild.cloneNode(true);
// si no deseas eliminar la primera fila cuando cargue el documento,
// comenta o elimina la siguiente linea;
product.removeChild(product.firstChild);
}

function crear(){
document.getElementById("productos").appendChild(clone.cloneNode(true));
}

function borrar(elem){
var parent = elem.parentNode;
parent.parentNode.removeChild(parent);
}

</script>
<style type='text/css'>
span{
cursor:pointer;
}
</style>
</head>

<body><form>
<div id="productos"><p>
<input type="text" size="5" name="_default_host[]" />
<input type="text" size="30" name="_default_host[]" />
<input type="text" size="5" name="_default_host[]" />
<input type="text" size="5" name="_default_host[]" />
<span onclick="borrar(this)">Eliminar</span></p>
</div>
</form>
<span title="Añadir otra fila" class="addlink" onclick="crear()">Añadir</span>
</body></html>

neodani · #21 (**permalink**) 11/12/2009, 00:52

Cita:

Iniciado por zerokilled

lo mismo que tienes pero con cloneNode. de nuevo, la ventaja es evitarse tener que crear los elementos uno a uno, y por ende, simplificacion de codigo.

Código:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>
<script type='text/javascript'>
self.onload = function(){
var product = document.getElementById("productos");
clone = product.firstChild.cloneNode(true);
// si no deseas eliminar la primera fila cuando cargue el documento,
// comenta o elimina la siguiente linea;
product.removeChild(product.firstChild);
}

function crear(){
document.getElementById("productos").appendChild(clone.cloneNode(true));
}

function borrar(elem){
var parent = elem.parentNode;
parent.parentNode.removeChild(parent);
}

</script>
<style type='text/css'>
span{
cursor:pointer;
}
</style>
</head>

<body><form>
<div id="productos"><p>
<input type="text" size="5" name="_default_host[]" />
<input type="text" size="30" name="_default_host[]" />
<input type="text" size="5" name="_default_host[]" />
<input type="text" size="5" name="_default_host[]" />
<span onclick="borrar(this)">Eliminar</span></p>
</div>
</form>
<span title="Añadir otra fila" class="addlink" onclick="crear()">Añadir</span>
</body></html>

Mil gracias zerokilled

morfeom · #22 (**permalink**) 11/12/2009, 15:28

me podrian prestar el codigo para guiarme el
<script type='text/javascript' src='module/handler.js'></script>
<script type='text/javascript' src='module/price.js'></script>
tengo todo pero lo que necesito es referenciar cada input por aparte para hacer operaciones

zerokilled · #23 (**permalink**) 11/12/2009, 15:46

si no te explicas correctamente, nadie te puede ayudar. notese la siguiente linea en price.js, dicha linea es la que toma las referencias de los campos por fila.

Código:

var inputs = elem.parentNode.getElementsByTagName('input');

para referenciar cada una aparte, y por filas, tienes que indicar el indice segun la cantidad de campos. por ejemplo,

Código:

inputs[0] // primer campo;
inputs[1] // segundo campo;
inputs[2] // tercer campo;
// etc...

eso es lo basico, quizas necesites algo mas especifico pero tienes que explicarte. y sobre todo, si tienes algun codigo muestralo, asi el lector puede tener una idea mas clara. por ultimo, si tu tema no esta relacionado con este tema, deberias abrir un tema aparte y hacer referencia a este ubicando la URL en tu mensaje.

morfeom · #24 (**permalink**) 11/12/2009, 19:33

gracias por la pronta respuesta lo que necesito es por ejemplo que si escribo el codigo salga la descripcion ej:
document.getElementById(obj).value="descripcion" lo que me podrias ayudar es el (obj) como lo obtengo para hacer document.getElementById(obj).value="descripcion".

tambien cant=document.getElementById(obj).value
precio=document.getElementById(obj).value asi obtengo la cantidad y el precio pero si los elementos son diferentes, como los clone no se que id adquieren o como los referencio para manipularlos...

en el ejmplo que usted sita esta la respuesta pero necesito leer el codigo para entender un poco los scripts de estas referencias.. gracias de ante mano...
<script type='text/javascript' src='module/handler.js'></script>
<script type='text/javascript' src='module/price.js'></script>

zerokilled · #25 (**permalink**) 11/12/2009, 21:11

honestamente no se por donde empezar contigo. se me esta quebrando la cabeza pensando que me tengo que volver a repetir bien extensamente detalles que he ido explicando en el transcurso que he estado en este foro. quizas lo tenga que hacer segun vaya descubriendo detalles acerca de ti.

en el ejemplo de price unit se utiliza getElementsByTagName el cual devuelve una coleccion de elementos y de ahi hago las referencia a los campos. en este caso no utiliza ID para los campos, de eso debes haberte fijado si miras el codigo fuente. por tanto, intentar hacerlo por getElementById simplemente no funcionara. no porque sea imposible realizarlo, sino porque el codigo carece de ese detalle.

Código:

<li><input type='text' class='desc' /> <input type='text' class='price' /> <input type='text'class='percentage' /> <input type='text' class='sell' readonly='readonly' /> <button type='button' value='remove'>Remove</button></li>

en el codigo, fijate que cada vez que aparece inputs va seguido de corchetes con un numero. cada una de esas ocurrencias son las referencia a los inputs de una fila en particular.

Código:

var inputs = elem.parentNode.getElementsByTagName('input');
var price = Number(inputs[1].value);
var sell = price / 100 * Number(inputs[2].value) + price;
if(!isNaN(sell))inputs[3].value = '$ ' + sell.toLocaleString();

¿como obtengo una fila en particular para obtener referencia de los campos?
en la aplicacion no le di importancia a ese detalle porque lo importante de ella es computar todos los datos disponibles segun la cantidad de fila. para ello sucede algo similar con los campos. con la funcion getElementsByTagName obtengo todas las filas disponibles.

Código:

var lists = document.getElementsByTagName('li');

lo pude haber hecho asignando un ID a cada fila y luego con la funcion getElementById obtener la referencia, pero al final hacerlo de esta forma requiere emular lo mismo que hace getElementsByTagName, en el sentido de tener un bucle para poder hacer referencia a cada fila. evitando esto me ahorro codigo y tiempo de analizacion.

en resumen, lo importante es que por ID no puedes obtener los campos porque simplemente los campos no tienen ID. al no tener ID, cuando se clonan tampoco tienen ID.

morfeom · #26 (**permalink**) 12/12/2009, 08:52

gracias ZeroKilled por sus respuestas... para que me conoscas soy Ing de Sistemas me dedico a desarrollar software para una empresa y me gusta hacer los desarrollos como me los imagino por esto me gusta adquirir informacion... ya cambiando de tema
en (price unit) esta lo que quiero hacer pero no se como ver el codigo fuente de los dos script que estan referenciados con javascript... gracias...
pero lo que me estas colaborando me ha servido de mucha ayuda gracias.....espero tener buena relacion con el foro gracias....

neodani · #27 (**permalink**) 12/12/2009, 09:49

Cita:

Iniciado por morfeom

en (price unit) esta lo que quiero hacer pero no se como ver el codigo fuente de los dos script que estan referenciados con javascript... gracias...

Te referías a que no sabías ver estos códigos??

http://coffeescript.awardspace.com/p...odule/price.js
http://coffeescript.awardspace.com/p...ule/handler.js

Salu2!

morfeom · #28 (**permalink**) 13/12/2009, 10:04

Gracias Neodani y Zerokilled veo que les gusta compartir informacion y son creativos cuenten con migo que en lo que les pueda colaborar ...gracias.. tienen algun proyecto o algo en lo que esten interactuando ...

morfeom · #29 (**permalink**) 08/02/2010, 13:38

HOLA si alguien me puede ayudar con lo siguiente: necesito en my pagina php poder con un clik tomar una foto con la cama web y poder guardarla.. no se si sepueda con php pero lo que si se es que con un applet de Java si alguien tiene una idea espero su colaboracion...