ajaxrecaptcha

reCAPTCHA without reloading the form page?


I have successfully followed this tutorial and have reCAPTCHA working on my site:

https://www.kaplankomputing.com/blog/tutorials/recaptcha-php-demo-tutorial/

However, the page I am using it on has a very complicated JS form, and I cannot refill the form data after the user presses the BACK button in the browser (unless I write to a file).

My question is, how do I use reCAPTCHA without loading a new page and losing all the form data? Thanks.

[edit]

Here's what the form looks like:

<form id="email_form" method="post" enctype="multipart/form-data" action="keyboard-recaptcha.php">
    <table id="email_table" style="margin:auto;">
        <tr>
            <td>Name:</td>
            <td><input class="email_input" type="text" name="email_1" id="email_1" placeholder="First and last name" required="required" autocomplete="on" data-lpignore="true"/></td>
        </tr>
        <tr>
            <td>Email:</td>
            <td><input class="email_input" type="email" name="email_2" id="email_2" placeholder="Return email address" required="required" autocomplete="on" data-lpignore="true"/></td>
        </tr>
        <tr>
            <td>Message:</td>
            <td><textarea class="email_textarea" name="email_3" id="email_3" placeholder="Message to admin" required="required"></textarea></td>
        </tr>
    </table>
    <div id="email_recaptcha" class="g-recaptcha" data-sitekey="<?php echo writeRecaptchaKey(); ?>"></div>
    <p style="text-align:left;">For human verification purposes, please click the checkbox labeled "I'm not a robot".</p>
    <input name="email_4" id="email_4" type="hidden" value=""/>
    <input name="email_5" id="email_5" type="hidden" value=""/>
    <input name="email_6" id="email_6" type="hidden" value=""/>
    <input name="email_7" id="email_7" type="hidden" value=""/>
</form>

Here's the PHP page that processes the emails, currently:

$path_root = "../";
include($path_root . 'ssi/recaptchakey.php');
$sender_name = stripslashes($_POST["sender_name"]);
$sender_email = stripslashes($_POST["sender_email"]);
$sender_message = stripslashes($_POST["sender_message"]);
$response = $_POST["g-recaptcha-response"];
$url = 'https://www.google.com/recaptcha/api/siteverify';
$data = array(
    'secret' => writeRecaptchaSecret(),
    'response' => $_POST["g-recaptcha-response"]
);
$options = array(
    'http' => array (
        'method' => 'POST',
        'content' => http_build_query($data)
    )
);
$context  = stream_context_create($options);
$verify = file_get_contents($url, false, $context);
$captcha_success=json_decode($verify);
if ($captcha_success->success==false) {
    echo "<p>You are a bot! Go away!</p>";
} else if ($captcha_success->success==true) {
    mail
    (
        "myemail@gmail.com",
        "VGKD Bindings Submission",
        "NAME:\n"   . $_POST['email_1'] . "\n\n" .
        "EMAIL:\n"  . $_POST['email_2'] . "\n\n" .
        "MESSAGE:\n"    . $_POST['email_3'] . "\n\n" .
        "GAME TITLE:\n" . $_POST['email_4'] . "\n\n" .
        "LEGENDS:\n"    . $_POST['email_5'] . "\n\n" .
        "COMMANDS:\n"   . $_POST['email_6'] . "\n\n" .
        "BINDINGS:\n"   . $_POST['email_7'] . "\n\n"
    );
    echo "<p>Thank you for your submission!</p>";
}

Solution

  • I would try taking a look at Ajax programming as I’m sure it is the solution to your problem. I can’t help you with any code examples since you have none, but I could try if you would deliver roughly an example of your form.