Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How can I use multiple submit buttons in an HTML form?
Generally, HTML forms use a single submit button to save or send data. However, in some cases we need multiple submit buttons such as "Save", "Update", or "Delete" within the same form. Each button may perform a different action or send data to a different URL.
To handle multiple submit buttons, we can use the formaction attribute, assign the same name with different value attributes, or give each button a different name. The server-side code then determines which button was clicked and processes accordingly.
Syntax
Using formaction Attribute
<form action="default-url" method="post"> <button type="submit">Default Action</button> <button type="submit" formaction="other-url">Other Action</button> </form>
The formaction attribute on a submit button overrides the form's action attribute, sending data to a different URL when that specific button is clicked.
Using Same Name with Different Values
<input type="submit" name="action" value="Save"> <input type="submit" name="action" value="Delete">
All buttons share the same name but have different value attributes. The server reads the submitted value to determine which button was pressed.
Using Different Names
<input type="submit" name="save_btn" value="Save"> <input type="submit" name="delete_btn" value="Delete">
Each button has a unique name. The server checks which name exists in the submitted data to identify the clicked button.
Example: Multiple Buttons with formaction
In this example, we create a form with two submit buttons that redirect to different URLs using the formaction attribute −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Submit Buttons</title>
<style>
input, button {
display: block;
margin: 8px 0;
padding: 6px;
}
button {
display: inline-block;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Form with formaction</h2>
<form action="https://www.tutorialspoint.com/index.htm" method="post">
Username:
<input type="text" name="username">
Email:
<input type="text" name="email">
<button type="submit">HOME</button>
<button type="submit"
formaction="https://www.tutorialspoint.com/articles/index.php">
Q/A
</button>
</form>
</body>
</html>
When you click the "HOME" button, the form submits to the default action URL. When you click "Q/A", the formaction attribute overrides the default and redirects to the Q/A page instead.
Example: Same Name with Different Values
In this example, all buttons share the same name attribute but have different values. The server uses the submitted value to identify which button was clicked −
<!DOCTYPE html>
<html>
<head>
<title>Same Name Buttons</title>
<style>
input[type="submit"] {
padding: 8px 16px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Buttons with Same Name</h2>
<form action="https://www.tutorialspoint.com/index.htm" method="post">
<input type="submit" name="action" value="Select">
<input type="submit" name="action" value="Update">
<input type="submit" name="action" value="Delete">
</form>
</body>
</html>
All three buttons submit the form to the same URL. The server receives action=Select, action=Update, or action=Delete depending on which button was clicked.
Example: Save, Update, and Delete Buttons
In this example, we create a form with three submit buttons using <button> elements with the same name but different values −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Submit Buttons</title>
<style>
button {
padding: 8px 16px;
margin: 5px;
cursor: pointer;
font-size: 14px;
}
</style>
</head>
<body>
<h2>Form with Multiple Actions</h2>
<form action="https://www.tutorialspoint.com/index.htm" method="post">
<button type="submit" name="cmd" value="Save">Save</button>
<button type="submit" name="cmd" value="Update">Update</button>
<button type="submit" name="cmd" value="Delete">Delete</button>
</form>
</body>
</html>
When the user clicks any button, the form submits with cmd=Save, cmd=Update, or cmd=Delete. The server-side code reads the cmd parameter to determine the action.
Comparison of Methods
| Method | How It Works | Best For |
|---|---|---|
formaction |
Each button sends data to a different URL | Buttons that need different server endpoints |
| Same name, different values | Server reads the submitted value to identify button | Buttons posting to the same URL with different actions |
| Different names | Server checks which name exists in submitted data | Buttons with completely independent logic |
Conclusion
HTML forms can have multiple submit buttons using three approaches − the formaction attribute to redirect to different URLs, same name with different value attributes for server-side identification, or different name attributes for each button. The formaction approach is the most flexible for client-side routing, while the same-name method is commonly used when all buttons post to a single server endpoint.
13K+ Views
