Javascript event handler to execute after default behavior

Question

In Javascript, how can I attach an event handler so that it gets run after the default action?

<form target="_blank" action="submit.php" onsubmit="doThisAfterSubmit()">
    <input type="submit" onclick="doThisAfterSubmit()" />
</form>

Similar but insufficient Stack Overflow questions:

javascript: Possible to add event handler that runs after the default behavior?

How to catch event after default action was performed in JavaScript

I have read these but they are dealing with keystroke events solved with using a variation such as keyup over keypress. The only other solution I have seen is the setTimeout() method. I want to avoid using setTimeout() in favor of a more elegant solution if one exists.

My use case is that I want to remove the form from the DOM after the submit.

What do you mean by "after the default behaviour"? When the POST request has been sent? When the response has been received? — lonesomeday
– lonesomeday, Commented Jun 12, 2013 at 22:20
Once the submit has completed, another page is loaded, and your javascript is lost, so the answer is simple, you can't! — adeneo
– adeneo, Commented Jun 12, 2013 at 22:22
Give the form an ID (lets use test), onclick="document.getElementById('test').style.display = 'none';". Form gets submitted, disappears. — tymeJV
– tymeJV, Commented Jun 12, 2013 at 22:25
onsubmit="this.style.display = 'none';" works perfectly. Perhaps the problem is in your doThisAfterSubmit() function? — NikitaBaksalyar
– NikitaBaksalyar, Commented Jun 12, 2013 at 22:29

John S · Accepted Answer · 2017-01-18 17:27:09Z

5

You could perform the default action yourself, then do what you want, and then prevent the default action from running.

<form target="_blank" action="submit.php"
        onsubmit="this.submit(); doThisAfterSubmit(this); return false;">
    <input type="submit" />
</form>

Note: Calling this.submit() in "onsubmit" will not cause an infinite loop as you might think.

jsfiddle demo

EDIT: My original jsfiddle was only displaying text after the form submit. I tried it again, but changed it to remove the form like you want. That caused the form to no longer submit, even though this.submit() was called first. In that case, you can use setTimeout() to delay the removal of the form until the original thread is finished executing, like this:

function doThisAfterSubmit(form) {
    setTimeout(function() {
        $(form).remove();
    }, 0);
};

Now the form is submitted before it is removed.

jsfiddle demo

edited Jan 18, 2017 at 17:27

answered Jun 13, 2013 at 2:05

John S

21.5k9 gold badges50 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

km6zla Over a year ago

The first part of your answer got me excited, then having to use setTimeout() bummed me out. Then I tried your second fiddle and removed the setTimeout() and just ran $(form).remove() and it worked perfectly!

John S Over a year ago

@ogc-nick - I wondered if it would work differently on different browsers, and apparently it does. It works without setTimeout() on Chrome 27 and IE 10, but not on Firefox 27.

km6zla Over a year ago

Ah very interesting. Yes I was testing it in chrome. My target browser is Firefox unfortunately, I just didn't expect FF and Chrome to differ on the point. I still like the approach though.

Pasha Skender Over a year ago

What about for events that are not cancellable?

John S Over a year ago

@LorenShqipognja - What kind of event are you thinking of?

|

bert bruynooghe · Accepted Answer · 2017-06-19 21:27:04Z

2

You can use event bubbling instead:

<div onclick="this.remove();">
  <form target="_blank" action="submit.php" onsubmit="alert('submitted);">
    <input type="submit" />
  </form>
</div>

answered Jun 19, 2017 at 21:27

bert bruynooghe

3,1011 gold badge23 silver badges21 bronze badges

Collectives™ on Stack Overflow

Javascript event handler to execute after default behavior

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related