Forms submitted several times

Vote:
 

We have an issue with users submitting the forms multible times. We have implemented a loader as specified here:

https://world.episerver.com/blogs/quan-tran/dates/2019/3/episerver-forms-show-loading-icon/

The issue seem to be that it takes a couple of seconds between "formsSubmitted" event (the loader is turned off) and the redirect to the confirmation page.

Within this period the submit button is enabled and users tend to hit it again....

Does anyone have a good suggestion how to make sure button is not enabed until redirect is done?

#210911
Dec 11, 2019 8:55
Vote:
 

When you have the redirect to the confirmation page, why do you need to turn off the loader? Why not just keep it loading, until the redirect hits?

#210913
Dec 11, 2019 10:32
Mari Jørgensen - Dec 11, 2019 10:44
I've considered that, but not all forms redirect to confirmation page.
Vote:
 

Hi Mari,

You can use  Allow multiple submissions from the same IP/cookie option to stop the multiple submission.

#210914
Dec 11, 2019 10:34
Mari Jørgensen - Dec 11, 2019 10:46
That is a work around, but not solving original issue. User will get an error message when posting 2nd time, which I think is not an ideal solution.
Vote:
 

I think then you can extend the js and add a disabled attribute on the submit button and removed it when form submitted successfully.

// listen to event when form is about submitting
$$epiforms(".EPiServerForms").on("formsStartSubmitting", function (data) {
//var $formContainer = $('#' + data.workingFormInfo.Id);
//$formContainer.addClass("loading");
$body.addClass('loading');
// find the sbumit button here and add disabled attribute.
// ex- $body.find('.submit').attr("disabled","disabled");
});

// listen to event when form is successfully submitted
$$epiforms(".EPiServerForms").on("formsSubmitted", function (data) {
$body.removeClass('loading');
// find the sbumit button here and remove disabled attribute.
});
#210918
Edited, Dec 11, 2019 10:54
Mari Jørgensen - Dec 11, 2019 11:01
That will not help, as Episerver triggers event "formSubmitted" before redirecting starts.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.