2

How do you add a library to page attachments (or perform any other alteration) only AFTER form submission?

Long explanation:

I have a very simple contact form which redirects to the frontpage after submission and displays a "Thank you" message.

I need to trigger custom JS events for Google AdWords integration after form submission. In theory this is very simple, just implement hook_page_bottom and attach library with custom JS code.

However, this library should only be attached after form submission and I can't figure out how to detect whether a page load comes from a form submission. My first attempt was to implement hook_form_alter and add a custom submit handler. However, this submit handler is only fired right after form submission, but not in the next page load, which means that my library doesn't get attached.

What is the Drupal way of this?

Improve this question
6
  • Can you explain little more? – esafwan Feb 26 '18 at 11:17
  • Hi @esafwan The idea is I need to add a custom library to the frontpage, but only after a form has been submitted. Custom submit functions in form_alter are triggered on form submission, but not on the next page load. What is the Drupal way of doing this? – bmunslow Feb 26 '18 at 11:23
  • Custom JS library? – esafwan Feb 26 '18 at 12:10
  • @esafwan Yes, this is a custom JS library that I want to attach – bmunslow Feb 26 '18 at 12:12
  • 1
    Why not redirect to the homepage in the form submit with a query string on it. Then you can check for that in the request and attach the js. – Kevin Feb 26 '18 at 12:24
1

I see two ways of doing this.

Options 1: Make the form Ajax. Either by using Form API in Drupal or Jquery. Then in success function call your custom js event. Or else you could also do something like this:

 $('#some-form-123').submit(function() {
    _gaq.push(['_trackEvent', 'Contactform', 'Form submitted']);
  });

The above code is an example, you need to use it for your event.

Option 2: In Drupal set a cookie when the form is submitted. Then in page load, check if the particular cookie exists. If it does exist invoke your custom event and unset the cookie. Then, the cookie is only present if the form is again submitted.

See the following:

  1. https://www.drupal.org/docs/8/api/javascript-api/ajax-forms
  2. https://github.com/jquery-form/form
  3. https://github.com/js-cookie/js-cookie
Improve this answer
2
  • Both options work and I actually implemented Option 1 in my particular case. My Drupal curiosity isn't satisfied though. Imagine a scenario of a browser with cookies and Javascript disabled. Obviously to attach a JS library wouldn't make any sense either, but let's say a CSS library needs to be attached or you simply need to alter page render array. I'll wait and see if a more robust solution comes up. – bmunslow Feb 27 '18 at 7:39
  • In such a scenario there is no question of invoking a JS event. You have specifically mentioned the purpose is to trigger JS event. If you want it to work when JS is disabled, you need to see if the event can be sent from server side via an API. If such an API exists, you can use the submit hook of the form to send the event. You can maybe inspect how this event is send and to what url and replicate the same on the server side. – esafwan Feb 27 '18 at 20:40
1

My recommendation:

Alter the redirect value so that it contains a query parameter on the URL (after valid submit). Check for query parameters presence in hook_page_alter and then do you thing. This also has added benefit of keeping your JS outside of normal front page cache.

Improve this answer
1
  • This would technically work, but what if someone reloaded page with GET parameters in the URL? It would trigger the JS library but it wouldn't be a genuine form submission – bmunslow Mar 1 '18 at 10:05

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.