Image captcha in codeigniter and change to next captcha if the captcha is not understand by the user.How can be created it?

Question

How to change current captcha image if user don't understand ?

How to create, validate and save the captcha in database in codeigniter ?

Answer 1

You can use Ajax for Captcha refresh. Call Js Function on Refresh button click

Javascript code

<script type="text/javascript">
    function RefreshSecurityCode(){
        $.getJSON( "<?php echo base_url(); ?>orders/getCaptchImage", function( data ) {}).success(function(data){
            $("#captcha_image").html(data.captcha);
        });
        return !1;
    }
</script>

Controller Functions

 function getCaptchImage(){
        $response['captcha'] = $this->generateCaptcha();

        echo json_encode($response);
        exit;
    }



 function generateCaptcha() {

    //Load Captcha helper
    $this->load->helper('captcha');

        $vals = array(
            'word'       => 'Security Key words',
            'img_path'   => './uploads/captcha/',
            'img_url'    => base_url() . 'captcha/',
            'img_width'  => 200,
            'img_height' => 50,
            'expiration' => 7200,
        );

        /* Generate the captcha */
        $captcha = create_captcha($vals);

        /* Store the captcha value (or 'word') in a session to retrieve later */
        $this->session->set_userdata('captchaWord', $captcha['word']);
        $this->session->set_userdata('captchaImage', $captcha['image']);

        return $captcha['image'];
    }

Views

<form role="form" method="post" action="<?php echo base_url(); ?>submit">
    <div class="form-group">
        <label>Security Code</label><br/>
        <span id="captcha_image"><?php echo $captcha; ?></span>
    </div>
    <div class="form-group">
        <input type="text" name="captcha" id="captcha" class="form-control" placeholder="Please enter code above" required/>
    </div>
    <div class="form-group">
        <button class="btn" data-loading-text="Loading..." onclick="RefreshSecurityCode()"><i class="fa fa-refresh fa-lg"></i> </button>
        <button class="btn btn-danger btn-bg submit" type="submit" data-loading-text="Sending..."><i class="fa fa-envelope fa-lg"></i> Send Message</button>
    </div>
</form>