Foros del Web » Programando para Internet » Javascript » Frameworks JS »

captcha dentro de modal al presionar submit

Estas en el tema de captcha dentro de modal al presionar submit en el foro de Frameworks JS en Foros del Web. Que tal gente Tengo un form que esta en publicar.php, que va a procesar la información en procesar.php Quiero que al presionar un botón submit ...
  #1 (permalink)  
Antiguo 20/01/2012, 19:49
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 9 años, 6 meses
Puntos: 23
captcha dentro de modal al presionar submit

Que tal gente

Tengo un form que esta en publicar.php, que va a procesar la información en procesar.php

Quiero que al presionar un botón submit se llamen dos funciones (si se puede en una mejor)

la primer función va a validar, campos vacíos, email, ect. si hay algo mal que aparezca al usuario el mensaje de error, pero si todo fue bien:

la segunda función debe cargar un dialogo modal (ya lo tengo) dentro de ese dialogo debe mostrar el captcha (que ya tengo mi public key y ya lo logro visualizar) y mostrar un boton para comprobar si el usuario introdujo el codigo valido, si el codigo no es valido que aparezca un boton reintentar y muestre el captcha nuevamente (obvio todo esto dentro del dialogo modal) o que automaticamente recargue el captcha para que el usuatrio lo vuelva a introducir (seria lo ideal)

Actualmente tengo el codigo del form y su respectivo submit

y la funcion del modal que ya carga el captcha pero el problema es que se debe apretar primero show captcha para que aparezca, este codigo es directo de la api del captcha (AJAX API)

http://code.google.com/intl/es-ES/ap...aptcha_methods

y tambien no se como hacer para que esto se ejecute al pulsar el submit ya que ahorita lo tengo asi:

Código HTML:
<script>
$(document).ready(function(){
	$('#recaptcha_div').modal();
});
</script>
<div id="recaptcha_div" style='display:none'>
    <input type="button" value="Show reCAPTCHA" onclick="showRecaptcha('recaptcha_div');"></input>
</div> 
y esto carga el modal desde que se carga la pagina y yo necesito que lo haga al presionar el submit despues de validar el form.

Agradezco si me echan una manita ya que no tengo mucha experiencia en jquery
  #2 (permalink)  
Antiguo 21/01/2012, 11:03
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 9 años, 6 meses
Puntos: 23
Respuesta: captcha dentro de modal al presionar submit

ok olviden lo del dialogo modal, me estoy complicando de mas, solo que aparezca mi formulario y al final el captcha, que al dar clic en enviar llame una funcion que haga las validaciones de los campos correspondientes y la verificacion del codigo captcha que introdujo el usuario, si algo esta mal, que aparezca el mensaje de error y si todo fue bien ya de eso me encargo.

El problema sigue siendo que la api del captcha trae determinado que se debe ejecutar algun evento, ej. onclick algun boton para mostrar la imagen del captcha y yo necesito que aparezca en automatico en el formulario.

no se como hacer esto? ayuda maestros por favor!!

Aqui lo mando a llamar
Código:
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
	function showRecaptcha(element) {
    	Recaptcha.create("public_key", "recaptcha_div", {
        theme: "white",
        callback: Recaptcha.focus_response_field
	});
    }
</script>
y en mi formulario agrego un campo para que aparezca

<div id="recaptcha_div"></div>


en mi botón enviar se ejecuta la función que hace que aparezca la imagen del captcha

<input type="button" id="enviar" value="Enviar" onclick="showRecaptcha();" />

Gracias
  #3 (permalink)  
Antiguo 23/01/2012, 19:45
Avatar de catpaw  
Fecha de Ingreso: mayo-2010
Ubicación: xalapa
Mensajes: 856
Antigüedad: 9 años, 6 meses
Puntos: 23
Respuesta: captcha dentro de modal al presionar submit

Ya logre lo que quería ahí les va:

para que muestre el captcha automáticamente y no tener que apretar algún botón, simple y sencillamente se pone entre etiquetas script la función. Así quedo mi pagina publicar.php

Código HTML:
<!--entre las etiquetas head-->
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
	function showRecaptcha(element) {
    	Recaptcha.create("public_key", "recaptcha_div", {
        theme: "white",
        callback: Recaptcha.focus_response_field
	});
    }
