Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to use multiple submit buttons in an HTML form ?

  • Last Updated : 30 Sep, 2021

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 formaction attribute of HTML input and buttons.

Approach: The formaction attribute is used to specify where to send the data of the form. After submission of the form, the formaction attribute is called. The form data is to be sent to the server after the submission of the form. It overrides the feature of the action attribute of a <form> element. We are going to  implement our problem using this ‘formaction’ attribute

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Let’s learn the steps of performing multiple actions with multiple buttons in a single HTML form:  

  • Create a form with 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 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 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 formaction attribute will override the action attribute of the form and send the data to your desired location.

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>

Example :

HTML




<!DOCTYPE html>
<html lang="en">
  
<body>
    <form action="https://gfg.com/" method="post">
        Username:<br>
        <input type="text" name="username">
        <br>
        Email id:<br>
        <input type="text" name="email_id">
        <br><br>
  
        <button type="submit" formaction="#">
            Submit 1
        </button>
          
        <button type="submit" formaction="#">
            Submit 2
        </button>
    </form>
</body>
  
</html>

Output :




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!