Reload captcha image on the same page

Question

I have a form with captcha validation that looks like this:

The code of the captcha inside the html form is the following:

<div class="form_title">Enter your captcha code: </div>
<input name="captcha_code" id="captcha-input" type="text" class="demo-input captcha-input" style="height:40px;">

the css calls the php file which generates the code in the form of an image like this

.captcha-input {
    background: #FFF url(./../captcha/captchaImageSource.php) repeat-y left center;
    padding-left: 80px;
}
.demo-input {
    width: 100%;
    border-radius: 5px;
    border: #CCC 1px solid;
}

The captchaImageSource.php generates the image and looks like this

<?php
    namespace abc;
    use abc\Captcha;
    session_start();
    include("captcha.php");
    $captcha = new Captcha();
    $captcha_code = $captcha->getCaptchaCode(6);
    $captcha->setSession('captcha_code', $captcha_code);
    $imageData = $captcha->createCaptchaImage($captcha_code);
    $captcha->renderCaptchaImage($imageData);
?>

I am trying to reload the captcha with a button, e.g if the user cannot read it and wants to try another. I have tried multiple approaches like, calling a javascript or jquery function which triggers the captchaimagesource again like this with javascript

<input type="button" onclick="reloadCaptcha();" id='reload_captcha_button'/>
<script>
function reloadCaptcha(){
document.getElementById("captcha-input").onclick = location.reload;
document.getElementsByClassName("captcha-input").onclick
}
</script>

or like this with jquery:

<a id='reload_captcha_button' href='#'>Refresh captcha image</a>
<script>
$('#reload_captcha_button').click(function(){
        var timestamp = new Date().getTime();
        $('#captcha-input').attr('src','captcha/captchaImageSource.php?'+timestamp)
    })
</script>

I also tried with ajax but the image stays the same. Any ideas how to update the captcha in the same form? Thanks

`location.reload` would reload the whole page, I don't think that is what you want. — CBroe, Jun 26 '23 at 07:03
`$('#captcha-input').attr('src', ...)`- that makes little sense here. An input element could have a `src` attribute, if the input type was `image` - but that is not what you have here. (Plus, an input of type=image is a mere submit button, it does not allow you to enter text.) Your captcha image has been set as a _background_ image for input field via CSS, so _that_ - the styling of the element, the `background-image` property - is what you need to update. — CBroe, Jun 26 '23 at 07:06
What have you tried to resolve the problem? Is this a JS problem, or a PHP problem? — Nico Haase, Jun 26 '23 at 12:15
Thanks for your comments. Actually it was a javascript/ jquery Issue. I needed to grab the correct class and change its .css properties, but by considering sending a new datetime as parameter to the php file which generates the image. If you want I posted the answer below. You can upvote it if you find it useful :) have a nive day — Andy McRae, Jun 26 '23 at 12:19

score 0 · Accepted Answer · answered Jun 26 '23 at 12:13

Ok I found the solution. So, actually I needed

to specify the class instead of the identifier.

$('.captcha-input') instead of $('#captcha-input')
I needed to give the actual date and time to the image so the browser considers it a new resource.

const randomId = new Date().getTime();

and

I needed to use the .css property to change the background image:

$('.captcha-input').css('background','url(captcha/captchaImageSource.php?r='+ randomId + ') repeat-y left center');

The working code is:

<a id='reload' href='#'>Refresh</a>
<script>
    $('#reload').click(function(event){
        event.preventDefault();
        const randomId = new Date().getTime();
        $('.captcha-input').css('background','url(captcha/captchaImageSource.php?r='+ randomId + ') repeat-y left center');
    })
</script>
<input name="captcha_code" id="captcha-input" type="text" class="demo-input captcha-input" style="height:40px;">

Reload captcha image on the same page

1 Answers1