How to toggle password visibility in forms using Bootstrap-icons ?

How to Prevent Buttons from Submitting Forms in HTML?

Last Updated : 14 Aug, 2024

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.

Below are the approaches to prevent buttons from submitting forms in HTML:

Table of Content

Disable the submit button
Using the onsubmit Method
Using event.preventDefault() Method:

Approach 1: Disable the submit button

We can stop the submit button from submitting the form by disabling it. This means you can't click on the button as it is non-clickable by using the 'disabled' property. We are going to use the disabled attribute to do this.

Syntax:

<form>
     <button type="submit" disabled>Submit</button>
</form>

Example: In the following example, we are adding the disabled attribute to it so it can't be clicked 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>
        <h1>GeeksforGeeks</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" disabled>
              Submit
        </button>
    </form>
</body>

</html>

Output:

Approach 2: Using the onsubmit Method

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>GeeksforGeeks</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:

Approach 3: Using event.preventDefault() Method

You can prevent the form submission by calling event.preventDefault() method on the submit event of the form in JavaScript. This method will stop the default form submission behavior and you can handle the form data as per your requirement.

Syntax:

document.getElementById('submit-btn').addEventListener('click', 
    function(event) {
   
        // Handle the form data
        event.preventDefault();
});

Example: In this example, we get the form element using document.querySelector() and add an event listener to the submit button using addEventListener(). In the event listener function, we're calling event.preventDefault() method to prevent the default behavior of the button, which is to submit the form. You can then handle the form data as per your requirement.

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>
        <h1>GeeksforGeeks</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" 
                id="submit-btn">Submit
          </button>
    </form>
  
    <script>
        const form = document.querySelector("form");

        // Prevent form submission on button click
        document
            .getElementById("submit-btn")
            .addEventListener("click", function (event) {
                event.preventDefault();
            });
    </script>
</body>

</html>

Output:

How to toggle password visibility in forms using Bootstrap-icons ?

I

ianurag

Improve

Article Tags :

Similar Reads

How To Create Registeration Form in HTML

HTML Registration Form is a web-based form designed to collect user information such as name, email, password, and other details. It typically includes input fields, validation, and a submit button to register users on a website.HTML Registration FormHow to Create HTML Registration FormBasic Structu

HTML Login Form

HTML login form is used to authenticate users and grant access to secure sections of a website or application. It typically includes input fields for username/email and password, along with a submit button for logging in. Additionally, there is often an option for new users to create an account or s

HTML Form Design

HTML forms are used on websites to collect information from users. They allow users to input information such as their name, email address, password, or feedback.The <form> tag defines the form structure.Form elements like <input>, <button>, and <select> are used to collect d

How to add Radio Buttons in form using HTML ?

In this article, we will learn how to add Radio Buttons in form using HTML. We know that Radio Buttons are used to select only one option out of several options. It is generally used in HTML form. If we want to deselect any option we have to select another option in the case of a radio button. Appro

How to Add a Telephone Number into a form using HTML?

In this article, we will learn how to add a telephone number field to an HTML form. Telephone numbers have numerous advantages and are an important component of contact forms, allowing for direct communication with the user. Users can receive messages or notifications regarding the services provided

How to define a form for user input using HTML5 ?

In this article, we will learn how to create a form in a webpage by using the <form> tag. This tag is used to create form for user input. Also there are many elements which are used within form tag. Syntax: <form> Form Content... </form> Example: The following code snippet demonstr

How to Prevent Buttons from Submitting Forms in HTML?

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. Below are the approaches to preve

How to toggle password visibility in forms using Bootstrap-icons ?

Toggle password visibility in forms allows users to reveal or hide their typed passwords for convenience and security. Using Bootstrap icons, you can implement this feature by toggling the input field's type attribute between "password" and "text" upon icon click, revealing or hiding the password. A

How to perform form validation for a required field in HTML ?

Performing form validation for a required field in HTML ensures that a user must fill in specific fields before submitting a form. This is typically done using the required attribute, which prevents form submission if the field is left blank, ensuring proper data input.Table of ContentRequired attri

How do we take password input in HTML forms ?

In this article, we learn how to create a password input field in HTML. This can be done by using the <input> tag with type attribute which is set to the value "password". It involves sensitive information about the data of the user. The text in the input password field will be changed into bu