Prevent multiple form submissions

Yii 2.0 General Discussions
1

Hi guys,

I’d like to prevent multiple form submissions. You know when a user clicks multiple time on the submit button.

I want to disable the button on form submit. That’s the easy part.

The problem is to re-enable the button in case of form validation failure so the user can correct his errors and re-submit the form.

I’ve studied the file yii.activeForm.js a lot. I now understand most of it. I could listen to the afterValidate event and re-enable the button if the validation failed. But I’m not sure it’s the right way because if something is listening to the beforeValidate event and return false the afterValidate event will never be triggered so button won’t be re-enabled.

I’ve noticed that the submitForm method calls setSubmitFinalizeDefer which assign yiiSubmitFinalizePromise to the form. Here is the interesting part of the code:




    var setSubmitFinalizeDefer = function($form) {

        submitDefer = $.Deferred();

        $form.data('yiiSubmitFinalizePromise', submitDefer.promise());

    };


    // finalize yii.js $form.submit

    var submitFinalize = function($form) {

        if(submitDefer) {

            submitDefer.resolve();

            submitDefer = undefined;

            $form.removeData('yiiSubmitFinalizePromise');

        }

    };

I think that the right thing to do would be to wait that promise stored in $form.data(‘yiiSubmitFinalizePromise’) get resolved so I could re-enable the submit button.

BUT how do I reach that $form.data(‘yiiSubmitFinalizePromise’)?? It’s only created once the submit button has been clicked. Am I even suppose to use that or it’s for Yii internal use?

Let me know if I over-complicated things and you got simpler/easier/cleaner solution.

Thanks.

2

If you are making client-side validation, you should not have this problem;

If you are making ajax validation, the action should recognize that request is ajax-type and stop executing after validation data;

If you are making direct submit, a new html will be returned;

What is your condition?

3

I’m using client-side validation and no ajax validation.

I’ve tested and I’m able to submit multiple times when clicking fast enough. Same record get inserted more than once in the database.

Any idea?

4

$("#form").on("beforeSubmit.yii", function (e) {

    $("button[type=\"submit\"]").attr("disabled","disabled");


});
5

Well this would probably works 95% of the time, but I don’t think it’s very robust. Let say that there is an ajax validation that takes a few seconds to execute, an anxious user would have plenty of time to click the submit button multiple times.

I would prefer to disable the button when the first click occurs and re-enable it if one of the active form events fails.