Enviar formulario por AJAX

Henkka · #1 (**permalink**) 07/04/2008, 09:35

Saludos, es mi primer post, una lástima que sea preguntando y no ayudando, pido disculpas

.

Llendo al grano, lo que quiero hacer es que al enviar la form login los datos se transmitan a member.php por POST a través de AJAX, y que el resultado se cargue en el div contenido.

Este es el contenido HTML:

Código PHP:

  <div id="contenido"> 
        <form id="login" action="#"> 
            <fieldset> 
            <legend>Por favor, identif&iacute;quese</legend> 
            <p><label for="name">Usuario</label> <input type="text" name="username" id="name" /></p> 
            <p><label for="pass">Contraseña</label> <input type="password" name="passwd" id="pass" /></p> 
            <p class="submit"><input type="button" value="Ingresar"  
                    onclick="enviarFormulario('member.php','login');"/></p> 
            </fieldset> 
        </form> 
</div>

Y este es el Javascript:

Código PHP:

  function enviarFormulario(url, formid){ 
    alert('1'); 
        var Formulario = document.getElementById(formid); 
        var longitudFormulario = Formulario.elements.length; 
        var cadenaFormulario = ""; 
        var sepCampos; 
        sepCampos = ""; 
        for (var i=0; i <= Formulario.elements.length-1;i++) { 
            cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value); 
            sepCampos="&"; 
    } 
    peticion.open("POST", url, true); 
    peticion.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=ISO-8859-1'); 
    peticion.send(cadenaFormulario); 
    if (peticion.readyState == 4 && (peticion.status == 200 || window.location.href.indexOf ("http") == - 1)){ 
        alert('2'); 
        document.getElementById('contenido').innerHTML = peticion.responseText; 
 
    } 
    alert('3'); 
}

Tiene puestos 3 alerts para ver hasta que parte se ejecuta, pero solo me alerta el primero

.

Soluciones?

GatorV · #2 (**permalink**) 07/04/2008, 11:38

Hola henka,

Para procesar AJAX es de manera asíncrona así que debes de usar el evento onreadystatechange:

Código:

function enviarFormulario(url, formid){
    alert('1');
        var Formulario = document.getElementById(formid);
        var longitudFormulario = Formulario.elements.length;
        var cadenaFormulario = "";
        var sepCampos;
        sepCampos = "";
        for (var i=0; i <= Formulario.elements.length-1;i++) {
            cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value);
            sepCampos="&";
    }
    peticion.open("POST", url, true);
    peticion.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=ISO-8859-1');
    peticion.send(cadenaFormulario);
    peticion.onreadystatechange = function() {
          if (peticion.readyState == 4 && (peticion.status == 200 || window.location.href.indexOf ("http") == - 1)){
                alert('2');
                document.getElementById('contenido').innerHTML = peticion.responseText;
          }
    }
}

Saludos.

Henkka · #3 (**permalink**) 08/04/2008, 12:16

Lo probé, pero sigue sin funcionar.

Hice un archivo de prueba, con todos los datos en una misma, y simplifiqué la form (sin adornos):

Código PHP:

  <html> 
<head> 
<title>Prueba de AJAX y forms</title> 
<SCRIPT LANGUAGE=JavaScript> 
function enviarFormulario(url, formid){ 
        var Formulario = document.getElementById(formid); 
        var longitudFormulario = Formulario.elements.length; 
        var cadenaFormulario = ""; 
        var sepCampos; 
        sepCampos = ""; 
        for (var i=0; i <= Formulario.elements.length-1;i++) { 
            cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value); 
            sepCampos="&"; 
    } 
    peticion.open("POST", url, true); 
    peticion.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=ISO-8859-1'); 
    peticion.send(cadenaFormulario); 
    peticion.onreadystatechange = function() { 
          if (peticion.readyState == 4 && (peticion.status == 200 || window.location.href.indexOf ("http") == - 1)){ 
                alert('2'); 
                document.getElementById('contenido').innerHTML = peticion.responseText; 
          } 
    } 
} 
</script> 
</head> 
<body> 
<div id="contenido"> 
        <form id="login" action="#"> 
        Por favor, identif&iacute;quese 
        <input type="text" name="username" id="name" /> 
        <input type="password" name="passwd" id="pass" /> 
        <input type="button" value="Ingresar"  
                    onclick="enviarFormulario('member.php','login');"/> 
        </form> 
