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>