How to reload Zend Captcha image on click refresh button?

Question

I apply a zend captcha in my php page now i require to add captcha reload button. Please give answer according to zend.

Answer 1

1. In config/autoload/global.php add the following

   'view_manager' => array(
       'strategies' => array(
           'ViewJsonStrategy','Zend\View\Strategy\PhpRendererStrategy'
       ),
   ),
   

2. in YourModule/src/YourModule create a new folder Ajax

3. Inside Yourmodule/Ajax create a file AjaxController.php

   namespace YourModule\Ajax;
   
   use Zend\Mvc\Controller\AbstractActionController;
   use Zend\View\Model\JsonModel;
   use YourModule\Forms\SignupForm;
   
   class AjaxController extends AbstractActionController
   {          
       public function refreshSignupCaptchaAction(){
           $form = new SignupForm();
           $captcha = $form->get('captcha')->getCaptcha();             
           $data = array();                
           $data['id']  = $captcha->generate();
           $data['src'] = $captcha->getImgUrl().$captcha->getId().$captcha->getSuffix();
           return new JsonModel($data);
       }
   }
   

4. Add route inside module.config.php

   'yourmodule-ajax' =>array(
           'type' => 'segment',
           'options' => array(
           'route' => '/yourmodule/ajax/:action',
               'constraints' => array(    
                   'action' => '\w+',
               ),
               'defaults' => array(
                   'controller' => 'YourModule\Ajax\AjaxController',
               )                  
           ),
       ),
   

5. last in your template, I assume you are using jquery

   <div class="form-group">
       <div id="captcha" class="control-group <?php echo count($form->get('captcha')->getMessages()) > 0 ? 'has-error' : '' ?>">
           <?php echo $this->formLabel($form->get('captcha')); ?>
           <div class="col-xs-12 col-sm-6">
               <a id="refreshcaptcha" class="btn btn-default pull-right">Refresh</a>
               <?php echo $this->formElement($form->get('captcha')); ?>
               <?php echo $this->formElementErrors($form->get('captcha')); ?>
           </div>
       </div>
   </div>
   
   <script type="text/javascript">
   $(function(){
   
       $('#refreshcaptcha').click(function() { 
           $.ajax({ 
               url: '<?php echo $this->url('yourmodule-ajax', array('action'=>'refreshSignupCaptcha')) ?>', 
               dataType:'json', 
               success: function(data) { 
                   $('#captcha img').attr('src', data.src); 
                   $('#captcha input[type="hidden"]').attr('value', data.id); 
                   $('#captcha input[type="text"]').focus(); 
               }
           }); 
           return false;
       });
   });
   </script>
   

Answer 2

@Benjamin Cremer thanks for the code, works like charm :) after reading this I did it using jquery.

$(document).ready(function() {
    $('#refreshcaptcha').click(function() {
        $.ajax({
            url: '/contact/refresh',
            dataType:'json',
            success: function(data) {
                $('#contactForm img').attr('src',data.src);
                $('#captcha-id').attr('value',data.id);
            }
        });
    });
});

Answer 3

@user236501 Actually it can be any type of Zend Form Element (for example Button). You're even able to put clickable refresh link as Zend_Form_Element_Captcha description option like this:

        $captcha = new Zend_Form_Element_Captcha('captcha', array(
            'label' => 'Some text...',
            'captcha' => array(
                'captcha' => 'Image',
                'wordLen' => 6,
                'timeout' => 300,
                'font' => './fonts/Arial.ttf',
                'imgDir' => './captcha/',
                'imgUrl' => 'http://some_host/captcha/'
            ),
            'description' => '<div id="refreshcaptcha">Refresh Captcha Image</div>'
        ));

but in that case Description decorator's options should be modified, for example:

        $this->getElement('captcha')->getDecorator('Description')->setOptions(array(
            'escape'        => false,
            'style'         => 'cursor: pointer; color: #ED1C24',
            'tag'           => 'div'
        ));

It can be done in form's init() method. Sorry for my english. Btw I'm not sure if I put my comment in the right place ;)

Answer 4

Just two quick snippets but I think you will get the idea. Adjust the element name and the selectors for your needs.

In your controller add a method to generate a fresh captcha

public function refreshAction()
{
    $form = new Form_Contact();
    $captcha = $form->getElement('captcha')->getCaptcha();

    $data = array();

    $data['id']  = $captcha->generate();
    $data['src'] = $captcha->getImgUrl() .
                   $captcha->getId() .
                   $captcha->getSuffix();

   $this->_helper->json($data);
}

In your view script (I'm using mootools for the ajax-request)

document.addEvent('domready', function() {
     $$('#contactForm img').addEvent('click', function() {
        var jsonRequest = new Request.JSON({
            url: "<?= $this->url(array('controller' => 'contact', 'action' => 'refresh'), 'default', false) ?>",
            onSuccess: function(captcha) {
                $('captcha-id').set('value', captcha.id);
                $$('#contactForm img').set('src', captcha.src);
            }
        }).get();
    });
});

Edit: Added pahan's jquery

$(document).ready(function() {
    $('#refreshcaptcha').click(function() { 
        $.ajax({ 
            url: '/contact/refresh', 
            dataType:'json', 
            success: function(data) { 
                $('#contactForm img').attr('src', data.src); 
                $('#captcha-id').attr('value', data.id); 
            }
        }); 
    }); 
});