How do get my ajax form to inject captcha verification into the browser after successful form validation?

Question

Currently after my form has passed validation it forwards to an html page.

I would like to have one last step that pulls reCaptcha and when reCaptcha has been passed only then is the registration details of the user sent to my database and user forwarded to what ever page I choose.

Please advise me on the best way to do this thanks.

Here is my javascript and ajax. The submit.php is a file that holds all my validation rules. I think I now have to have a file that holds my captcha and use ajax to get that file or maybe there is some better way. I'm still learning.

$(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);
    }

Answer 1

So there must be an easy way to add reCaotcha as my last step of my sign-up form before it's submitted.