Реализация reCaptcha ajax api для существующей веб-формы, которая уже использует ajax

Question

У меня есть форма регистрации на моей домашней странице, которая использует проверку на стороне сервера и ajax, поэтому моя страница не обновляется во время проверки.

Когда вся проверка пройдена, моя страница переносится в зарегистрированный .html, которыйэто временная страница на данный момент.Позже это будет область учетной записи.

Что я хочу

Я хочу сделать 1 последний шаг после фактической проверки формы, которая будет моей проверкой reCaptcha.Вместо того, чтобы отправлять форму после проверки, я хочу, чтобы reCaptcha отображал стиль твиттера или просто заменял поля формы в стиле facebook.

Только после успешной проверки капчи форма будет отправлена.Я предоставил приведенный ниже код и был бы очень признателен, если бы кто-нибудь посоветовал мне лучший способ реализовать это.Прямо сейчас я нахожусь в стадии, когда я в замешательстве.

Проверка ошибок, и в самом низу вы можете увидеть выражение echo, которое отправляет пользователя к зарегистрированному .html после успешной проверки

<?php

// we check if everything is filled in

if(empty($_POST['first_name']) || empty($_POST['last_name']) || empty($_POST['email']) || empty($_POST['password']))
{
 die(msg(0,"All the fields are required"));
}


// is the sex selected?

if(!(int)$_POST['sex'])
{
 die(msg(0,"You have to select your sex"));
}


// is the birthday selected?

if(!(int)$_POST['day'] || !(int)$_POST['month'] || !(int)$_POST['year'])
{
 die(msg(0,"You have to fill in your birthday"));
}


// is the email valid?

if(!(preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $_POST['email'])))
 die(msg(0,"You haven't provided a valid email"));



// Here I must put your code for validating and escaping all the input data,
// inserting new records in your DB and echo-ing a message of the type:

// echo msg(1,"/member-area.php");

// where member-area.php is the address on my site where registered users are
// redirected after registration.




echo msg(1,"registered.html");


function msg($status,$txt)
{
 return '{"status":'.$status.',"txt":"'.$txt.'"}';
}
?>

Javascript

$(document).ready(function () {

    $('#fhjoinForm').submit(function (e) {

        register();
        e.preventDefault();

    });

});


function register() {
    hideshow('loading', 1);
    error(0);

    $.ajax({
        type: "POST",
        url: "submit.php",
        data: $('#fhjoinForm').serialize(),
        dataType: "json",
        success: function (msg) {

            if (parseInt(msg.status) == 1) {
                window.location = msg.txt;
            } else if (parseInt(msg.status) == 0) {
                error(1, msg.txt);
            }

            hideshow('loading', 0);
        }
    });

}


function hideshow(el, act) {
    if (act) $('#' + el).css('visibility', 'visible');
    else $('#' + el).css('visibility', 'hidden');
}

function error(act, txt) {
    hideshow('error', act);
    if (txt) $('#error').html(txt);
}   

Теперь я думаю, что должен быть простой способ внедрения reCaptcha ajax api в мою текущую форму.Сначала я попытался добавить onclick="showRecaptcha('recaptcha_div');" в конец моей формы, где находится мой тип ввода = submit, это не сработало.

Конец моей формы

    <td><input type="submit" class="joinButton" value="Join Us" /><img id="loading" src="<?php echo base_url()?>images/join/ajax-loader.gif" alt="working.." /></td>
    <div id="recaptcha_div"></div>
    </tr>

Я следую инструкциям на сайте рекапчи, и пока не повезло.Отрывки кода, совет что-нибудь поможет.Я ценю это.

Спасибо

Answer 1

Вы смотрели на их ссылку на JS lib API? http://wiki.recaptcha.net/index.php/Overview#AJAX_API

Recaptcha.create("apikey",
  "placeholder_div",
  {
    theme: "red",
    callback: function(){
      // what to do on success, like maybe submit your form
    }
  }
);

Вы можете просто создать элемент reCAPTCHA, где хотите, и добавить обратный вызов, чтобы сделать все, что вы хотите.

Что касается вашего комментария о том, куда поместить код создания рекапчи, вы можете поместить его в обратный вызов из вашего запроса AJAX

   if(parseInt(msg.status)==1)
   {
     Recaptcha.create("apikey",
       "placeholder_div",
       {
         theme: "red",
         callback: function(){
           // what to do on success
           window.location=msg.txt;
         }
       }
     );
   }