Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How can I use multiple submit buttons in an HTML form?
Generally, the forms in HTML uses a single submit button which saves the record when button is pressed. In some cases, we need a form with additional submit buttons such as "accept" or "reject". Those type of buttons usually attempt a state transition while updating the record.
A form with multiple buttons has to process your server-side code needs to know which button was pressed. Generally, after submission the destination data is stored in the action attribute where every button leads to same location. To overcome this problem, we use formaction attribute. For each submit button we require a different [formaction] attribute.
The formaction attribute specifies where to send the data. After submitting the form, the formaction attribute is called and sent data to the server. It overrides the feature of <form> element.
Syntax
Following is the usage of multiple submit buttons in a single form -
<form action="URL" method="post"> <!-- Input fields here --> <button type="submit">BUTTON 1</button> <!-- This button post to custom URL of the formaction attribute--> <button type="submit" formaction="URL2"> BUTTON 2 </button> </form>
Steps
Create a form by using method ‘post’ and value is a default URL, that you want to send the form data.
Based on your requirement create input fields inside.
Create a button with submit, which triggers the default action attribute of the form and send input data to that URL.
Create another button with submit, and add ‘formaction‘ attribute to that button and give value of the secondary URL that you want to send data when this button is clicked.
The formaction attribute overrides the action attribute of the form and send data to desired location.
Example
Following example explains how to use multiple buttons using single form −
<!DOCTYPE html>
<html>
<title>
TutorialsPoint
</title>
<body>
<form action="https://www.tutorialspoint.com/index.html" method="post">
Username:<br>
<input type="text" name="username"><br>
Email id:<br>
<input type="text" name="password"><br><br>
<button type="submit"
formaction=" https://www.tutorialspoint.com/index.htm "> HOME
</button>
<button type="submit"
formaction="https://www.tutorialspoint.com/questions/index.php">Q/A
</button>
</form>
</body>
</html>
when we run the above program, a form containing two input fields, and two buttons will be displayed. When, the user enters the details in the button, it will be re-directed to the specified URL’s.
When you click on ‘HOME’ Submit button it navigates to first URL which is mentioned as https://www.tutorialspoint.com/index.html.
When you click on ‘Q/A’ Submit button it navigates to second URL which is mentioned as https://www.tutorialspoint.com/questions/index.php
Submit buttons with same name and different text
Button with same name means, the “name” attribute in input field is same for all the buttons in the program and the value of the button is different.
Syntax
Following is the syntax to create buttons with same name and different text.
<input type="submit" name=" button" value="Select"> <input type="submit" name=" button" value="Update"> <input type="submit" name=" button" value="Delete">
In the above snippet, there are three submit buttons having same name “button” but with different values such as “Select”, “Update” and “Delete” labels. Whenever the user click “button”, we have to compare the value to find out which button was clicked.
Submit button with Different Names For Every Button
For every button we can represent different names, but the type of input field that is used is submitting only.
Example
In the following snippet, two select buttons and one delete button is there. Based on which one is clicked, the server-side scripting language submit only one even though a different name is there. So both select buttons work together.
<input type="submit" name=" select_button1" value="Select1"> <input type="submit" name="select_button2" value="Select2"> <input type="submit" name="delete_button" value="Delete">
Submit button using Formaction Attribute
The formaction attribute is used to overrides the action attribute in the form. It helps that the submission can be sent to a different location.
Example
Following snippet creates 3 submit buttons using the formaction attribute −
<button type="submit" name="action" formaction="/select1">Select</button> <button type="submit" name="action" formaction="/select2">Select</button> <button type="submit" name="action" formaction="/update">Update</button>
If we click first select button, it submits the form to the /select1 URL. And if we click the second select, it submits the form to /select2 URL. After submitting the server side scripting language navigates to the selected URL.
Example
Consider another example that explains how to use multiple buttons using single form −
<html>
<head>
<title>multiple submit button</title>
</head>
<body>
<div>
<form action="https://www.tutorialspoint.com/index.html" method="post">
<button type="submit" id="postback1" name="cmd" value="Save" >Save</button>
<button type="submit" id="postback2" name="cmd" value="Update">Update</button>
<button type="submit" id="postback3" name="cmd" value="Delete">Delete</button>
</form>
</div>
</body>
</html>
When we run the above program, a form consists of three buttons are displayed, that are labelled as “Save”, “update”, and “delete”. When the user clicks the button, it will be re-directed to the respective URL’s as you click the buttons.
9K+ Views
