AJAX+PHP+Forms

papulo · #1 30-11-2007

Estoy intentando pasar el contenido de un form(post) a un <div> usando AJAX y me falla, jops.

Por un lado el formulario test.php

Código PHP:


			
<?php 
require_once("config.php"); //Archivo de configuración de paths y archivos.
?>
<html>
<head>
<script type="text/javascript" src="<?php echo javascript_path(); ?>"></script>
<script type="text/javascript" src="<?php echo javascript2_path(); //es la ruta al archivo xmlhttp_pro.js donde tengo las funciones javascript ?>"></script>
</head>
<body>
    <form action="formaction.php" method="post" id="Prueba" name="Prueba" >
        <input id="testdata" name="testdata" type="text" value="<?php echo "HOLA MUNDO"; ?>"  />
        <input type="button" value="Enviar"  onclick="submitform(document.getElementById('Prueba'),'formaction.php','testid'); return false;" />
    </form>
    
<div id="testid"></div>
</body>
</html>

Por el otro formaction.php

Código PHP:


			
<div>
<?php echo $_POST[testdata];?>MAMAAAAAL
</div>

Y por último, pero no menos importante, xmlhttp_pro.js

Código PHP:


			
 
    //xmlhttp_pro.js 
     
    //Function to create an XMLHttp Object. 
    function getxmlhttp (){ 
        //Create a boolean variable to check for a valid microsoft active X instance. 
        var xmlhttp = false; 
         
        //Check if we are using internet explorer. 
        try { 
            //If the javascript version is greater than 5. 
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
        } catch (e) { 
            //If not, then use the older active x object. 
            try { 
                //If we are using internet explorer. 
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
            } catch (E) { 
                //Else we must be using a non-internet explorer browser. 
                xmlhttp = false; 
            } 
        } 
         
        //If we are using a non-internet explorer browser, create a javascript instance of the object. 
        if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { 
            xmlhttp = new XMLHttpRequest(); 
        } 
         
        return xmlhttp; 
    } 
     

        var aok; 
     
    //Funciones para enviar un formulario. 
    function getformvalues (fobj, valfunc){ 
         
        var str = ""; 
        aok = true; 
        var val; 
         
        //Recorrer la lista de todos los objetos que contiene el formulario. 
        for(var i = 0; i < fobj.elements.length; i++){ 
            if(valfunc) { 
                if (aok == true){ 
                    val = valfunc (fobj.elements[i].value,fobj.elements[i].name);  
                    if (val == false){ 
                        aok = false; 
                    } 
                } 
            } 
            str += fobj.elements[i].name + "=" + escape(fobj.elements[i].value) + "&"; 
        } 
        //Devolver los valores de la cadena 
        return str; 
    } 
     
    function submitform (theform, serverPage, objID, valfunc){ 
        var file = serverPage; 
        var str = getformvalues(theform,valfunc); 
        //Si la validación es correcta.
        if (aok == true){ 
            obj = document.getElementById(objID); 
            processajax (serverPage, obj, "post", str); 
        } 
    }

    //Function to process an XMLHttpRequest. 
    function processajax (serverPage, obj, getOrPost, str){ 
        //Get an XMLHttpRequest object for use. 
        xmlhttp = getxmlhttp (); 
        if (getOrPost == "get"){ 
            xmlhttp.open("GET", serverPage); 
            xmlhttp.onreadystatechange = function() { 
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
                    document.getElementById(obj).innerHTML = xmlhttp.responseText; 
                } 
            } 
            xmlhttp.send(null); 
        } else { 
            xmlhttp.open("POST", serverPage, true); 
            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8"); 
            xmlhttp.onreadystatechange = function() { 
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
                    document.getElementById(obj).innerHTML = xmlhttp.responseText; 
                } 
            } 
            xmlhttp.send(str); 
        } 
    }

El caso es que al ejecutarlo me da un error en la linea 86 de xmlhttp_pro.js que dice lo siguiente:
document.getElementById(obj).innerHTML = xmlhttp.responseText;y ya no tengo ni idea de que es lo que falla.

¿Será el navegador o algún error que no veo?

Ando desquiciado con eso.

Saludos gente.

dec · #2 30-11-2007

Hola,

Seguramente no solucione el problema, pero, me llama la atención la instrucción:

Código PHP:


			
<?php echo $_POST[testdata]; ?>

Puesto que creo que sería preciso entrecomillar la clave del Array:

Código PHP:


			
<?php echo $_POST['testdata']; ?>

Pero, como digo... tal vez esto no tenga que ver con el problema...

papulo · #3 30-11-2007

Eso no es importante, ya que al menos me tendría que mostrar "MAMAAAAAARL" aunque no cargara esa otra cadena.

Pero gracias por mirartelo, Dec.

papulo · #4 04-12-2007

Aquí:

Código PHP:


			
obj = document.getElementById(objID);

Con poner

Código PHP:


			
obj = objID;

Se soluciona todo y ya tenemos una bella aportación del menda, para poder utilizar formularios con el método post y AJAX.

Una joya en bruto, señores, en bruto.

Saludos y hoy me iré mas feliz a la cama.

Temas Similares
Tema	Autor	Foro	Respuestas	Último mensaje
CSS+Ajax	halizia	HTML, Javascript y otros	1	18-09-2007 08:47:58
php+ajax+ie	halizia	HTML, Javascript y otros	1	06-09-2007 13:47:00
Ajax	dayrontbs	HTML, Javascript y otros	0	29-08-2007 20:04:41
AJAX, el comienzo.	papulo	HTML, Javascript y otros	10	02-07-2007 10:49:25
lenguaje ajax	srangel	HTML, Javascript y otros	2	20-04-2007 00:11:57