The event listener on the AJAX form triggers only prior to the form submission

Question

The event listener on the AJAX form triggers only prior to the form submission

My form successfully sends an AJAX request upon submission. However, I have encountered an issue with the date field in the form. The change event listener works fine when the page initially loads, but it stops firing after the form is submitted once.

const date = document.querySelector('.latest-news__date');
if (date) {

  date.addEventListener('change', function () {
    // This event only triggers before the form is submitted.
  });
}

I am seeking a solution to make this event still fire even after the form has been submitted. Any suggestions on how to achieve this?

javascript ajax addeventlistener

Answer 1

Answer №1

When working with Drupal, I recently discovered the necessity of including some Drupal code alongside my JavaScript in order to achieve the desired functionality. To learn more about integrating JavaScript with Drupal, visit this link.

Drupal.behaviors.myBehavior = {
  attach: function () {
    const date = document.querySelector('.latest-news__date');
    if (date) {

      date.addEventListener('change', function () {
        // This will now trigger even after the submit button is pressed.
      });
    }
  },
};

Answer 2

When working with Drupal, I recently discovered the necessity of including some Drupal code alongside my JavaScript in order to achieve the desired functionality. To learn more about integrating JavaScript with Drupal, visit this link.

Drupal.behaviors.myBehavior = {
  attach: function () {
    const date = document.querySelector('.latest-news__date');
    if (date) {

      date.addEventListener('change', function () {
        // This will now trigger even after the submit button is pressed.
      });
    }
  },
};

The event listener on the AJAX form triggers only prior to the form submission

Answer №1

Similar questions

Obtain navigation instructions from current location to destination when marker is selected

How can I disable a button within an Ajax.BeginForm in Asp.net MVC?

Incorporate PrimeVue into Vue's custom elements

Send HTML content to an Angular component for processing

What is the proper way to display the initial content of the menu?

Images appearing blank in Android webview due to CSS background loading issue

The Jquery script is ineffective for newly added elements

Trigger click functions sequentially to display elements after specific actions are taken

What is the best way to include my JavaScript code in a shiny app to ensure all hyperlinks are acknowledged?

Extract the data from a dynamically loaded AJAX page

Customizing the appearance of columns in an antd table

Await the sorting of intervals

Email is not being sent through the AJAX request

Update the URL path with the selected tab item displayed

Can you explain the distinctions between using this['key'] and $data['key'] in the context of v-model?

Swap out a module with a different one in a node.js environment

Tips for transferring an entire array to a servlet and retrieving it efficiently

The React Vite application encountered an issue: There is no loader configured for ".html" files at ../server/node_modules/@mapbox/node-pre-gyp/lib/util/nw-pre-gyp/index.html

Fusioncharts are unable to display any data due to an error

After refreshing the page, the jQuery AJAX item becomes unclickable