How to reload captcha on form submit via Ajax?

Question

I am submitting forms using Ajax. I am using captcha on my form and first time it is working perfect when I submit form without any validation error. Sometimes servers returns some validation errors and does not submit form. At this point I need to refresh the captcha image without reloading whole page.

Captcha Code in Zend Form:

$captcha= new Zend_Form_Element_Captcha('captcha', array(
                'id'=>'captcha',
                'title'=>'Security Check.',
                'captcha'  => array(
                'captcha'  => 'Image',
                'required' => true,
                'font'     => '../public/fonts/ARIALN.TTF',
                'wordlen'  => '6',
                'width'    => '200',
                'height'   => '50',
                'imgdir'   => '../public/images/captcha/',
                'imgurl'   => '/images/captcha/'
                )));

jQuery for form submission:

jQuery('form.AjaxForm').submit( function() {

    $.ajax({
        url     : $(this).attr('action'),
        type    : $(this).attr('method'),
        dataType: 'json',
        data    : $(this).serialize(),
        success : function( data ) {
                      // reload captcha here
                      alert('Success'); 
                  },
        error   : function( xhr, err ) {
                      // reload captcha here
                      alert('Error');
                }
    });

    return false;
}); 

How to reload captcha on form submit ?

Thanks

Answer 1

I don't have an example at the moment, but I looked at how the captcha is generated in the form, and I think what you may have to do is return a new html code for the captcha form element in your json response if the form failed validation.

The captcha element uses a reference to an image that gets created and stored in the images folder and the form html uses an id associated with that image.

If you make a call to $yourForm->getElement('captcha')->render(); and add that to the json response, you can update your page with the new captcha element. The only issue is that calling render with the default decorators may return the <dt> and <dd> tags as well and you will somehow have to replace that with javascript in the html. If you are using custom decorators then it may be different for you, or you could render only the image and hidden fields and not the label and insert that into a div tag.

// in your controller where the form was validated
$form = new Form();
if (form->isValid($this->getRequest()->getPost()) == false) {
    $captcha = $form->getElement('captcha')->render();
    $json['captchahtml'] = $captcha;
}

$this->view->json = json_encode($json);

Then in your jquery success callback, check to see if the form failed validation and update the captcha html.

Hope that helps.