Refresh image captcha

Question

I have a php script that generates a png image with captcha code as image text.

session_start(); $captchanumber = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyz'; $captchanumber = substr(str_shuffle($captchanumber), 0, 8); $_SESSION["code"] = $captchanumber; $image = imagecreatefromjpeg("cap.jpg"); $black = imagecolorallocate($image, 160, 160, 160); $font = '../assets/fonts/OpenSans-Regular.ttf'; imagettftext($image, 20, 0, 35, 27, $black, $font, $captchanumber); header('Content-type: image/png'); imagepng($image); imagedestroy($image); 

I want to reload the image via jQuery or JavaScript, so I use something like this:

 $(document).ready(function(e) { $('.captcha').click(function(){ alert('yolo'); var id = Math.random(); $(".captcha").replaceWith('<img class="captcha" src="img/captcha.php?id='+id+'" />'); id =''; }); }); 

field:

 <img class="captcha" src="img/captcha.php"> 

As a first attempt, it works, but after that, if I click on the field again, it will no longer work, and I do not know why.

Answer 1

You replace the dom element with a new element, it will destroy all attached event handlers.

Method 1: You can solve this problem by using event delegation to listen for dynamically added elements.

 $(document).ready(function(e) { $('body').on('click', '.captcha', function(){ alert('yolo'); var id = Math.random(); $(this).replaceWith('<img class="captcha" src="img/captcha.php?id='+id+'" />'); }); }); 

 $(document).ready(function(e) { $('body').on('click', '.captcha', function() { alert('yolo'); var id = Math.random(); $(this).replaceWith('<img class="captcha" src="img/captcha.php?id=' + id + '" />'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img class="captcha" src="img/captcha.php"> 

---

Method 2: Instead of replacing the entire element, simply update the img src attribute with the new URL.

 $(document).ready(function(e) { $('.captcha').click(function(){ alert('yolo'); var id = Math.random(); $(this).attr('src', 'img/captcha.php?id='+id); }); }); 

 $(document).ready(function(e) { $('.captcha').click(function() { alert('yolo'); var id = Math.random(); $(this).attr('src', 'img/captcha.php?id=' + id); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img class="captcha" src="img/captcha.php"> 

---

Method 3: You can also do this using pure JavaScript with the same logic as the previous one.

 document.querySelector('.captcha').addEventListener('click', function() { alert('yolo'); var id = Math.random(); this.setAttribute('src', 'img/captcha.php?id=' + id); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img class="captcha" src="img/captcha.php"> 

---

Method 4: Configure the onClick attribute for the element and handle the click event with pure JavaScript, where you need to pass this as an argument to reference the element.

 function captcha(ele) { alert('yolo'); var id = Math.random(); ele.setAttribute('src', 'img/captcha.php?id=' + id); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img class="captcha" onclick="captcha(this)" src="img/captcha.php"> 

Answer 2

The reason your code works only once is because the source element with the captcha class is replaced and this click is no longer detected .

Decision

A clean solution would be to replace the src image instead of the full element.

Working example

Jquery

  $(document).ready(function () { $("#changeThis").click( function () { changeImage(); } ); }); function changeImage() { //we want whole numbers not numbers with dots here for cleaner urls var id = Math.floor((Math.random() * 1000) + 1); $('#changeThis').attr("src",'img/captcha.php?id='+id); //Not sure why you want to empty id though. id =''; } 

Or in oneline:

 $("#changeThis").click($('#changeThis').attr("src",'img/captcha.php?id='+Math.floor((Math.random() * 1000) + 1))); 

HTML For unique elements, use the syntax id = "instead of class =" ", a class is used when several elements can have the same class, id is the identifier for a unique element.

 <img class="captcha" id="changeThis" src="img/captcha.php"> 

Answer 3

There may be a problem with event binding with elements replacing your code. Instead of delegating document binding :

 // Replace $(document).ready(function(e) { $('.captcha').click(function(){ // With $(document).ready(function(e) { $('.captcha').on('click', document, function(){ 

Answer 4

Good. The problem is that you are declaring the id variable and you are trying to reuse it in the second function call when the id variable already exists, so it will be ignored and an empty string will be used instead.

Try moving var id =''; from the function and use id = Math.random() in the function.

Answer 5

This is a delegation problem, because you inserted a new element, so the event listener is deleted, there are many solutions:

Solution 1:

Use snap binding

 function rebindCaptcha() { var id = Math.random(); $(".captcha").replaceWith('<img onclick="rebindCaptcha()" class="captcha" src="img/captcha.php?id='+id+'" />'); } 

Solution 2:

Save your element in dom and just change the src attribute:

 $(document).ready(function(e) { $('.captcha').click(function(){ var id = Math.random(); this.src = 'img/captcha.php?id='+id+'; id =''; }); }); 

Just for your reference, jQuery delegation can be done with:

 $(".parent .child").on("event",function(){/*your handler here*/}) 

or

 $(".parent").on("event",".child",function(){/*your handler here*/}) 

Usually choose a parent to make sure that he will always exist in your home, and always attach a listener after the document is ready.

Answer 6

This works for me as I say you should use id in javascript to change things

 // reload is your button reload and captcha must be a div who surrounding the captcha img document.querySelector('#reload').addEventListener('click', function(e){ var reload = document.getElementById('captcha') reload.innerHTML = "your new logic" }) 

//reload.innerHTML will be the new html captcha code

Answer 7

To download the image with the new code, you can use the version option for captcha.php. See the following code.

 <img class="captcha" id="secure_code" src="img/captcha.php"> <a href="#" id="reload_captcha">Reload</a> 

 $(document).ready(function(e) { $('#relaod_captcha').click(function(e) { e.preventDefault() ; $('#secure_code').attr('src', "img/captcha.php?ver="+Math.random()) ; }) ; }) ; 

I want this to help.

Answer 8

enter image description here

PLEASE SEND A CAPTCHA JAVASCRIPT DECLARATION FOR THIS CAPTCH TYPE. I LOST THE LOT OF SCRIPT, BUT I DIDN’T SHARE IT