Automatizar el envío de datos a un formulario con Jquery

Mientras trabajaba con Jquery para adaptar mis antiguos formularios para que trabajen con Ajax encontré un problema, resulta que al enviar datos mediante Ajax y Jquery a una página dinámica, estos sólo se pueden mandar a través de una cadena preparada, veamos un ejemplo

$.ajax({
        type: "POST",
        url: "alta.php",
        data: "nombre=Jose&id=15",
        success: function(html){
             $.("#destino").html(html)
        }
});

He puesto en mayúsculas la línea en la que se mandan los parámetros. No he trabajado mucho con estas tecnologías pero por más que he buscado no he sido capaz de encontrar otra solución para mandar los parámetros.

El problema, es que la validación de los datos tiendo a hacerla en el destino y no en el formulario origen, por lo que siempre me he limitado a enviar lo que fuera y ya vería después como gestionarlo, pero claro, Ajax y Jquery son más de la opinión de “te lo valido en el momento” por lo que suelen tratar los datos en la misma función que los enviará y por eso pueden crear la cadena.

Para mí es un incordio y tendría que modificar muchos formularios por lo que no estoy dispuesto, como solución, he utilizado DOM para generar automáticamente esa cadena para cualquier formulario.

var objs = document.getElementsByTagName("INPUT");

var str ="";
var j=0;
for (var i=0; i<objs.length; i++) {
   if(j!=0) str+="&";
   if(objs[i].value != ""){
      str += objs[i].name + "=" + objs[i].value;
      j++;
   }
}

Básicamente lo que hago es recoger todos los input del documento (si hubiera más, habría que filtrarlos por el formulario correcto o mediante el id, pero ya no sería muy genérico..) y generar la cadena para mandar.

Al final, tendríamos en str la cadena de datos a enviar por lo que la función ajax quedaría

$.ajax({
        type: "POST",
        url: "alta.php",
        data: str,
        success: function(html){
             $.("#destino").html(html)
        }
});

Artículos relacionados



Comentarios en Automatizar el envío de datos a un formulario con Jquery

Hay 6 Comentarios en el artículo Automatizar el envío de datos a un formulario con Jquery, ¿a qué esperas para dar tu opinión?


  1. StepheX dice:

    Puedes usar esto
    data: { operacion: 4, pagina: pagina},

    Es la forma correcta.
    P.V->

  2. Richard dice:

    Emilio, para obtener todos los valores que hay en los distintos campos de un formulario (imput’s, select’s, textarea’s) no necesitas de tanto codigo… Solo usa la funcion/metodo serialize(), ejm:

    var frmImportA = $(’#frmImportA’);
    var vars = frmImportA.serialize();

    Donde “#frmImportA” es el ID del formulario y “vars” es la variable que contiene la cadena “&a=1&b=2&c=etc…”.

    var vars = $(’#frmImportA’).serialize();
    $.ajax({
    type: “POST”,
    url: “./importar.php”,
    data: vars,
    success: function(resp){
    ….

    ¿Mas facil?, imposible :D

    A ver si agregas a la lista:
    http://www.tuescuchas.com << Música en Linea

    Saludos!

Deja un comentario