Loading indicator in yii form submit

Question

In yii form submit i would like to add a loading indicator till the form submission. Now the form contain file field and can't use ajaxsubmit button. How can i add loading indicator in normal form submit button? Thanks

form code

 <div class="form">

<?php $form=$this->beginWidget('CActiveForm', array(
    'id'=>'master-form',
    'enableAjaxValidation'=>false,
         'htmlOptions' => array('enctype' => 'multipart/form-data'),
)); ?>

    <p class="note">Fields with <span class="required">*</span> are required.</p>
 <div id="AjaxLoader" style="display: none"><img src="<?php echo Yii::app()->request->baseUrl; ?>/images/spinner.gif"></img></div>
 <div id="ajaxs"></div>
    <?php //echo $form->errorSummary($model); ?>

        <div class="row">
        <?php echo $form->labelEx($model,'type'); ?>
            <div id="select">
                    <?php //echo $form->textField($model,'type');
                      echo $form->dropDownList($model,'type',array('1'=>'one','2'=>'two','3'=>'three','4'=>'four','5'=>'five'),array('empty'=>'Select'));
                ?></div>
        <?php echo $form->error($model,'type'); ?>
    </div>

    <div class="row">
        <?php echo $form->labelEx($model,'name'); ?>
        <?php echo $form->fileField($model,'name',array('size'=>60,'maxlength'=>100)); ?>
        <?php echo $form->error($model,'name'); ?>
    </div>


    <div class="btn">
        <?php echo CHtml::submitButton('Submit',array(
'onSubmit'=>'js:function(){$("#ajaxs").addClass("loading");}',
)); ?>
    </div>

<?php $this->endWidget(); ?>

</div><!-- form -->

Manquer · Answer 1 · 2014-01-23T05:56:47.770

0

You can use just add extra js to your onSubmit HTML attribute something like

echo CHtml::submitButton('your-submit-label',array(
'onSubmit'=>'js:function(){$(#div-where-loading-should-show).addClass("loading");}',
));

you need to define the class in your css and also save a suitable loading gif file in the corresponding directory something like this ( define it in your main css file so you can use everywhere

<style>
 .loading{
    background: url(loading.gif) no-repeat;
 }
</style>

You also need the actual a loading gif file. There are plenty available https://www.google.co.in/search?q=loading+gif, save the one you like in the same folder as your css file( or change the path in the background attribute to the place you saved)

I am assuming here that the form leads to another page so the loading gif will be automatically taken care of once upload is complete.

edited Jan 23 '14 at 05:56

answered Jan 23 '14 at 04:45

Manquer

7,390
8
42
69

I i want to show that gif on submit click. Now it not showing the loading indicator. – user2198047 Jan 23 '14 at 04:54
can you add some of your view code to your question, difficult to figure out what is going wrong otherwise – Manquer Jan 23 '14 at 05:26
I meant I have added more info to the answer, how it helps – Manquer Jan 23 '14 at 06:22

score 0 · Answer 2 · answered Oct 18 '21 at 10:43

Simplest way is to add following code in your main custom js file, so that it is applied to all form submits and not just one you want, this also prevents form to get submitted multiple times and also disables the save, cancel etc. buttons, please change the class names as required or remove these as required

$('body').on('submit', 'form', function() {
        //Disable all the action buttons so as to prevent double submit of same data
        $('.save_draft').off('click');
        $('.save_draft').attr('disabled', true);
        $('.save_draft').css('pointer-events', 'none');
        $('.save_submit').off('click');
        $('.save_submit').attr('disabled', true);
        $('.save_submit').css('pointer-events', 'none');
        $('.btn-cancel').off('click');
        $('.btn-cancel').attr('disabled', true);
        $('.btn-cancel').css('pointer-events', 'none');
        showLoader();
        //Following code disallows resubmit of the form again even user click on the button again
        $(this).submit(function() {
            return false;
        });
        return true;
    });

Loading indicator in yii form submit

2 Answers2