Refresh Reload Captcha Image dengan Javascript

Posted in Javascript Jquery Life at 13 Juli 2017 With 0 Comments

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 :

refresh reload captcha image

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>

Artikel Rekomendasi

Artikel Terkait

Diskusi

wa