Ver Mensaje Individual
  #2 (permalink)  
Antiguo 07/12/2009, 12:01
Avatar de dggluz
dggluz
 
Fecha de Ingreso: abril-2009
Ubicación: Buenos Aires, Argentina
Mensajes: 525
Antigüedad: 15 años
Puntos: 50
Respuesta: Crear y remover inputs

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
  1. #
  2. function addhostfield()
  3. {
  4.   var container = document.getElementById('defaulthostlist');
  5.   // La creación de nodos es "en el aire", por eso se guardan en variables
  6.   // los nodos recién se añadirán al DOM (a la página) cuando les hagamos un "append"
  7.   // Crea el nodo 'div'
  8.   var row = document.createElement('div');
  9.   // Crea el nodo 'input'
  10.   var input = document.createElement('input');
  11.   // Crea el nodo 'a' (un link)
  12.   var link = document.createElement('a');
  13.  
  14.   // Setea algunas propiedades del nodo input que creó:
  15.   // setea el nombre
  16.   input.name = '_default_host[]';
  17.   // setea el tamaño
  18.   input.size = '30';
  19.   // Es raro que no haya seteado el "tipo" de input (debería ser "text"), yo lo haría así: input.type='text';
  20.  
  21.   // Ahora setea propiedades del nodo "a" que creó
  22.   // setea adónde apunta
  23.   link.href = '#';
  24.   // 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
  25.   link.onclick = function() { removehostfield(this.parentNode); return false };
  26.   // Como "class" es una palabra reservada en javascript, para acceder al atributo "class" de HTML, se usa la propiedad "className"
  27.   link.className = 'removelink';
  28.   // "innerHTML" significa "HTML interior", simplemente está seteando el "texto" del link
  29.   link.innerHTML = 'remove';
  30.  
  31.   // Ahora "engancha los nodos"
  32.   // Primero le agrega al nodo "div" que había creado el nodo "input" que también creó
  33.   row.appendChild(input);
  34.   // Hace lo mismo con el nodo link
  35.   row.appendChild(link);
  36.   // 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
  37.   container.appendChild(row);
  38. }
Lo comenté para que quede más claro qué es lo que está haciendo paso a paso.

Última edición por dggluz; 07/12/2009 a las 12:24