创建刷新验证码的按钮

Question

i created a captcha based on a tutorial. the tutorial uses a session variable in the main page and a separate php file(for creating the captcha image) to create the captcha. the tutorial uses rand() to create the code them trim it using substr(). this is the link of the tutorial.

to check the captcha,the tutorial uses request which i don't really understand since i am new to coding in php, javascript and jquery. so, what i did is i've created a function that appends elements of an array then put it in a session variable. then in the separate php file, i removed the rand() and the substr() and used the session variable as the code. i am also saving the value of the code from my array in the data-attr-captcha of the image which is used for validation.

now, i want to create a "refresh captcha button" but i couldn't figure out what to do. do i need to do it on php or on javascript? i want to do it on my own and not relying on reCaptcha.

its so frustrating that i can't add anything in the separate php file

here my relevant php code:

$_SESSION["security_code"] = createCaptchaImg();

function createCaptchaImg(){
    $strArr = array("1","2","3","4","5","6",
                    "7","8","9","0","a","b",
                    "c","d","e","f","g","h",
                    "i","j","k","l","m","n",
                    "o","p","q","r","s","t",
                    "u","v","w","x","y","z");
    $captchaLen = 5;
    for($x = 0; $x < $captchaLen; $x++){
        $y = $strArr[rand(0, sizeOf($strArr))];
        $captchaTxt .= $y;

    }

    return $captchaTxt;
}

the separate php file:

<?php
//Start the session so we can store what the security code actually is
session_start();
//Send a generated image to the browser 
create_image(); 
exit(); 

function create_image(){

    $security_code = $_SESSION["security_code"];

    //Set the image width and height 
    $width = 100; 
    $height = 20;  

    //Create the image resource 
    $image = ImageCreate($width, $height);  

    //We are making three colors, white, black and gray 
    $white = ImageColorAllocate($image, 255, 255, 255); 
    $black = ImageColorAllocate($image, 0, 0, 0); 
    $grey = ImageColorAllocate($image, 204, 204, 204); 

    //Make the background black 
    ImageFill($image, 0, 0, $black); 

    //Add randomly generated string in white to the image
    ImageString($image, 60 , 30, 3, $security_code, $white); 

    //Throw in some lines to make it a little bit harder for any bots to break 
    //ImageRectangle($image, 0, 0, $width-1, $height-1,$grey); 
    imageline($image, 0, $height/2, $width, $height/2, $grey);
    imageline($image, $width/2, 0, $width/2, $height, $grey);

    //Tell the browser what kind of file is come in 
    header("Content-Type: image/jpeg");

    //Output the newly created image in jpeg format 
    ImageJpeg($image);

    //Free up resources
    ImageDestroy($image);
}
function createCaptchaImg(){
    $strArr = array("1","2","3","4","5","6",
                    "7","8","9","0","a","b",
                    "c","d","e","f","g","h",
                    "i","j","k","l","m","n",
                    "o","p","q","r","s","t",
                    "u","v","w","x","y","z");
    $captchaLen = 5;
    for($x = 0; $x < $captchaLen; $x++){
        $y = $strArr[rand(0, sizeOf($strArr))];
        $captchaTxt .= $y;

    }

    return $captchaTxt;
}

?>

the image and the refresh button:

<div class="form-group">
        <label for="regCaptchaImg" class="col-lg-2 col-lg-offset-3 col-md-2 col-md-offset-3 col-sm-2 col-sm-offset-3 fsForm text-right"  id="regContCaptchaVal">Captcha Image</label>
        <div id="regContCaptchaImg" class="col-lg-3 col-md-3 col-sm-3 fcBlack">
            <img class="ll-error-form"  data-attr-captcha="<?php echo $_SESSION["security_code"];?>" id="regCaptchaImg2" name="regCaptchaImg2" src="cms/createCaptchaImg.php">
            <input type="button" src="cms/refresh.png" id="captchaRefresh" style="" onclick="" class="col-lg-3 col-md-3 col-sm-3 bRxSi">
        </div>
    </div>
    <div class="form-group">
        <label for="regCaptchaCode" class="col-lg-2 col-lg-offset-3 col-md-2 col-md-offset-3 col-sm-2 col-sm-offset-3 fsForm text-right"  id="regLblCaptcha">Captcha Code</label>
        <div id="regContCaptchaCode" class="col-lg-3 col-md-3 col-sm-3 fcBlack"> 
            <input name="regCaptchaCode" id="regCaptchaCode" type="text" class="form-control-c ll-error-form bRxSi" required>
        </div>
    </div>   

Answer 1

You will need a JavaScript (and in your case, jQuery) function that does two things:

1. Replaces the current image with a new image.
2. Replaces the data-attr-captcha attribute.

To accomplish this, the refresh button should make a request that clears your current $_SESSION['security_code']. If this request is successful, then the jQuery should trigger a HTTP request to replace the image.

I don't have your full codebase, but I'll give you a general example.

$(".captchaRefresh").on('click', function(event) {
    $.ajax("cms/new-captcha.php").done(function(data, textStatus, jqXHR) {
        $("#regCaptchaImg2")
            // Replace old captcha code.
            .attr('data-attr-captcha', data)
            // Reload captcha image.
            .attr('src', "cms/createCaptchaImg.php?code=" + data);
    });
});

Your cms/new-captcha.php file should do something like this.

$_SESSION["security_code"] = createCaptchaImg();
echo $_SESSION["security_code"];

The .on('click') calls to cms/new-captcha.php which creates a new captcha code and stores it to the session. It echos the new code, which is received by the JavaScript as data, and then set to the attribute. jQuery will then also reload the captcha image. The ?code= request parameter is extraneous, I'm only adding that so that the browser sees the URL has changed. There are other ways of accomplishing that, but I see that as the simplest method.

Happy coding.