How to Implement Multiple Submit Buttons in a Single Thymeleaf Form?

How can I implement multiple submit buttons within one Thymeleaf form?

<form action="/submit" method="post">
    <input type="text" name="userInput" />
    <button type="submit" name="action" value="save">Save</button>
    <button type="submit" name="action" value="delete">Delete</button>
</form>

Using multiple submit buttons in a single Thymeleaf form allows users to perform different actions without needing separate forms. This strategy improves usability and helps maintain clean, organized code.

@PostMapping("/submit")
public String handleFormSubmission(@RequestParam String action, Model model) {
    if (action.equals("save")) {
        // Handle save action
    } else if (action.equals("delete")) {
        // Handle delete action
    }
    return "redirect:/somepage";
}

Causes

• Need for different actions (e.g., save, delete) from the same form input.
• User experience improvements by reducing the number of forms on a page.

Solutions

• Utilize different button values to distinguish actions on submission.
• Add conditions in the controller to handle each action based on the button clicked.

Mistake: Not using the 'name' attribute or having the same name for multiple buttons.

Solution: Ensure each submit button has a unique name or the same name with a unique value to differentiate them.

Mistake: Failing to check the action type in the controller, leading to incorrect processing.

Solution: Implement conditional logic based on the action parameter in your controller.