Hide menu Last updated: Nov 02 2016
Area: Episerver Add-ons Applies to versions: 2 and higher

Handling events

Note: Episerver Forms is only supported by MVC-based websites and HTML5-compliant browsers.

jQuery clientside events

The following JavaScript code shows how to handle client-side epiforms events in Alloy MVC templates.

    if (typeof $$epiforms !== 'undefined') {
        $$epiforms(document).ready(function myfunction() {
            console.log('listen to event');
            $$epiforms(".EPiServerForms").on("formsNavigationNextStep formsNavigationPrevStep formsSetupCompleted formsReset formsStartSubmitting formsSubmitted formsSubmittedError formsNavigateToStep formsStepValidating", function (event, param1, param2) {
                console.log($(this).get(0), event);
            });
        });
    }

The following JavaScript code shows how to handle client-side epiforms events in Alloy MVC templates. For a QuickSilver site, put the following script before @Html.RequiredClientResources("Footer").

if (typeof $$epiforms !== 'undefined') {
console.log('listen to event');
$$epiforms(".EPiServerForms").on("formsLoadExternalScripts formsLoadExternalCss", function (event, param1, param2) {
console.log($(this).get(0), event);
}); }

The following jQuery event objects are notification-only:

  • type. Type of event.
  • working form DOM element. The DOM element raises the event.
  • workingFormInfo. Contains meta-information of current Episerver Forms.
  • formData. In some submitting-related events, this property contains the standard FormData object of the submission.

.NET events

Form submissions (and form step submissions) must result in events.

  • FormsStructureChange
  • FormsStepSubmitted
  • FormsSubmissionFinalized
  • FormsSubmitting

The following example code catches server-side events in InitializationModule:

// get the Forms Event Manager to listen to its events
var formsEvents = ServiceLocator.Current.GetInstance<FormsEvents>();
formsEvents.FormsStructureChange += OnStructureChange;
formsEvents.FormsSubmitting += OnSubmitting1;
formsEvents.FormsSubmitting += OnSubmitting2;
formsEvents.FormsStepSubmitted += OnStepSubmit;
formsEvents.FormsSubmissionFinalized += OnFormFinalized;

With FormsSubmitting, FormsStepSubmitted, and FormsSubmissionFinalized events, you can cast the eventArgs to FormsSubmittingEventArgs, where you can get information from SubmissionData (having SubmissionData.Data as IDictionary<string, object>) and the FormSubmissionId.

Comments

FYI: In vanilla 4.1.0, only the "formsStepValidating" event seems to be thrown.

I used the snippet above, put into the  _Root.cshtml of AlloyMVC, and catched all events

Hello,

How do I prevent scroll up to top of the page when the visitor haven't fill finish all requried form property in epi forms?

Best regards,

/Katharina

Hello Katharina,

  • When navigating to next/prev steps, Forms scrolls to top of it. From v4.6.1, you can alter the epi.EPiServer.Forms.scrollToTheTopOfForm() function if you don't want it.
  • When validating, Forms scrolls to the first .Form__Element.ValidationFail. We will make this behaviour public later (for overriding).