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 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
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.
<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>