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
:
Ver originalif(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
:
Ver originalfunction 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á vací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á vací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