How to usethe onsubmit Method in HTML
To prevent buttons from submitting forms in HTML use the onsubmit attribute with return false value.
Example: In the following example, we are adding the onsubmit attribute with return false and hence the form will not be submitted.
HTML
<!DOCTYPE html><html><head> <title>Disable Submit Button</title> <style> form { margin: 300px 500px; display: flex; flex-direction: column; text-align: center; } h1 { color: green; } </style></head><body> <form onsubmit="return false;"> <h1>w3wiki</h1> <label for="name">Name:</label> <input type="text" id="name" name="name" /> <br /> <label for="email">Email:</label> <input type="email" id="email" name="email" /> <br /> <button type="submit"> Submit </button> </form></body></html> |
Output:
How to prevent buttons from submitting forms in HTML ?
In this article, we will use different approaches for preventing buttons from submitting forms. There are several reasons where preventing the buttons from submitting forms, i.e., if the user hasn’t completed all the required form fields, or added incorrect details in the form, etc. For this, we can implement different approaches, which are discussed below.
Table of Content
- Disable the submit button
- Using the onsubmit Method
- Using event.preventDefault() Method