How To Add Spinner In Cactiveform ?

Yii 1.1 General Discussion
1

I have this form whereby,

  • it has an input field + jQuery datepicker ( Start Date )

  • it has an input field + jQuery datepicker ( End Date )

  • it has a dropdown to select a date range of either (last month, 2eeks ago, 1 week ago, yesterday )

  • it has a submit button , clear input field buttons.

The form is not using ajax, the validation works fine and error messages in red font appears when the submit button was clicked and there were no values selected for the 3 input fields.

the form takes awhile to finish when a long date range was selected , let’s say 1 month.

my problem is, how to show the spinner image while the form is still processing the data, and hide the spinner

once the processing of data is done.

this is the beginning of my CActiveForm




    $form = $this->beginWidget('CActiveForm', array(

        'action' => Yii::app()->createUrl($this->route),

        'method' => 'post',

        'htmlOptions' => array('id' => "searchForm"),		

            ));

this is the hidden spinner




<div align="center" id="loading" style="display:none"><img src="<?php echo Yii::app()->params['siteUrl']; ?>/images/images/loader.gif" alt="" />Downloading!</div>

and this is the supposedly script that is showing and hiding that spinner




$('input[name=yt0]').click(function(){

  $('#loading').show();

 });

the problem with that is, the spinner keeps spinning even after the file has been downloaded…so how

to only show the spinner while the data is processing ?