jump to navigation

Formularios con campos variables April 14, 2007

Posted by Bosco in : amigoinvisible, programación , trackback

Ufff, este post es sobre DHTML. La verdad casi me da vergüenza hablar sobre esta tecnología, que tendrá 10 años por lo menos, pero es que nunca he dedicado ningún esfuerzo en el lado cliente, muy poco de javascript y nada de DHTML, y claro, para el proyecto de la web del amigo invisible lo necesitaba, así que he seguido unas directrices de mi amigo Santi y he logrado resolver el problema. Ahí van las instrucciones, paso a paso:

  1. El formulario que quiero hacer dinámico tiene una tabla, y en cada fila de la tabla tiene un hidden con el id, un textbox para el nombre, otro para el email, y un tercero para las exclusiones
  2. No sé cuantas filas necesitaré en esta table, así que incialmente pongo 3 vacías, y añado un botón (link) para que el usuario pueda añadir todas las que necesite (ahí entra el DHTML!!!)
  3. Dicho link lo meto en un tr, y el link hace una llamada a un método js “addAmigo()”:
  4. El js que uso es el siguiente:

    var ind = 3;

    function addAmigo()
    {
    // Incrementamos el valor de la variable
    ind++;

    // Clonar y guardar el link de creación (<tr> con id ‘newAmigoButton’):
    var oldLink = document.getElementById(”newAmigoButton”);
    var newLink = oldLink.cloneNode(true);

    // Eliminar el link de creación viejo:
    var lista = document.getElementById(”listaAmigos”);
    for (i=0; i<lista.childNodes.length; i++){
    if (lista.childNodes[i].nodeName == “TBODY”) {
    lista = lista.childNodes[i];
    break;
    }
    }
    lista.removeChild(oldLink);

    // Crear el nuevo amigo:
    var tr = document.createElement(”tr”);
    tr.setAttribute(”id”,”am_”+ind);

    var tdid = document.createElement(”td”);
    tdid.innerHTML = “<input type=’hidden’ name=’id’ value=’”+ind+”‘/>”+ind;

    var tdname = document.createElement(”td”);
    tdname.innerHTML = “<input type=’text’ name=’name’/>”;

    var tdemail = document.createElement(”td”);
    tdemail.innerHTML = “<input type=’text’ name=’email’/>”;

    var tdex = document.createElement(”td”);
    tdex.innerHTML = “<input type=’text’ name=’exclude’ size=’2′ maxlength=’2′/>”;

    tr.appendChild(tdid);
    tr.appendChild(tdname);
    tr.appendChild(tdemail);
    tr.appendChild(tdex);

    // Añadirlo a la tabla
    lista.appendChild(tr);
    lista.appendChild(newLink);
    }

  5. Es decir, tengo la variable ind que guarda el índice del número de fila. Lo incremento cada vez que hago una llamada (una fila nueva)
  6. Creo una copia del tr que contiene el link al js
  7. Elimino el link al js de la tabla de amigos. Guardo esta tabla de amigos en la variable lista, que luego usaré para añadir nuevos elementos
  8. Creo una nueva línea. Para ello creo objetos en el DOM de js. Creo un tr, y un td por cada columna. Dentro de cada td puedo añadir el html que me interese (los inputs por ejemplo)
  9. Contruyo el tr, haciendo appends de los tds
  10. Pego el nuevo tr a la lista de amigos, y además anado la copia que había hecho inicialmente del link al js

Pues eso, no se si queda muy claro, pero es muy fácil. Posiblemente haya sido el último en aprender esta técnica, sin embargo no he encontrado muchos tutoriales en internet sobre como hacerlo, así que quede este testimonio para la posterioridad, y si alguien tiene alguna duda no tiene más que preguntar

Comments»

1. emilton - 29 January, 2010

no lo he podido lograr hacer funcionar me ayudas? podrias colocar un codigo completo de ejemplo