Enviar formulario por AJAX

[Henkka]

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?