donglu8334 2010-09-21 15:34
浏览 43
已采纳

将reCaptcha ajax api实现为已使用ajax的现有Web表单

I have a signup form on my home page which uses server side validation and ajax so my page doesn't refresh while validating.

When all validation is passed my page is taken to a registered.html which is a temporary page for now. Later on it will be an account area.

What I want

I want to have 1 last step after the actual form validation which will be my reCaptcha validation. Instead of submitting the form after validation I want reCaptcha to popup twitter style or just replace the form fields facebook style.

Only after successful captcha validation will the form be submitted. I have provided the code below and would really appreciate if someone could advise me on the best way to implement this. Right now I'm at a stage where I'm confused.

Error checking and at the very bottom you can see the echo statement that sends a user to registered.html after successful validation

<?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.'"}';
}
?>

The 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);
}   

Now I'm thinking there must be a simple way to implement reCaptcha ajax api into my current form. At first I tried to add onclick="showRecaptcha('recaptcha_div');" to the end of my form where my input type=submit is located this didn't work.

The end of my form

    <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>

I've follows the instructions on the recaptcha website and no luck so far. Code snippets, advice anything will help. I appreciate it.

Thanks

  • 写回答

1条回答 默认 最新

  • dsomm80482 2010-09-21 16:02
    关注

    Have you looked into their JS lib API reference? 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
        }
      }
    );
    

    You can just create the reCAPTCHA element where desired and add some callback to do whatever you want.

    Regarding your comment about where to put the recaptcha creation code, you could put it in the callback from your AJAX request

       if(parseInt(msg.status)==1)
       {
         Recaptcha.create("apikey",
           "placeholder_div",
           {
             theme: "red",
             callback: function(){
               // what to do on success
               window.location=msg.txt;
             }
           }
         );
       }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

    报告相同问题?

    悬赏问题

    • ¥15 我需要在PC端 开两个抖店工作台客户端.(语言-java)
    • ¥15 有没有哪位厉害的人可以用C#可视化呀
    • ¥15 可以帮我看看代码哪里错了吗
    • ¥15 设计一个成绩管理系统
    • ¥15 PCL注册的选点等函数如何取消注册
    • ¥15 问一下各位,为什么我用蓝牙直接发送模拟输入的数据,接收端显示乱码呢,米思齐软件上usb串口显示正常的字符串呢?
    • ¥15 Python爬虫程序
    • ¥15 crypto 这种的应该怎么找flag?
    • ¥15 代码已写好,求帮我指出错误,有偿!
    • ¥15 matlab+波形匹配算法