Question

在yii表单提交中，我想在表单提交之前添加一个加载指示符。现在表单包含文件字段，不能使用ajaxsubmit按钮。如何在正常表单提交按钮中添加加载指示器？感谢

表单代码

 <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 -->

Answer 1

您只需在onSubmit HTML属性中添加额外的js，例如

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

你需要在你的CSS中定义类，并在相应的目录中保存一个合适的加载gif文件（在你的主css文件中定义，以便你可以在任何地方使用

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

您还需要实际的加载gif文件。有足够的可用https://www.google.co.in/search?q=loading+gif，将您喜欢的文件保存在与css文件相同的文件夹中（或将背景属性中的路径更改为您保存的位置）

我在这里假设表单会导致另一个页面，因此一旦上传完成，加载gif将自动处理。

以yii格式提交加载指标

1 个答案: