Dos Formulario con Ajax

[alangalan30]

No sé si el tema de ajax vaya en esta categoria, espero que si pues es javascript...
la cosa es que quiero en una página tener el formúlario de login y el formulario tambien para recordar usuario/clave por si la olvida, pero no sé como decirle al javascript que diferencie entre los formularios y actue en consecuencia... a lo mejor es muy básico, pero no sé como hacerlo... ??? tambien utilizo jquery. Gracias de antemano.

[Alexis88]

Ten una función Ajax que puedas reutilizar y según sea el formulario cuyos datos vayan a ser procesados, ejecutas dicha función y le envías los datos respectivos.

Código Javascript:

var forms = document.getElementsByTagName("form"),
    ajax = function(json){
        var data = (function(){
                for (var i = 0, serialized = [], l = json.data.length; i < l; serialized.push(json.data[i].name + "=" + json.data[i].value), i++);
                return serialized.join("&");
            })(),
            xhr = window.XMLHttpRequest ? 
                  new XMLHttpRequest() : 
                  new ActiveXObject("Microsoft.XMLHTTP") || 
                  new ActiveXObject("Msxml2.XMLHTTP");
 
        if (json.type.toUpperCase() == "GET"){
            json.url += "?" + data;
            data = null;
        }
 
        xhr.open(json.type || "GET", json.url, true);
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4){
                switch (xhr.status){
                    case 200:
                        if (json.success) json.success(xhr.responseText);
                        else console.log(xhr.responseText);
                    break;
 
                    case 404: default:
                        if (json.error) json.error(xhr.status);
                        else console.log(xhr.status);
                    break;
                }
            }
        };
 
        if (json.type.toUpperCase() == "POST") 
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        xhr.send(data);
    };
 
for (var i = 0, l = forms.length; i < l; i++){
    forms[i].addEventListener("submit", function(event){
        event.preventDefault(); //Cancelo el envío de los datos
        ajax({
            url: this.action, //Dirección hacia la cual se enviarán los datos
            type: this.method, //Método elegido para el envío de datos
            data: this.elements, //Los elementos del formulario
            success: function(response){ //En caso de recibir una respuesta exitosa
                console.log(response);
            },
            error: function(textStatus){ //En caso de producirse un error
                console.log("Error: " + textStatus);
            }
        });
    }, false);
}
 

Lo que hace esta función es recibir un conjunto de datos agrupados en un objeto literal, al estilo del método Ajax de jQuery, luego, convierte al conjunto de datos del formulario en una query string y evalúa el tipo de método elegido; si es "GET", concatena la query string a la URL, caso contrario, la envía mediante el método send.

Si deseas, puedes ampliar su funcionalidad, esta función la creé para mis proyectos personales y aunque ahora es más amplia, esta es la estructura base.

Saludos

[alangalan30]

Muchas Gracias Alexis, voy a tratar de implementar tu código a mi situación, me parece buena idea....