Drupal.Ajax.prototype.beforeSubmit results in AJAX Error

Question

I have a module that creates an AJAX Form.

I need to copy some values from the DOM to a form field when (or before) the form is submitted.

In my module JS, I tried this:

(function($, Drupal) {

  Drupal.behaviors.beforeAjaxFormSubmit = {
    attach: function(context, settings) {

      Drupal.Ajax.prototype.beforeSubmit = function(form_values, element, options) {

        console.log('Will alter form here ...')
      };
    }
  };
})(jQuery, Drupal);

The console log is shown but right after comes an AJAX Error:

An AJAX HTTP error occurred.
HTTP Result Code: 200
Debugging information follows.
Path: /intervention/create?ajax_form=1
StatusText: OK
ResponseText: TypeError: Argument 1 passed to Drupal\Core\Render\MainContent\AjaxRenderer::renderResponse() must be of the type array, null given, called in /var/www/html/web/core/lib/Drupal/Core/Form/FormAjaxResponseBuilder.php on line 89 in Drupal\Core\Render\MainContent\AjaxRenderer->renderResponse() (line 49 of /var/www/html/web/core/lib/Drupal/Core/Render/MainContent/AjaxRenderer.php).
[[Prototype]]: Error at http://d9.localhost:8000/core/misc/ajax.js?v=9.4.2:110:32

Does anyone know what I am doing wrong or if this is not the right approach?

Edit:

(function($, Drupal) {

  Drupal.behaviors.beforeAjaxFormSubmit = {
    attach: function(context, settings) {

      // Add submit handler to form.beforeSend.
      // Update Drupal.Ajax.prototype.beforeSend only once.
      if (typeof Drupal.Ajax !== 'undefined' && typeof Drupal.Ajax.prototype.beforeSubmitInterventionForm === 'undefined') {
        Drupal.Ajax.prototype.beforeSubmitInterventionForm = Drupal.Ajax.prototype.beforeSubmit;
        Drupal.Ajax.prototype.beforeSubmit = function(form_values, element_settings, options) {

          // Things will happen here
          
          return this.beforeSubmitInterventionForm.apply(this, arguments);
        };
      }
    }
  };
})(jQuery, Drupal);

This is what I have now but I am still getting the same AJAX Error.

Answer 1

You need to call the code of the original beforeSubmit().

I've found this great example in the webform module:

/webform/js/webform.element.managed_file.js

  // Add submit handler to form.beforeSend.
  // Update Drupal.Ajax.prototype.beforeSend only once.
  if (typeof Drupal.Ajax !== 'undefined' && typeof Drupal.Ajax.prototype.beforeSubmitWebformManagedFileAutoUploadOriginal === 'undefined') {
    Drupal.Ajax.prototype.beforeSubmitWebformManagedFileAutoUploadOriginal = Drupal.Ajax.prototype.beforeSubmit;
    Drupal.Ajax.prototype.beforeSubmit = function (form_values, element_settings, options) {
      var $form = this.$form;
      var $element = $(this.element);

      // Determine if the triggering element is within .form-actions.
      var isFormActions = $element
        .closest('.form-actions').length;

      // Determine if the triggering element is within a multiple element.
      var isMultipleUpload = $element
        .parents('.js-form-type-webform-multiple, .js-form-type-webform-custom-composite')
        .find('.js-form-managed-file').length;

      // Determine if the triggering element is not within a
      // managed file element.
      var isManagedUploadButton = $element.parents('.js-form-managed-file').length;

      // Only trigger block submit for .form-actions and multiple element
      // with file upload.
      if ($form.data('webform-auto-file-uploads') > 0 &&
        (isFormActions || (isMultipleUpload && !isManagedUploadButton)) &&
        blockSubmit($form)) {
        this.ajaxing = false;
        return false;
      }
      return this.beforeSubmitWebformManagedFileAutoUploadOriginal.apply(this, arguments);
    };
  }