Prevent multiple clicks and ActiveForm submission

Question

I use ActiveForms often and find it handy as it includes client-side validation scripts yii.js and yii.activeForm.js. It normally takes care of model rules and basic validation on its own.

Until Yii 2.0.9:
We could use following script to prevent multiple form submission due to rapid button clicks:

$('form').submit(function(){
    $(this).find('button[type!="button"],input[type="submit"]').attr("disabled",true);
    setTimeout(function(){
        $('form .has-error').each(function(index, element) {
            $(this).parents("form:first").find(":submit").removeAttr("disabled");
        });
    },1000);
});

But,
Current Yii 2.0.10 release brought some changes and fails above script. Now, it will not submit the form if above code executes.
It has also been discussed earlier here and has been identified as bug.
Since, yii.js had two changes:

1. Bug #10358: Fixed race condition in yii.js AJAX prefilter (silverfire)
2. Enh #12580: Make yii.js comply with strict and non-strict javascript mode to allow concatenation with external code (mikehaertl)

and, yii.activeForm.js had four changes:

1. Bug #10681: Reverted fix of beforeValidate event calling in yii.activeForm.js (silverfire)
2. Enh #12376: Added parameter to yii.activeForm.js validate() method to be able to force validation (DrDeath72)
3. Enh #12499: When AJAX validation in enabled, yii.activeForm.js will run it forcefully on form submit to display all possible errors (silverfire)
4. Enh #12744: Added afterInit event to yii.activeForm.js (werew01f)

Can they be replaced with oder js files from v2.0.9?

Will replacing js files cause breakdown and unexpected behaviours?

Are there any better solution to prevent multiple submissions?

Answer 1

Recently got some bug that my forms we not submiting, and button stayed disabled, so I changed it to this. Mostly posting it here for my future reference so I can find it out fast :D

<?php $this->registerJs("
    $(function () {
        $('body').on('submit', 'form', function() {
            $(this).find('button[type!=\"button\"],input[type=\"submit\"]').attr('disabled',true);
            setTimeout(function(){
                $(this).find('.has-error').each(function(index, element) {
                    $(this).parents('form:first').find(':submit').removeAttr('disabled');
                });
            },1000);
        });
    });
", View::POS_END, 'prevent-double-form-submit'); ?>

Answer 2

I suggest you to use uiBlocking to prevent multiple click or entries. Here is complte guide how to block ui while there is some task in progress. http://malsup.com/jquery/block/

Answer 3

It looks like the issue had been taken care of, already.
Those who have installed fresh Yii 2.0.10 via composer will not have this issue; while, those who downloaded an archived file from 'Install from an Archive File' section may still have this issue since they might not have updated the archive files.

If you are facing this specific issue, then all you have to do is replace a specific file framework/assets/yii.activeForm.js from the github source. In case of local copy, this file can be located at vendor\yiisoft\yii2\assets\yii.activeForm.js.

Answer 4

Works Like a Charm

I implemented and tested the following extension:

https://github.com/Faryshta/yii2-disable-submit-buttons

Composer Require

"faryshta/yii2-disable-submit-buttons": "*"

Register Asset Globaly

class AppAsset extends yii\web\AssetBundle
{
    public $depends = [
        'faryshta\\assets\\ActiveFormDisableSubmitButtonsAsset',
        // other dependencies
    ];
}

Usage

$form = ActiveForm::begin([
    'options' => ['class' => 'disable-submit-buttons'],
    // other configurations
]);

    // inputs

    Html::submitButton('Submit', [
        // optional, will show the value of `data-disabled-text` attribute
        // while handling the validation and submit
        'data' => ['disabled-text' => 'Please Wait']
    ])

$form->end();