Variable no se actualiza con "responseText"

[ghidalgoram]

Hola amigos. Tengo un problema que desde hace mucho no he podido resolver.
Agradezco su ayuda. Les presento el código. Es una función en Javascript, la cuál se llama "send_form_data()". Esta función se encarga de validar un formulario(revisar campos vacíos, formatos de correos,etc). Si son correctos los campos del formulario, se envia mediante AJAX. Todo hasta aquí bien.

Se me había ocurrido investigar sobre el Recaptcha y puede comprender que se puede usar este sistema de seguridad con diferentes tecnologías (PHP, AJAX,etc, etc).

Decidí incluir un Recaptcha, pero como yo quería mantener la forma de procesar el Formulario (usando AJAX), pensé adaptar el Recaptcha con AJAX. Una idea de como está estructurada la función "send_form_data()"

1. Primero, si el campo del Recaptcha está vacio, debe validar lo que se digitó en el campo del Recaptcha. Por medio de AJAX, verifica el resultado del Recaptcha con un archivo que está en el servidor, llamado "recaptcha.php". Este devuelve el resultado en una variable global llamada "respuesta". Eso es todo lo que debería hacer, cuando se verifica el Recaptcha.

La variable "respuesta" la inicializo con un valor de vacio. Cuando se ejecuta el siguiente código:



ajaxobj_recaptcha.open('POST',url_proc_form,true);
ajaxobj_recaptcha.onreadystatechange=function() {

if(ajaxobj_recaptcha.readyState==4 && ajaxobj_recaptcha.status==200)
{

//En esta sección es donde necesito que se asigne el resultado del archivo 'recaptcha.php', pero no sé por qué no lo hace . Deseo una sugerencia que hacer para que el programa

// no continue con la 2° parte HASTA QUE SE ASIGNE ESE VALOR. Como pueden ver, al inicio de la función "send_form_data()" la variable 'respuesta' es inicializada como vacio.

respuesta = ajaxobj_recaptcha.responseText;
// Respuesta del Recaptcha (archivo 'recaptcha.php')
}
}

ajaxobj_recaptcha.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
ajaxobj_recaptcha.send(param);
//Empiezo a validar cada campo del Form (que no estén vacios).

alert(respuesta); // Hago un "alert()" para ver el resultado, pero me devuelve un valor vacio, no se por qué




Más abajo de este código, utilizo la variable 'respuesta' y pregunto si es igual a la frase "mal-escrito"

Código Javascript:

if(respuesta=='mal-escrito')
    {
        document.getElementById('recaptcha_response_field').focus();
        document.getElementById('img_error8').className='img_visible';
        error_form_field[0]="<br />El campo 'Captcha' no coincide con el valor de la imagen. Por favor digíte los números y letras que aparecen en la imagen.";
        respuesta="";
        Recaptcha.reload();
    }
 

2. Validar los demás campos del form y si todo esta bien se envia el formulario e indica un mensaje de que el formulario se envio sin ningún problema.


Aqui les inserto la función dividida en dos partes:

Código Javascript:

function send_form_data()
{
// ******* 1° Parte  *********
    var error_form_field = new Array();
    respuesta = ""; // variable que define si el Recaptcha fué digitado correctamente
 
 
    /* verifica si el Recaptcha es correcto ó está mal escrito*/
    var READY_STATE_UNINITIALIZED=0; 
    var READY_STATE_LOADING=1; 
    var READY_STATE_LOADED=2;
    var READY_STATE_INTERACTIVE=3; 
    var READY_STATE_COMPLETE=4;
    var ajaxobj_recaptcha = createObject();
    
        var procruta_recaptcha="folder/recaptcha.php"; //Archivo dado por Google
 
        resp_captcha=Recaptcha.get_challenge();
        nocache = Math.random(); // Set te random number to add to URL request
 
        // Paso var con POST
        var param = "recaptcha_challenge_field="+Recaptcha.get_challenge()+"&recaptcha_response_field="+Recaptcha.get_response()+"&resp_captcha="+resp_captcha;
        var url_proc_form = procruta_recaptcha+'?nocache='+nocache;
 
        ajaxobj_recaptcha.open('POST',url_proc_form,true);
        ajaxobj_recaptcha.onreadystatechange=function() {
            if(ajaxobj_recaptcha.readyState==4 && ajaxobj_recaptcha.status==200)
            {
                //En esta sección es donde necesito que se asigne el resultado del archivo 'recaptcha.php', pero no sé por qué no lo hace :-( . Deseo una sugerencia que hacer para que el programa
                // no continue con la 2° parte HASTA QUE SE ASIGNE ESE VALOR. Como pueden ver, al inicio de la función "send_form_data()" la variable 'respuesta' es inicializada como vacio. 
                respuesta = ajaxobj_recaptcha.responseText;// Respuesta del Recaptcha (archivo 'recaptcha.php')
            }
        }
 
        ajaxobj_recaptcha.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        ajaxobj_recaptcha.send(param);// Con POST paso variables y con GET pongo NULL
    //Empiezo a validar cada campo del Form (que no estén vacios).
    
    alert(respuesta); // Hago un "alert()" para ver el resultado, pero me devuelve un valor vacio, no se por qué :-(
 
 
 
 
 
// ******* 2° Parte  *********
 
 
//A PARTIR DE AQUI EN ADELANTE EMPIEZO A VALIDAR TODOS LOS CAMPOS DEL FORMULARIO (como se hace con cualquier formulario). No los pongo todos. Eliminé unos cuantos.
// Yo deseo que en la variable "respuesta" tenga la respuesta si el Recaptcha fué digitado correctamente. Si fué mal digitado, el archivo 'recaptcha.php' debería retornar un valor como "mal-escrito" y asignarlo en una variable Global de Javascript llamada 'respuesta'. Esta variable('respuesta') me indica que el recaptcha fué mal digitado, y no permite que se envie el formulario con AJAX, hasta que se digite correctamente.
    
    if(document.getElementById('txt_nombre').value == "")
    {
        document.getElementById('txt_nombre').focus();
        document.getElementById('img_error1').className='img_visible';
        error_form_field[0]="<br />El campo 'Nombre' est&aacute; vac&iacute;o.";
    }
    else
    if(document.getElementById('recaptcha_response_field').value == "")
    {
        document.getElementById('recaptcha_response_field').focus();
        document.getElementById('img_error8').className='img_visible';
        error_form_field[0]="<br />El campo 'Captcha' est&aacute; vac&iacute;o. Por favor digíte los números y letras que aparecen en la imagen.";
        respuesta="";
        Recaptcha.reload();
    }
    else
    if(respuesta=='mal-escrito') // No se ejecuta, porque el valor va vacio. No se asigna el resultado del Recaptcha a la variable 'respuesta'. Se mantiene con el valor vacio.
    {
        document.getElementById('recaptcha_response_field').focus();
        document.getElementById('img_error8').className='img_visible';
        error_form_field[0]="<br />El campo 'Captcha' no coincide con el valor de la imagen. Por favor digíte los números y letras que aparecen en la imagen.";
        respuesta="";
        Recaptcha.reload();
    }
    else
    {
        //ENVIAR FORMULARIO CON AJAX
        var txt_nombre = encodeURI(document.getElementById('txt_nombre').value); 
        
        nocache = Math.random();// Set te random number to add to URL request
        // Paso var con POST
        var param = 'txt_nombre='+txt_nombre+'&txt_campo2='+txt_campo2;
        
        var url_proc_form = "procs/"+procruta+'?nocache='+nocache;
        ajaxobj.open('POST',url_proc_form,true);
        ajaxobj.onreadystatechange=procesando_datos_msje;
        ajaxobj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        ajaxobj.send(param);// Con POST paso variables y con GET pongo NULL
    }
 
        if(error_form_field[0]!=""){
        mostrar_msje_error(error_form_field); } // Muestra mensaje de error, en caso que exista.
        
}
 

Saludos

[masterpuppet]

Que tal ghidalgoram,

Lo que esta pasando es lo lógico, AJAX es asinronico, osea lanza la petición y continua la ejecución del código, cuando llega al alert todavia no tenes la respuesta, por eso esta vació, todo lo que quieras que se ejecute dependiendo de la respuesta debería ir en onreadystatechange, algo así:

Código Javascript:

...
ajaxobj_recaptcha.onreadystatechange = function() {
    if(ajaxobj_recaptcha.readyState==4 && ajaxobj_recaptcha.status==200) {
        respuesta = ajaxobj_recaptcha.responseText; 
        //resto de validaciones
    }
}
 

la otra solución seria utilizar SJAX, que es la versión sincrónica, esta esperaria la respuesta de la petición y ahi si en el alert te mostraria el valor de la respuesta, para esto deberias cambiar:

Código Javascript:

ajaxobj_recaptcha.open('POST', url_proc_form, true);
 

por

Código Javascript:

ajaxobj_recaptcha.open('POST', url_proc_form,  false);
 

ten en cuenta que "frizzea" el browser esperando la respuesta.

Saludos.

[ghidalgoram]

Hola masterpuppet

Muy agradecido por el tiempo que sacaste para colaborar. Tu idea es buena, pero no me sirvió. Gracias por tu ayuda.

De paso te comento, que se me ocurrió algo diferente.

Decidí, tratar aparte el caso del Recaptcha. Por ejemplo, el nombre ó ID del campo donde se almacena el código se llama "recaptcha_response_field". Gracias a Dios, se me ocurrió que cuando se pierda el foco de ese campo (recaptcha_response_field), por medio de AJAX, se llame a la función en código PHP, que verifica si fué ó no correctamente escrito el código. Para eso uso el evento onblur. la verificación tarda como 2 segundos y para evitar que el usuario de click al botón de submit, deshabilito ese botón, solo en esos 2 segundos. Luego lo vuelvo habilitar.

La respuesta de este, lo guardo en campo oculto del form. Bueno, ya funciona.

Muchas gracias de nuevo.
Saludos