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

StackOverflow https://stackoverflow.com/questions/1630609

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.

Was it helpful?

Solution

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://www.google.com/recaptcha/plugins/php

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

OTHER TIPS

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

<a href="javascript:;" title="Reload Image" 
   onclick="document.getElementById('captcha').src = 'cimage.php?' + Math.random(); 
   return false">
   <img src="cimage.php" alt="Enter captcha" title="Enter captcha" id="captcha"/>
</a>

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>

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.

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.

Here is another one.

It creates global variable. Checks for existance.

function get_captcha(){
    //get original url refresh
    console.log('captcha requested.');
    if(typeof window.captcha_src === 'undefined'){
        window.captcha_src = document.getElementById('captcha').src;
    }
    document.getElementById('captcha').src = window.captcha_src + '&nocache=' + Math.random();
}

You can even make a link and reload your captcha in same division. If it's not a problem.

Enter Image Text <input name="captcha" type="text"> <img src="captcha.php" /><br> <a href="captcha.php">Reload Captcha</a><br/>

well i have solved this problem with a simple trick; instead of putting the captcha in <img> put that in an <iframe> and use javascript to reload it when u require

Javascript To Reload:

function reloadCaptcha()

{
document.getElementById('cap').src='captcha.php';
}

Actual HTML:

<iframe id="cap" src="captcha.php"></iframe> <input type="button" value="reload" onclick="reloadCaptcha();"/>

it solves my problem, correct me if i am wrong somewhere

@meme: I use same thing, but with jquery. If you need a few capthcas in one page:

<img class="captcha" src="/securimage/securimage_show.php" alt="CAPTCHA Image">
<a class="capcha-refresh" href="#" ><img src="/images/Refresh-icon.png"></a>

And js function:

$('.capcha-refresh').click(function(a){
       $('.captcha').attr('src','/securimage/securimage_show.php?' + Math.random());
       a.preventDefault();
})
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top