[PHP/JavaScript]: How to refresh a Captcha?

Question

I am showing Captcha in this way:

<img src="ReturnCaptcha2.php" alt="CAPTCHA" width="100" height="50">

I have a hyperlink named "Reload" near it. I want to recall that PHP file without refreshing my page. Probably, AJAX is involved in it. Please assist.

Answer 1

Why not use http://recaptcha.net/ and save yourself the trouble of it all? They will just handle the Captcha for you.

Here is some integration info on PHP and recaptcha: http://recaptcha.net/plugins/php/

as I mentioned, it is not difficult at all to integrate into your webapp. Give it a try!

Answer 2

Here is the code I use with Secureimage PHP Captcha.

<form method="POST">
<input type="hidden" name="PHPSESSID" value="0b21dde61d891cd" />
<img id="siimage" src="securimage_show.php?sid=2ef186788e" alt="CAPTCHA Image" width="126" height="36" /><br />
<input type="text" name="code" /><br />
<a href="#" onclick="document.getElementById('siimage').src = 'securimage_show.php?' + Math.random(); return false">Reload Image</a>
<input type="submit" value="Submit Form" />
</form>

Answer 3

Maybe something like:

function reloadCaptcha()
{
img = document.getElementById('captcha');
img.src = 'ReturnCaptcha2.php';
}

And then add a button with onclick="reloadCaptcha();".

I haven't tested it, and I'm no js guru, so not sure if it will work.

Answer 4

Isn't there some parameter with a timestamp or something, so that the request does not get cached? Why not substitute the src with something like (using jquery)

$("img#your-selector").attr("src","ReturnCaptcha2.php?_="+((new Date()).getTime()));

Answer 5

one more approach can be use a little ajax.. on your refresh button give the action as: onclick=javascript:reloadCaptcha();

in this reloadCaptcha function, give a call to your captcha.php and update the div holding your captcha with the return value. you can easily return a html and then embed it in the div.