lunes, 22 de diciembre de 2008

Crear campos de formulario con javascript

Hace un tiempo necesité formularios cuya cantidad de campos era variable. La musa dictó la siguiente función:

function nuevoCampoForm(type,name,id,value,size){
if(type=='textarea'){
size==undefined?53:size;
var campoForm=document.createElement("textarea");
var texto=document.createTextNode(value);
colum=(size-(size%10));
filas=size%10;
campoForm.setAttribute("cols",colum);
campoForm.setAttribute("rows",filas);
campoForm.appendChild(texto);
}else{
var campoForm=document.createElement("input");
campoForm.setAttribute("value",value);
if(type=='text'){
size==undefined?32:size;
campoForm.setAttribute("type","text");
campoForm.setAttribute("size",size);
}else{
campoForm.setAttribute("type","hidden");
}
}
campoForm.setAttribute("name",name);
campoForm.setAttribute("id",id);
return campoForm;
}


La función recibe 5 parámetros: type que indica el tipo de campo, los valores posibles son text, textarea y hidden; name, id, value que corresponden al atributo HTML respectivo del mismo nombre; por último size que corresponde al tamaño y que tilizaremos en los campos de tipo input text y textarea.

Si el campo que queremos crear es de tipo textarea el atributo size indicará, por medio del módulo 10, los atributos rows y cols. El valor por defecto es 53, con ello obtenemos un textarea de rows 3 y cols 50. El parámetro value lo encapsularemos dentro de una variable que encierra el metodo createTextNode(). Esta variable la insertaremos como valor del textarea con el método appendChild().

Si no es textarea el campo a crear, la función evaluará si es un campo input de tipo text o hidden. Si es del tipo text tomará size y lo establecerá como el atributo HTML del mismo nombre, si no está definido el valor por defecto será de 32. Si es hidden sólo considera name, id y value.

Luego de todas las funciones retornará un campo de formulario correspondiente a las parametros indicados. Esta función la podemos manipular con otra encargada de la generación de campos y la inserción dentrol del cuerpo o form de un documento.

Aquí pueden ver un ejemplo por cada tipo.

13 comentarios:

  1. Anónimo11:28 p.m.

    genial man gracias puede serme muy util despues

    ResponderEliminar
  2. Leandro9:28 p.m.

    es muy bueno, justo lo que estaba buscando, me salvaste la vida creo, jaja saludos!

    ResponderEliminar
  3. Anónimo3:07 p.m.

    Muchas gracias por las funciones. Quisiera saber si sabes la forma en la cual mandar los valores de ese 'n' numero de campos creados, por ejemplo con POST para ser insertados en una BD.Gracias :D

    ResponderEliminar
  4. Te podría ayudar más si me dices con qué lenguaje procesas los datos enviados. :)

    ResponderEliminar
  5. Gracias Jorge, justo lo que buscaba. Me pregunto si podria meterse en una celda de esta manera, para que crezca la tabla hacia abajo no hacia la derecha

    ResponderEliminar
  6. Si quieres que el campo input se meta dentro de una celda de una tabla, y que esta a su vez crezca "hacia abajo", lo que corresponde hacer es crear una tr y una td con document.createElement. Luego insertar la tr dentro del tbody de la tabla y la td dentro de la tr. Esto lo haces con el método objetoPadre.appendChild(objetoHijo).

    Una cosa: recuerda que las tablas no son para hacer formularios, los elementos para construir formularios son form, fieldset, legend, label, input y select. Esto los puedes maquetar con CSS como "si fueran tablas" ;).

    ResponderEliminar
  7. Gracias Jorge, el formulario lo creo antes porque tambien contiene campos estaticos, esto es solo para meterlo en una celda mas de la tabla que hay dentro del formulario

    ResponderEliminar
  8. Anónimo2:58 p.m.

    ... y si quisiera eliminarlos?

    He utilizado esto para crear campos desde un select, de manera que según la opción me crea más o menos campos, el problema es que necesitaría resetearlos, es decir, si yo cojo la opción 2 pues me crea 2 campos y si cojo las tres me suma 5. Yo quiero que me cree tres.

    Es decir que no me vaya duplicando como es el caso ahora.

    Gracias.

    ResponderEliminar
  9. Miguel4:10 p.m.

    hola jorge y gracias por tus notas.
    He probado tu pagina de ejemplo en mi servidor local de apache y funciona perfectamente, pero cuando lo implemento en mi sitio web (modulares) no funciona.
    Mis paginas web (al ser modulares) trabajan con varios includes que llaman a distintos ficheros .php. ¿Puede ser por esto por lo que no funciona?

    ResponderEliminar
  10. Miguel:

    Es difícil saber con precisión la causa de tu problema sin poder ver el código.

    Verifica que la función sea accesible desde donde la llamas. Utiliza Firebug para depurar y buscar errores.

    Anónimo:

    Para tu caso lo que debes hacer es eliminar los campos con el método removeChild() (https://developer.mozilla.org/en/DOM/Node.removeChild)

    ResponderEliminar
  11. Miguel8:25 p.m.

    Gracias Jorge por responder...
    Decidí utilizar el método replaceChild ya que utilizo dos celdas de una tabla con sus id en los cuales creo una estructura de tablas al iniciar la recarga de la pagina y después lo único que hago es reemplazar su contenido con el método replaceChild.
    Como verás, no estoy muy ducho en javascript, y estoy intentando hacer un grid con los datos de una tabla de mysql con scroll's horizontal y vertical. El lío que me estoy haciendo pasando datos de php a javascript y viceversa... YA TE CONTARÉ, muy pronto, en otro post el problema con el que estoy luchando ahora..
    Un saludo y nuevamente, gracias.

    ResponderEliminar
  12. Miguel8:41 p.m.

    Hola Jorge.
    Como te comenté en el anterior post, estoy con una cosa y mientras lo consigo o no, te lo voy a exponer.

    OBJETIVOS
    1. Con PHP realizo una consulta a una tabla (8 campos y 8 registros).
    2. Guardo el resultado en un array desde un bucle for de php y a su vez, quiero guardar el resultado en un array de javascript (si esto último funciona, el array de php me sobraría, pero de momento lo dejo ahí).
    3. He creado cuatro botones que se encargaran del manejo del grid (izquierda, derecha, arriba y abajo).

    SOLUCIONES
    La estructura física (diseño) de los botones izquierda y derecha la he solucionado con replaceChild (pero sin datos del array de javascript, claro, sólo diseño).

    PROBLEMAS (de momento)
    ¿cómo puedo almacenar en un array de javascript los datos de la tabla de mysql para que cuando pulse los botones del scroll localice los datos del array y los muestre en el grid?

    OBSERVACIONES
    Llevo bastante tiempo mirando web para solucionarlos y he probado de todo, aunque sin resultados...


    Nuevamente gracias

    ResponderEliminar
  13. Miguel:

    Primera cosa: javascript es un lenguaje de programación que se ejecuta en el navegador del usuario, en cambio, php se ejecuta en el servidor y los resultados de esta ejecución se ven en el navegador.

    El camino correcto para transformar una estructura de datos obtenida desde MySQL (y la BD que sea) por medio de php y que sea manejable por javascript es parseando los datos a XML y luego con xpath o métodos del DOM navegar su contenido. La otra opción y que es la que más me gusta es transformando un array PHP a una cadena JSON.

    ResponderEliminar