Unleash the Power of Choice: Multiple Submit Button Techniques for HTML Forms

2024-07-27

An HTML form is a section of a webpage that lets users enter information. It consists of various elements like text boxes, radio buttons, and, of course, buttons.

Form Submit:

A submit button is a button within a form that, when clicked, sends the form data (information entered by the user) to a web server for processing. By default, there's only one submit button per form.

Adding Multiple Submit Buttons:

Here's how you can include multiple submit buttons in a single HTML form:

Using the type="submit" attribute:

You can create multiple buttons with the type="submit" attribute. Each button will act as a submit button.

<form action="process_data.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br>
    <input type="submit" value="Save">
    <input type="submit" value="Delete">
</form>

In this example, clicking either "Save" or "Delete" will submit the form.

Using different button names:
- It's recommended to assign different names to each submit button using the name attribute. This helps identify which button was clicked on the server-side (the program that processes the form data).
```
<form action="process_data.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br>
    <input type="submit" name="submit_action" value="Save">
    <input type="submit" name="submit_action" value="Delete">
</form>
```
Here, both buttons have the same name (submit_action), but different values (Save and Delete). On the server-side, you can check the value of submit_action to determine which button was pressed.
Using the formaction attribute (advanced):
- By default, all submit buttons in a form send data to the URL specified in the form's action attribute. You can use the formaction attribute on individual buttons to override this behavior.
```
<form method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br>
    <input type="submit" value="Save" formaction="save_data.php">
    <input type="submit" value="Delete" formaction="delete_data.php">
</form>
```
In this example, clicking "Save" submits the form to save_data.php, while "Delete" submits to delete_data.php.

Remember:

Whichever method you choose, make sure your server-side script (e.g., PHP, Python) is set up to handle the different submit actions based on button names or the formaction attribute.

<!DOCTYPE html>
<html>
<body>

<form action="process_data.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <input type="submit" name="submit_action" value="Save">
  <input type="submit" name="submit_action" value="Delete">
</form>

</body>
</html>

This code creates a form with two submit buttons: "Save" and "Delete". Both buttons have the same name (submit_action) but different values. On the server-side script (process_data.php), you can check the value of submit_action to determine which button was clicked:

<?php
  if (isset($_POST['submit_action'])) {
    if ($_POST['submit_action'] == "Save") {
      // Handle save data logic here
    } else if ($_POST['submit_action'] == "Delete") {
      // Handle delete data logic here
    }
  }
?>

Using the formaction attribute:

<!DOCTYPE html>
<html>
<body>

<form method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <input type="submit" value="Save" formaction="save_data.php">
  <input type="submit" value="Delete" formaction="delete_data.php">
</form>

</body>
</html>

This code uses the formaction attribute to specify different URLs for each submit button. Clicking "Save" submits the form to save_data.php, while "Delete" submits to delete_data.php.

While it works, this method is not recommended as it relies on button text, which can be less reliable for server-side logic.

<!DOCTYPE html>
<html>
<body>

<form action="process_data.php" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <input type="submit" value="Update">
  <input type="submit" value="Cancel">
</form>

</body>
</html>

This approach uses JavaScript to modify the form data before submission.

HTML:

<form action="process_data.php" method="post" id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <button type="button" onclick="submitForm('save')">Save</button>
  <button type="button" onclick="submitForm('delete')">Delete</button>
  <input type="hidden" name="action">
</form>

We use regular buttons (type="button") instead of submit buttons.
We include a hidden field (type="hidden") named action to store the desired action.
A JavaScript function submitForm is called when a button is clicked.

JavaScript:

function submitForm(action) {
  document.getElementById("myForm").action = "process_data.php"; // Set form action (optional)
  document.getElementById("action").value = action;
  document.getElementById("myForm").submit();
}

The submitForm function takes the desired action (save or delete) as an argument.
It sets the value of the hidden field (action) to the provided action.
(Optional) You can set the form's action attribute to the processing script here.
Finally, it calls the submit() method on the form to submit the data.

Server-Side:

On the server-side, you can access the value of the action field to determine which button was clicked and perform the appropriate action.

JavaScript with AJAX:

This approach uses JavaScript with AJAX (Asynchronous JavaScript and XML) to send the form data without a full page refresh.

<form id="myForm">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <button type="button" onclick="sendData('save')">Save</button>
  <button type="button" onclick="sendData('delete')">Delete</button>
</form>

Similar to the previous method, we use regular buttons.

function sendData(action) {
  var form = document.getElementById("myForm");
  var formData = new FormData(form);
  formData.append("action", action); // Add action data

  var xhr = new XMLHttpRequest();
  xhr.open("POST", "process_data.php"); // Replace with your processing script URL
  xhr.onload = function() {
    if (xhr.status === 200) {
      // Handle successful response from server
      console.log(xhr.responseText); // For example, display a success message
    } else {
      console.error(xhr.statusText); // Handle errors
    }
  };
  xhr.send(formData);
}

The sendData function takes the desired action as an argument.
It creates a FormData object containing the form data and appends the action information.
It uses an XMLHttpRequest object to send the data to the server-side script via a POST request.
The onload function handles the server response, allowing you to display success messages or handle errors.

Benefits of Alternate Methods:

These methods offer a more dynamic user experience without a full page reload.
They provide more flexibility in handling form data on the client-side before submission.

Considerations:

JavaScript is required for these methods to work. Users with disabled JavaScript will not experience the full functionality.
Implementing proper error handling for AJAX requests is important.

html forms form-submit

Unleash the Power of Choice: Multiple Submit Button Techniques for HTML Forms

Fixing Width Collapse in Percentage-Width Child Elements with Absolutely Positioned Parents in Internet Explorer 7

Unveiling the Mystery: How Websites Determine Your Timezone (HTML, Javascript, Timezone)