Question

I came across the problem, I’m using reCAPTCHA to protect against spam bots. The problem is that when user enters wrong characters or leaves captcha blank, it echoes an error message.
it also refreshes the page and all information that was entered by a user is lost.
My question is, how to show reCAPTCHA error message without page refresh? e.g. an alert box or even better a hidden error div that displays if wrong captcha was entered.

HTML

<form action="" method="post" enctype="multipart/form-data">
   <div id="sc_header" style="margin-top: 11px;">Human check</div>
      <p><?php
          require_once('recaptchalib.php');
          $publickey = "my_public_key_here";
          echo recaptcha_get_html($publickey);
          ?></p>
       <p style="float: left;"><input type="submit" value="Send"></p>
       <input name="story-create" type="hidden" value="submit">
</form>

PHP

<?php
if ($_POST['story-create'] == "submit"){
      require_once('inc/recaptchalib.php');
      $privatekey = "my_private_key_here";
      $resp = recaptcha_check_answer ($privatekey,
                                    $_SERVER["REMOTE_ADDR"],
                                    $_POST["recaptcha_challenge_field"],
                                    $_POST["recaptcha_response_field"]);

      if (!$resp->is_valid) {
        // What happens when the CAPTCHA was entered incorrectly
        die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
             "(reCAPTCHA said: " . $resp->error . ")");
      } else {

      }
  }
  ?>

Answer 1

A simple way of retaining the user input is to have the form submit to the same script that produced the form. An outline of this approach could be:

signup.php

<?php

// if data submitted, perform validation (if sign up is successful, redirect to success page)

?>
<form action="signup.php" method="post">
    <input type="text" name="username" value="<?php if (!empty($_POST['username'])) echo strip_tags($_POST['username']) ?>" />
    <!-- etc... -->
</form>

This answers assumes you want “without page refresh” because you think it will avoid clearing of the form, rather than wanting an AJAXian solution.