</script>

<!--termina el head y en el body el formulario y dentro del div el espacio para el captcha-->

<div id="recaptcha_div"><script>showRecaptcha();</script></div>

<!--el botón que ejecutara la función que validara todo el form incluyendo el captcha-->

<input type="button" id="enviar" value="Enviar" onclick="procesar('recaptcha_div');" /> 
ok lo que sigue la función que va a validar el código, pagina procesar.js

Código:
function ajaxFunction(){
  //funcion necesaria
}
function procesar(capa){

	var desafio = Recaptcha.get_challenge();
	var solucion = Recaptcha.get_response();
	
	var ajax;
    ajax= ajaxFunction();
    ajax.open("GET", "../ruta/procesar.php?recaptcha_challenge_field="+desafio+"&recaptcha_response_field="+solucion, true);
	
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.onreadystatechange = function() {
		
		if (ajax.readyState == 1){
			document.getElementById(capa).innerHTML= "<center><img src='../ruta/loader.gif' alt='Procesando'><br><br> Espere por favor...</center>";
		}
		if (ajax.readyState == 4){
			var respuesta = ajax.responseText;
			if (respuesta.length == 0 || respuesta == null || respuesta == 'undefined') {                   
				alert("Error en la validación del captcha");
			} 		   
			if(respuesta=="Incorrecto") {
				alert("Error en la validación del captcha");
				Recaptcha.reload();
			}
			if(respuesta=="correcto") {
				alert("validación del captcha correcta");
				document.getElementById(capa).innerHTML= ajax.responseText;
			}
		}
	}
	ajax.send(null);
}
ahora el procesar.php:

Código PHP:
<?php
  
require_once('recaptchalib.php');
  
$privatekey "private_key";
  
  
$resp recaptcha_check_answer ($privatekey,
                                
$_SERVER["REMOTE_ADDR"],
                                
$_GET["recaptcha_challenge_field"],
                                
$_GET["recaptcha_response_field"]);
  if(!
$resp->is_valid){
    echo 
"Incorrecto";
  }
  else{
    echo 
"Correcto";
  }
?>
Y ahi esta para el que necesite :D

Una observación muy particular, la verdad es que [email protected] ahora si me fallaron ya que ni una respuesta, mínimo un estas loca eso no se puede, o mira vas bien pero aquí muevele o lee esto o lo que sea, la verdad es que si se siente feo contestarse uno mismo, pero bueno ya quedo y aprendí que es lo importante.

Saludos!!
  #4 (permalink)  
Antiguo 07/08/2013, 21:05
 
Fecha de Ingreso: agosto-2013
Mensajes: 1
Antigüedad: 6 años, 3 meses
Puntos: 0
Exclamación Respuesta: captcha dentro de modal al presionar submit

Hola que tal he seguido tu ejemplo y tengo un problema espero me puedas ayudar ya que he investigado de varias formas y no he dado con la solución:
Bueno lo que pasa es que en mi sitio web deseo agregar el captcha de la misma forma que tu lo hiciste al final en un form con los inputs y en la parte de abajo con el reCaptcha, y bueno la dinamica del sitio es la siguiente

Cuando te diriges a la pagina principal del site, te aparece un menu donde te muestra una opcion de contacto en ese momento al dar click se actualiza una parte del cuerpo del sitio para poder visualizar el formulario de contacto, el problema aqui es que se carga bien el formulario pero no carga el reCaptcha puedes verlo en esta imagen ademas me muestra un error en la consola del navegador:

http://softdevt.x10.mx/Imagenes/recaptcha.png

y para poder visualizar el reCaptcha pongo en la consola del navegador showRecaptcha(); y se carga el recaptcha:

http://softdevt.x10.mx/Imagenes/conrecaptcha.png

tambien si visualizo la pagina que contiene solo el form junto con el recaptcha se ven sin problemas ahi no tengo problemas el problema es cuando la mando a llamar a la pagina principal por medio del menu de navegacion

http://softdevt.x10.mx/Imagenes/form.png

Última edición por RubensSTen; 07/08/2013 a las 21:17 Razón: problemas de imagen

Etiquetas: ajax, captcha, funcion, html, input, modal, php, presionar, submit, botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:59.