javascript - Prevent multiple clicks and ActiveForm submission in Yii 2.0.10 - Stack Overflow

admin管理员组

文章数量:1426959

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

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

• javascript
• jquery
• yii
• yii2

Share Improve this question Follow asked Jan 13, 2017 at 15:09 Kiran ShakyaKiran Shakya 2,57922 gold badges2828 silver badges3838 bronze badges 4

• I tried to use your code, yii v2.0.10, added it via registerJs in my layout file, the only difference I use yii\bootstrap\ActiveForm instead of yii\widgets\ActiveForm might that be the reason it is working for me ? – Ripper Commented Jan 13, 2017 at 17:15
• @Ripper is it working? do you see the buttons disable after clicking? I am using registerJs too. as for the case of yii\bootstrap\ActiveForm and yii\widgets\ActiveForm, former is enhanced version of later one, so technically that shouldn't make much difference. – Kiran Shakya Commented Jan 14, 2017 at 5:18
• 1 Yes, I see it disabling right after click and form is submitting as normal as I said earlier. – Ripper Commented Jan 14, 2017 at 8:13
• @Ripper thanks for letting me know that new installs work without this issue. – Kiran Shakya Commented Jan 15, 2017 at 11:36

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

It looks like the issue had been taken care of, already.
Those who have installed fresh Yii 2.0.10 via poser 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.

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

Works Like a Charm

I implemented and tested the following extension:

https://github./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();

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'); ?>

本文标签： javascriptPrevent multiple clicks and ActiveForm submission in Yii 2010Stack Overflow