Submit forms using AJAX call

You can submit forms using an AJAX call. This way, you optimize performance, reduce traffic and server load. You do this by implementing and registering a new form submit handler. You then enable the AJAX submit functionality in the Form widget. For more information, see Form widget.

In addition, after you enable your new route form handler, you can subscribe via the EventHub to the events related to the AJAX submit call. For more information, see For developers: AJAX forms events.

PREREQUISITES: The following browser versions support the AJAX submit functionality:
  • Microsoft Internet Explorer 10 and above
  • Mozilla Firefox 4 and above
  • Chrome 7 and above
  • Safari 5 and above
  • Opera 12 and above
You have activated the Forms module. For more information, see Activate and deactivate modules.

RESTRICTIONS: You can use the AJAX submit functionality only when the form does not contain a Form Captcha widget. For security reasons, the Captcha validation must always be done on the server.

Implement your own FormsSubmitRouteHandler

To implement your own route form handler, you can inherit from the default FormsSubmitRouteHandler class and provide your own logic.

Use the following example:

Register a form submit route handler

When the Forms module is initialized by the FormsModule class, the Initialize method of the module is called. As a result, a new route is registered in the Sitefinity CMS route table.

You can rewrite the default route by registering your own implementation of the FormsSubmitRouteHandler class.

To do so, you use the ObjectFactory class, which allows you to register your own implementation of the FormsSubmitRouteHandler class upon application start.

Add the following code in the Global.asax of your Sitefinity CMS application:

Enable the AJAX submit call in the Form widget

You enable the AJAX submit functionality by editing the Advanced settings of the Form widget:

  1. Open the designer of the Form widget.
  2. Click Advanced » Model.

    NOTE: If you are using a Web Forms form, you open the widget designer's Advanced settings.

  3. In the UseAjaxSubmit input field, enter true.

Was this article helpful?