How to use multiple submit buttons in an HTML form ?

Every HTML form deals with the server side with an action attribute. The HTML action Attribute is used to specify where the form data is to be sent to the server after submission of the form. As the destination of our data is stored in the action attribute each and every button will lead us to the same location. To overcome this difficulty we have to use the form action attribute of HTML input and buttons.

Syntax:

<form action="/DEFAULT_URL" method="post">
  <!-- Input fields here -->
  
  <!-- This button will post to the 
  /DEFAULT_URL of the form-->
  <button type="submit">BUTTON 1</button>
  
  <!-- This button will post to the custom 
  URL of the formaction attribute-->
  <button type="submit" formaction="/URL2">
    BUTTON 2
  </button>
</form>

Using Multiple Submit Button

Create a form with the method ‘post’ and set the value of the action attribute to a default URL where you want to send the form data.
Create the input fields inside the as per your concern.
Create a button with the type submit. This button will trigger the default action attribute of the form and send our input data to that URL.
Create another button with the type submit. Also, add a ‘formaction‘ attribute to this button and give it the value of the secondary URL where you want to send the form-data when this button is clicked.
The form action attribute will override the action attribute of the form and send the data to your desired location.

Example: In this example, we will see how to use multiple submit buttons in an HTML form.

HTML

<!DOCTYPE html>

<html lang="en">
 
<head>

    <title>GeeksforGeeks - Multiple Submit Buttons</title>

</head>
 
<body>

    <form action="https://geeksforgeeks.org/"

          method="post">

        <h1>GeeksforGeeks</h1>
 
        <!-- Username Input -->

        <label for="username">Username:</label><br>

        <input type="text" name="username"

               id="username">

        <br>
 
        <!-- Email Input -->

        <label for="email_id">Email id:</label><br>

        <input type="text" name="email_id"

               id="email_id">

        <br><br>
 
        <!-- Submit Button 1 -->

        <button type="submit" formaction="https://www.geeksforgeeks.org/"

                name="submit_type" value="submit_1">

            Submit 1

        </button>
 
        <!-- Submit Button 2 -->

        <button type="submit" formaction="https://www.geeksforgeeks.org/about/"

                name="submit_type" value="submit_2">

            Submit 2

        </button>

    </form>

</body>
 
</html>

Output :

Article Tags :

HTML

Web Technologies

HTML-Questions