onoffice-prevent-double-form-submission.js

[fredericalpers]

Current state

The onoffice-prevent-double-form-submission.js script queries the class .submit_button and is then supposed to prevent the form from being submitted multiple times by setting the button to disabled.

However the submit button (if reCAPTCHA is not used) does not have the class .submit_button and is therefore not disabled. If you add the class to the button, the form cannot be submitted. The form is not submitted prior to the button being disabled.

Desired state

The javascript needs to be revised and improved so that submitting continues to be functional while multiple submissions are prevented

[fredericalpers]

@dai-eastgate @yeneastgate please try to fix this during ramp up :)

[yeneastgate]

@fredericalpers I would like to confirm some points with you:

However the submit button (if reCAPTCHA is not used) does not have the class .submit_button and is therefore not disabled. If you add the class to the button, the form cannot be submitted. The form is not submitted prior to the button being disabled.

Case 1: When not using reCAPTCHA I don't use script queries in the ".submit_button" class in the "onoffice-prevent-double-form-submission.js" to prevent the form from being submitted multiple times by setting the button to disabled. => I use this logic

$(formElement).on('submit', function (event) {
        if (submitted) {
            event.preventDefault();
        } else {
            submitted = true;
        }
    });

https://github.com/onOffice-Web-Org/oo-wp-plugin/assets/104892108/a5f9489f-cef4-41d5-bcf6-27b4d461bdf7

=> You don't need to add the ".submit_button" class to the "submit button". But we can still prevent the form from being submitted multiple times. => This issue #651 does not exist in the master branch.

Do you want to use script queries in the ".submit_button" class in the "onoffice-prevent-double-form-submission.js" to prevent the form from being submitted multiple when not using reCAPTCHA?

[yeneastgate]

@fredericalpers Case 2: Using reCAPTCHA I use script queries in the ".submit_button" class in the "onoffice-prevent-double-form-submission.js" to prevent the form from being submitted multiple times by setting the button to disabled. => I use this logic

if (submitButton.length !== 0) {
                submitButton.on('click', function () {
                    if (formElement.checkValidity()) {
                        submitButton.prop('disabled', true);
                    }
                });
            }

However, here there are 2 small cases

1. When a form does not have a "required field": The "Prevent the form from being submitted multiple times" feature works fine.

https://github.com/onOffice-Web-Org/oo-wp-plugin/assets/104892108/6355c171-30d0-47dd-8068-6a3a8dfad5cd

2. When a form has a "required field": I found an error below:

https://github.com/onOffice-Web-Org/oo-wp-plugin/assets/104892108/d662bf6f-b185-495c-ac5b-00d0e42d6918

Step 1: If you don't enter the value for the "required field" => the submit button is enabled. step 2: After doing step 1, I enter a value for the "required field" => the submit button is disabled. => I have created a hotfix for this bug and here is my video test (you can review it in branch 41389-hotfix-cannot-submit-with-recaptcha)

https://github.com/onOffice-Web-Org/oo-wp-plugin/assets/104892108/d16ac38a-6070-42b1-b174-86e5de8ad68c

Please confirm the above information and give me your opinion

[fredericalpers]

@yeneastgate thank you for clarifying. :)

For case 1 please also try to implement setting the button to disabled as well . This is so that the user gets a visual signal, that the form can not be send again.

For case 2, thank you for creating the hotfix. We will review it asap :)

[yeneastgate]

For case 1 please also try to implement setting the button to disabled as well . This is so that the user gets a visual signal, that the form can not be send again.

@fredericalpers Do you want me to fix case 1 in PR 41389-hotfix-cannot-submit-with-recaptcha or create a new PR to fix it?

[fredericalpers]

@dai-eastgate @yeneastgate please go ahead and create a new PR :)

[yeneastgate]

@fredericalpers I created PR #658 for case 1. Please take a look at my video demo and let me know your opinions. Thanks!

https://github.com/onOffice-Web-Org/oo-wp-plugin/assets/104892108/268b1ff6-ff0b-427a-9ca1-2ab24a1eee03

[yeneastgate]

@fredericalpers I created PR #659 for case 2.

https://github.com/onOffice-Web-Org/oo-wp-plugin/assets/104892108/42b9e9cf-9f34-4361-aa93-76284db198a1