captcha dentro de modal al presionar submit

[catpaw]

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

[catpaw]

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

[catpaw]

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 forer@s 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!!

[RubensSTen]

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