How to Toggle the Buttons & Submit a Form at the Same Time ?

Last Updated : 19 Apr, 2024

In web development, it is common to come across situations where you need to toggle buttons and submit a form simultaneously This functionality is useful for users to interact with the form by enabling or disabling buttons while processing or submitting form data and integrating a button toggle with the form submission you can enhance the user experience and provide feedback during form interactions.

The text placed between the opening and closing tags represents the visible label or content of the button. You can customize this text to provide clear instructions or descriptive labels that guide users on the intended action.

Approach

In this approach, we are using information attributes. We have created a basic form by the use of a form tag in HTML, and created a button that will help us to submit the form and toggle the page at the same time. once we will fill out the form and press the submit button it will lead us to the new page.

Example: In this example, we will use form and button attributes to toggle and submit the form at the same time.

HTML

<!DOCTYPE html>
<html>

<body>
    <h1>welcome to Login Page</h1>
    <form action="https://www.geeksforgeeks.org/"
          method="post">
        Username:<br />
        <input type="text" name="username: " />
        <br />
        Password:<br />
        <input type="password" name="password: " />
        <br /><br />
        <button type="submit" 
                formaction=
"https://www.geeksforgeeks.org/">
            SignIn
        </button>
    </form>
</body>

</html>