How Can I Intercept and Prevent Form Submissions Using JavaScript?

Intercepting Form Submissions for Prevention

In a situation where you have a form with an existing submit button that cannot be modified, preventing its submission can be achieved through JavaScript.

To catch the submit event and prevent it from occurring, the following steps can be taken:

Catching the Submit Event:

1. Locate the form element:

   const form = document.querySelector('form');

2. Add an event listener to the form for the 'submit' event:

   form.addEventListener('submit', handleSubmit);

Preventing the Submission:

Within the event handler function ('handleSubmit' in this case), you can prevent the submit action by:

1. Calling preventDefault() on the event object:

   const handleSubmit = (e) => {
     e.preventDefault();
   };

2. Additionally, for AJAX form submissions, returning false further prevents the default form action:

   function handleSubmit(e) {
     e.preventDefault();
     // Insert your custom logic here
     return false;
   };

Note: As highlighted in the provided answer, if a JavaScript error occurs before the return false statement, the form will still be submitted. To address this, consider using a try...catch block to handle any potential errors and ensure the form is not submitted even in such cases.

The above is the detailed content of How Can I Intercept and Prevent Form Submissions Using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!