</div>   
</body> 
</html>

jonathan_miguel · #4 (**permalink**) 10/04/2008, 08:04

Te hago una pregunta, la variable peticion donde la definiste??
El error que tiene tu pagina de prueba es que la variable peticion no esta definida, entonces cuando ejecuta "peticion.open(...);" tira un error, el resto esta todo bien.
Te recomiendo para trabajar con Ajax de separar la recepcion de datos (en este caso levantar los datos del form) con las instancias Ajax como ser open,send y lo principal new XMLhttp...
Nada mejor que una buena clase que tenga todas las instancias hechas, te presento una llamada "Ajaxsa" www.jomico.com.ar/Librerias/Ajaxsa que es simple, liviana y codigo abierto.

Espero que haya sido de utilidad.

Henkka · #5 (**permalink**) 10/04/2008, 11:49

Cita:

Iniciado por jonathan_miguel

Te hago una pregunta, la variable peticion donde la definiste??
El error que tiene tu pagina de prueba es que la variable peticion no esta definida, entonces cuando ejecuta "peticion.open(...);" tira un error, el resto esta todo bien.
Te recomiendo para trabajar con Ajax de separar la recepcion de datos (en este caso levantar los datos del form) con las instancias Ajax como ser open,send y lo principal new XMLhttp...
Nada mejor que una buena clase que tenga todas las instancias hechas, te presento una llamada "Ajaxsa" www.jomico.com.ar/Librerias/Ajaxsa que es simple, liviana y codigo abierto.

Espero que haya sido de utilidad.

Por dios, que tonto fuí, llamaba a abrir la conección cuando ni siquiera estaba definida

.

Lo que hice fue crear la función que conecta por XML, y agregar la linea que define a peticion como esta conección.

Bueno, basicamente lo que hace este script es que al ser llamado hace un bucle sobre todos los elementos de un form y los envia por AJAX, recibiendolos dinamicamente en un DIV.

Código PHP:

  <SCRIPT LANGUAGE=JavaScript>
function nuevoAjax(){
    var xmlhttp=false;
    try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
    try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch (E) {
    xmlhttp = false;
    }
    }

    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
    xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

function enviarFormulario(url, formid, divrespuesta){
        var Formulario = document.getElementById(formid);
        var longitudFormulario = Formulario.elements.length;
        var cadenaFormulario = "";
        var sepCampos;
        sepCampos = "";
        for (var i=0; i <= Formulario.elements.length-1;i++) {
            cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value);
            sepCampos="&";
    }
    peticion=nuevoAjax();
    peticion.open("POST", url, true);
    peticion.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=ISO-8859-1');
    peticion.send(cadenaFormulario);
    peticion.onreadystatechange = function() {
          if (peticion.readyState == 4 && (peticion.status == 200 || window.location.href.indexOf ("http") == - 1)){
                document.getElementById(divrespuesta).innerHTML = peticion.responseText;
          }
    }
}
</script>

Modo de uso:

Crear un DIV para recibir los datos, un form con un id para decirle donde buscar los lelementos de formulario, y al botón de submit asignarle que llame a esta función:

Por ejemplo, para cargar los datos fuera de nuestro form:

Código PHP:

  <form id="formregistro" action="#">
        Formulario de registro:
        <input type="text" name="username" id="name" />
        <input type="password" name="passwd" id="pass" />
        <input type="text" name="nombre" id="nombre" />
        <input type="text" name="apellido" id="apellido" />
        <input type="button" value="Registrarse" 
                    onclick="enviarFormulario('registro.php','formregistro', 'respuesta');"/>
        </form>
<div id="respuesta">
</div>

O, por ejemplo, para hacer un formulario de login que se carge sobre si mismo:

Código PHP:

  <div id="contenido">
<form id="login" action="#">
        Por favor, identif&iacute;quese
        <input type="text" name="username" id="name" />
        <input type="password" name="passwd" id="pass" />
        <input type="button" value="Ingresar" 
                    onclick="enviarFormulario('member.php','login', 'contenido');"/>
        </form>
</div>

Errores, sugerencias?