Refresh captcha image using jQuery in Codeigniter
Hi, how can you do the refresh an image captcha generated by jQuery in PHP? Everyone knows that a captcha is a random code generated using some algorithm. We will use random function in our code and on our website or a programming project.
In this tutorial, I will explain the refresh captcha image using jQuery, because many people have faced in this problem. They are asked someone that they have the problem with refresh captcha button. I solve this problem in Codeigniter.
I am working on a project with Codeigniter framework, this time I see this problem and I am trying to solve it. So as a solution to it you can refresh the captcha image using few lines of jQuery code, which code goes as below.
View Page:
<form action="<?php echo base_url(); ?>index.php/auth/sign_in/" id="login-form" method="post"> <div class="form-group has-feedback"> <input type="text" class="form-control" placeholder="Enter Username" id="user_name" name="user_name" required> </div> <div class="form-group has-feedback"> <input type="password" class="form-control" placeholder="Enter Password" id="pwd" name="pwd" required> </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>
jQuery:
<script> $( 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_captcha', dataType: "text", cache:false, success:function(data){ $('.captcha-img').attr("src", data); } }); }); }); </script>
Controller:
<?php public function refresh_captcha(){ // 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']; } ?>
I think it will be helpful for you. you can apply the example code in your work project or on the PHP website. If you faced any kind of problem so, don’t lose your time comment me. I will try best to solve your problem.
You’ll love it very well that the DataInFlow is a platform, where you can the get text tutorial and video tutorial of a different kind of programming language like PHP, HTML, Javascript, Jquery, CSS3 etc. If you want to touch us so you are always welcome.
Are you work with jQuery and as a developer, you know that the jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. It is free, open-source software using the permissive MIT License. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin. It’s well and good news for a developer that jQuery done the