Member Avatar for prasanthsagar

HI guys,

I have a form in my website.
When I close the form, I want to fire an event which displays another page or dialog box containing some button.
Please help me in this.

Regards,
Prasanth

  • 2 Contributors
  • 2 Replies
  • 104 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by abelLazm

Dani AI

Generated

asked how to fire an event when a form is closed so a follow-up page or dialog appears. pointed toward the desktop FormClosing idea, but for an HTML/CSS/JavaScript scenario there are different, more reliable patterns depending on what "close" means (tab/window close, modal close, or a form cancel/submit).

For browser/tab close or navigation, the standard is the beforeunload event. Modern browsers only show a generic confirmation and do not allow custom dialogs or new windows from this handler:

window.addEventListener('beforeunload', function (e) {
  // Prompt the user with a generic confirmation dialog when leaving
  e.preventDefault();
  e.returnValue = '';
});

For in-page modals or HTML5 <dialog>, listen to the modal/dialog close or hide events and show the follow-up UI before removing the original form:

// native dialog
const dlg = document.getElementById('formDialog');
dlg.addEventListener('close', () => {
  document.getElementById('followupDialog').showModal();
});

If the form has a visible "close" or "cancel" control, intercept that click and show the next dialog explicitly (do not rely on unload handlers):

document.querySelector('.form-close').addEventListener('click', function (e) {
  e.preventDefault(); // stop immediate close
  showFollowUpModal(); // present next UI
  // close original dialog after follow-up if needed
});

Notes and best practices: do not rely on beforeunload to open new pages or popups (popup blockers and browser policies usually block that). For single-page apps, use router/component lifecycle hooks to present follow-ups. For desktop Windows Forms the FormClosing/FormClosed events are appropriate (as mentioned). For details on browser behavior see MDN: and HTMLDialogElement close event.

Recommended Answers

All 2 Replies

Member Avatar for abelLazm

Put that dialogue box code in formClosing event ...

Member Avatar for abelLazm

Check this link for details of form_closing event

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.