Try our conversational search powered by Generative AI!

Adding eventlistener 'formsStartSubmitting' without JQuery ?

Vote:
 

Is it possible to add 'formsStartSubmitting' on form element without JQuery?
I have this code currently 

<template>
  <div ref="GA4-script" />
</template>

<script>
export default {
  props: {
    formType: {
      type: String,
      default: '',
    },
  },
  mounted() {
    this.addEventHandler();
  },
  methods: {
    async addEventHandler() {
      await this.$nextTick();
      const parentForm = this.$refs['GA4-script'].closest('form');
      // eslint-disable-next-line no-undef
      $$epiforms(`.EPiServerForms#${parentForm.id}`).on('formsStartSubmitting', () => {
        if (window.dataLayer === 'undefined') { window.dataLayer = []; }
        // eslint-disable-next-line no-console
        window.dataLayer.push({
          event: 'form_submit',
          formName: this.getFormTitle(parentForm),
          formType: this.formType,
          customerType: this.getCustomerType(parentForm.id),
        });
      });
    },
    getFormTitle(form) {
      try {
        return form.getElementsByTagName('h2')[0].textContent;
      } catch (e) {
        return 'not found';
      }
    },
    getCustomerType(id) {
      // eslint-disable-next-line no-undef
      const radioButtons = $(`#${id} :input[type="radio"]`);
      // eslint-disable-next-line no-restricted-syntax
      for (const button of radioButtons) {
        if (button.checked === true && (button.value === 'Company' || button.value === 'Private Person')) return button.value;
      }
      return 'default';
    },
  },
};
</script>


Before $nextick I was adding window.onload eventlistener to mounted and I think it caused some race conditions which I think were solved with nexttick although not 100% sure. I'm also wondering if I could skip using JQuery if JQuery is not ready?. How would I replace this line with vanilla JavaScript ? I tried several ways but I'm missing something syntactically. Or if anyone could confirm that after nexttick JQuery should awalys be available, I think I can leave it at that.

$$epiforms(`.EPiServerForms#${parentForm.id}`).on('formsStartSubmitting', () => {})
#304162
Jun 27, 2023 10:18
Vote:
 

Hi Martin,

If you are looking to take complete control of the Forms and what is injected not injected, check out this blog post from David Artemik.

It covers how you can disable jquery injection and css injection and then inject your own js and do what you please.

Thanks

Paul

#304164
Jun 27, 2023 10:40
* 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.