Why isn't Recaptcha showing up from PHP using XMLHttpRequest?

Question

::EXPLINATION::

In an HTML file, I'm attempting to load a registration frame with a captcha check. The form itself shows up. The captcha does not. So I know that the javascript (posted below) gets what I want it to get. But there's something wrong that is keeping my captcha from showing up.

Just as a final note, I'm targetting a div with the id "splashTarget" I use CSS to arrange everything how I want it. I'm not going to post that because its probably not relevant, but if you think I do need to post it to get help let me know.

::CODE::

The form that doesn't seem to work:

<div class="splash"> </div>
<div style="text-align:left" id="registrationSplash" class="splashContent">
    <div style="text-align:right">
        <a style="color:darkred" href="javascript:closeSplash()">[ CANCEL ]</a>
    </div>
    <h1>REGISTER</h1>
    <form action="" method="post" id="registerForm">
                <?PHP
                require_once('recaptchalib.php');
                $publickey = "[censored]";                  
                echo recaptcha_get_html($publickey);
                echo '<!--'.recaptcha_get_html($publickey).'-->';
                ?>
        <table>
            <tr>
                <td>First Name:</td>
                <td><input type="text" name="firstname" maxlength="60"></td>
                <td>Username:</td>
                <td><input type="text" name="username" maxlength="30"></td>
            </tr>

            <tr>
                <td>Last Name:</td>
                <td><input type="text" name="lastname" maxlength="60"></td>
                <td>Password:</td>
                <td><input type="password" name="pass" maxlength="30"></td>
            </tr>

            <tr>
                <td>E-mail Address:</td>
                <td><input type="text" name="firstname" maxlength="60"></td>
                <td>Confirm Password:</td>
                <td><input type="password" name="pass2" maxlength="30"></td>
            </tr>

            <tr>
                <th colspan=4 style="text-align:right">

                <button onclick="submitFormRegisterSplash()" type="button" name="submit" value="Login">Register!</button>
                </th>
            </tr> 
        </table>
    </form>

    <div id="status" />
</div>

The actual call to recaptia.

                <?PHP
                require_once('recaptchalib.php');
                $publickey = "[censored]";
                echo recaptcha_get_html($publickey);
                echo '<!--'.recaptcha_get_html($publickey).'-->';
                ?>

Javascript Function used to load Register form:

function onRegisterClicked() {
    var onRegisterClickedHttp;

    if(window.XMLHttpRequest) {
        onRegisterClickedHttp = new XMLHttpRequest();

        onRegisterClickedHttp.onreadystatechange = function() {
            if(onRegisterClickedHttp.readyState==4 && onRegisterClickedHttp.status==200) {
                var response = onRegisterClickedHttp.responseText;
                document.getElementById("splashTarget").innerHTML = response;
            }
        }
    }

    onRegisterClickedHttp.open("GET", "Verification/RegisterSplash.php", true);
    onRegisterClickedHttp.send();
}

Result on Webpage after calls to create

<div id="splashTarget">

<div class="splash"> </div>
<div style="text-align:left" id="registrationSplash" class="splashContent">
    <div style="text-align:right">
        <a style="color:darkred" href="javascript:closeSplash()">[ CANCEL ]</a>
    </div>
    <h1>REGISTER</h1>
    <form action="" method="post" id="registerForm">
                <script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV"></script>

    <noscript>
        &lt;iframe src="http://www.google.com/recaptcha/api/noscript?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV" height="300" width="500" frameborder="0"&gt;&lt;/iframe&gt;&lt;br/&gt;
        &lt;textarea name="recaptcha_challenge_field" rows="3" cols="40"&gt;&lt;/textarea&gt;
        &lt;input type="hidden" name="recaptcha_response_field" value="manual_challenge"/&gt;
    </noscript><!--<script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV"></script>

    <noscript>
        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LehEsgSAAAAAAH2xfKSXKSdldMwoiOqZyO5TupV" height="300" width="500" frameborder="0"></iframe><br/>
        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
        <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
    </noscript>-->      <table>
            <tbody><tr>
                <td>First Name:</td>
                <td><input type="text" name="firstname" maxlength="60"></td>
                <td>Username:</td>
                <td><input type="text" name="username" maxlength="30"></td>
            </tr>

            <tr>
                <td>Last Name:</td>
                <td><input type="text" name="lastname" maxlength="60"></td>
                <td>Password:</td>
                <td><input type="password" name="pass" maxlength="30"></td>
            </tr>

            <tr>
                <td>E-mail Address:</td>
                <td><input type="text" name="firstname" maxlength="60"></td>
                <td>Confirm Password:</td>
                <td><input type="password" name="pass2" maxlength="30"></td>
            </tr>

            <tr>
                <th colspan="4" style="text-align:right">

                <button onclick="submitFormRegisterSplash()" type="button" name="submit" value="Login">Register!</button>
                </th>
            </tr> 
        </tbody></table>
    </form>

    <div id="status">
</div>

</div></div>

The Website in action is gumonshoe dot net slash Registration You'll need to choose to try to register to see the pop up. I disabled the CSS that created the splash screen thinking that it might have been an issue with z-indexes. That doesn't appear to be the case.

Thanks for any tips.

Answer 1

The form HTML DOES work (see http://jsfiddle.net/5p5K3/ ). The error is caused by a feature:

<script> tags which are injected using .innerHTML = ... . <script> are not parsed (functions and variables inside these tags are not defined, nor called). You have to include the CAPTCHA code inside the page, instead of adding it using AJAX.

EDIT

Add this HTML code (inside the <head> block):

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

Overwrite your function by my suggestion (replace <PUBLIC kEY HERE> by your public key):

function onRegisterClicked() {
    Recaptcha.create("<PUBLIC KEY HERE>", "splashTarget", {
        theme: "red",
        callback: Recaptcha.focus_response_field
    });
}

Answer 2

Obvious problem: The inserted recaptcha code is commented out with <!-- --> . Commented-out html/js is NOT going to be rendered/executed. Change

echo '<!--'.recaptcha_get_html($publickey).'-->';

to

echo recaptcha_get_html($publickey);