Recorrer todos los objetos de un formulario con JQuery

Hasta el momento, todo lo que he trabajado con JQuery son ventajas y esta, es otra de esas facilidades que ofrece. Vamos a recorrer todos los objetos de un formulario y vamos a añadirle algunas opciones más como validadores y demás.

jquery
Código de ejemplo en JQuery

Todo esto viene por que estamos trabajando en un editor «editable» en JQuery, es decir un CMS que se adapte a nuestras necesidades, creando un formulario con el número y tipo de objetos para crear al vuelo y que luego puedan ser interpretados para generar en muy poco tiempo el CMS ajustado. No voy a entrar a explicar más en profundidad ya que el artículo va sobre otro tema, pero si tenéis interés podéis preguntar por Dk Web v2 😉

Volviendo al «tejemaneje» de cómo recorrer los objetos de un formulario, os pego el código de ejemplo como siempre y luego paso a comentarlo:

$(form).find(‘:input’).each(function() { //esta es la función que hace que recorrar todos los «form» que haya en nuestro documento

this.id = this.name; //el nombre del objeto lo asigno al id (esto es así por como genero el formulario pero se podría omitir)

switch (this.name.substr(0, this.name.indexOf(‘_’)))
{
case «imagen»:
$(this).after(‘<input type=»button» name=»Submit» value=»+» onclick=»VentanaPopup(\’./filemanager/index.php?campo=’+this.name+’\’)» />’);
break;
}

});

Como veréis es bastante sencillo, simplemente utilizo la función o método each para recorrer todo el «array» de objetos de la etiqueta <form>. El resto que he dejado es simplemente para que veáis como ejemplo lo que se puede llegar a hacer. En mi caso, pregunto si el tipo de objeto que he nombrado con anterioridad imagen_ para añadir en este caso un botón que llamará a una ventana emergente con la que gestionar las imágenes. Este botón se añade con la función after que hablamos en otro artículo. De igual manera, se podrán crear los eventos para validar el tipo de campo, cambiar de colores, etc… Yo os dejo la herramienta y la idea, vosotros la utilizáis como queráis.

Como comentaba, al crear un editor «al vuelo», los objetos los nombro con «imagen_» o «texto_» o «email_» etc, para luego ir dándole propiedades a estos objetos. Fácil y sencillo.

Si tenéis cualquier duda podéis comentarla 😉

Carlos Dk

Apasionado por la enseñanza y el SEO

2 comentarios en “Recorrer todos los objetos de un formulario con JQuery

  • el 8 febrero, 2017 a las 6:15 pm
    Permalink

    Es relativo q la funcion recorre todos los c@mpos a traves del selector .»input» y q pasa si hay textareas o buttons en el form?

    Respuesta
    • el 9 febrero, 2017 a las 12:13 am
      Permalink

      En el ejemplo no los recorrería, pero con cambiar el selector, ya podrías recorrerlos. Con la omisión del find, vas a recoger todos y cada uno de los objetos.

      Algo parecido a esto:
      $(form).each()(function() {
      console.log($(this).html());
      });

      Recorrería todo el objeto form y mostraría los nodos que están contenidos en la etiqueta.

      Respuesta

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.