I have problem with my refresh captcha button, it just work once when I click the button after I reload the page. I dont know if i wrong or if I missed something else.
I try to refresh the captcha with jquery because more efficiently.
This is piece of my code :
controller
public function refresh_login(){
// Captcha configuration
$config = array(
'img_path' => 'captcha_images/',
'img_url' => base_url().'captcha_images/',
'img_width' => '100',
'img_height' => '30',
'word_length' => '4',
'font_size' => '16'
);
$captcha = create_captcha($config);
// Unset previous captcha and store new captcha word
$this->session->unset_userdata('captchaCode');
$this->session->set_userdata('captchaCode',$captcha['word']);
// Display captcha image
echo $captcha['image'];
}
jquery
$( document ).ready( function () {
var base_url = '<?php echo base_url(); ?>';
$('.reload-captcha').click(function(event){
event.preventDefault();
$.ajax({
url:base_url+'index.php/auth/refresh_login',
success:function(data){
$('.captcha-img').replaceWith(data);
}
});
});
view
<form action="<?php echo base_url(); ?>index.php/auth/login/" id="login-form" method="post">
<div class="form-group has-feedback">
<input type="text" class="form-control" placeholder="Username" id="username" name="username" required>
<span class="glyphicon glyphicon-user form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" id="password" name="password" required>
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="form-group">
<p id="captImg" class="captcha-img"><?php echo $captchaImg; ?></p>
<input type="text" class="form-control" name="captcha" placeholder="Captcha" style="margin-bottom: 5px"/>
<a href="#" class="reload-captcha refreshCaptcha btn btn-info btn-sm" ><i class="glyphicon glyphicon-refresh"></i></a>
</div>
<div class="row">
<!-- /.col -->
<div class="col-xs-8">
<label><a href="#"><u>Forgot your password?</u></a></label>
</div>
<div class="col-xs-4 pull-right">
<button type="submit" class="btn btn-primary btn-block btn-flat">Sign In</button>
</div>
<!-- /.col -->
</div>
</form>