Home/ Questions/Q 7534245
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T05:57:43+00:00

I’m trying to define two eventhandlers for the same form in two different places.

  • 0

I’m trying to define two eventhandlers for the same form in two different places.

modalPlaceholder.on('submit', 'form', function(e){
  var url = $(this).attr('action');
  var data = $(this).serialize();
  $.ajax({
    // ajax stuff
  });
  e.preventDefault();
})

This one to send the form via ajax post.

$('body').on('submit', 'form', function(){
  $(this).find('.hasPlaceholder').each(function() {
    $(this).val('');
  });
})

This one to zero form values that are just placeholders, so they dont get sent to the server as actual values.

For forms, that are not within modalPlaceholder, this works fine. But for forms that I want to send with ajax, the form gets serialized and sent before the zeroing happens.

Is there a way to define an order in which the eventhandlers get called?
Help much appreciated.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re delegating events to your modalPlaceHolder element and to the <body> element, respectively. It means the events have to reach these elements in order to be processed.

    DOM events always bubble up the document hierarchy. Since your modalPlaceHolder element is a descendant of the page <body>, event bubbling will always reach it before the <body> element. Therefore, your first handler will always run before the second one, regardless of their registration order.

    If at all possible, delegate both events either to the <body> element or to your modalPlaceHolder element, and register the second handler before the first:

    $('body').on('submit', 'form', function() {
    $(this).find('.hasPlaceholder').val('');
}).on('submit', 'form', function(e) {
    var url = $(this).attr('action');
    var data = $(this).serialize();
    $.ajax({
        // ajax stuff
    });
    e.preventDefault();
});
    • 0