Tutorial kali ini kita akan Membuat Refresh atau Reload Captcha Image dengan Javascript, dalam artikel sebelumnya kita sudah membuat Membuat Simple Captcha dengan PHP dan Simple Captcha Script dengan PHP , nah disini kita akan menambahkan fitur reload / refresh captcha yang ada agar lebih user friendly..

Dengan Fiturh Reload image captcha , user yang kebingungan dalam menginputkan captcha yang sulit untuk di tulis , dapat memilih bentuk captcha yang bisa dipastikan olehnya benar.

Berikut Contoh Captcha :

Cara 1

Untuk Codenya perhatikan script untuk menampilkan captcha berikut ini :

<img src=captcha-demo.php id="capt">
<input type=button onClick=reload(); value='Reload image'>

Script diatas kita menambahkan id , dan kemudian menambahkan fungsi onclick pada button untuk memanggil fungsi javascriptnya :

<script type="text/javascript">
function reload()
{
img = document.getElementById("capt");
img.src="captcha-demo.php?rand_number=" + Math.random();
}
</script> 

Cara II

<form method="POST">
<img id="siimage" src="securimage_show.php" 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>

Cara III

Kode Javascript

    <script type="text/javascript">
    function captcha()
    {
    var c_currentTime = new Date();
    var c_miliseconds = c_currentTime.getTime();
    
    document.getElementById('captcha').src = 'folder/captcha.php?x='+ c_miliseconds;
    }
    </script>

Form Captcha

    <div class='captcha'>
    <img id='captcha' src='terasconfig/captcha.php' border='0'><a href='JavaScript: captcha();'>
    <img border='0' alt='TerasKreasi' src='folder/refresh.png' align='top'></a>
    </div>