0

I've written a custom Webform Handler which when the user clicks Submit, sends the data from the Webform to an external api. The handler is working perfectly but it takes a few seconds for the external api to confirm that the information has been received. So I would like to include an overlay throbber on the form once the user clicks Submit on the Review page so at least they know something is happening.

I've created a JS file with a simple function to add a class to the :

(function ($, Drupal) {
  'use strict';
  Drupal.behaviors.mymodule = {
    attach: function (context, settings) {
      $('body').addClass('throbber'); 
    }
  };
})(jQuery, Drupal);

I've also set up a mymodule.libraries.yml file to define the JS file and it's JQuery dependencies. In my module I am using the function public function preSave(WebformSubmissionInterface $webform_submission) (as the Webform is a multipage form, so I only want it to fire once when the final Submit is pressed). I can't seem to find the right function to attached the JS file within the preSave function. Anyone got any ideas?

Or if anyone has a better suggestion to achieve the overlay, please let me know.

Thanks

F

  • Your question seems more related to adding JS to a Drupal form/page. For example, you might want to use the jQuery once plugin (included in core) to only fire the event once. At the same time, I think you can use an Ajax enabled webform which displays a throbber between page requests. – jrockowitz Aug 1 at 20:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.