Why my Thymeleaf Delete Button does GET/POST instead of DELETE?

Question

My thymeleaf delete button is executing either a GET or a POST request without understanding why.

I'm using those starters:

Spring Boot
Spring Security
Spring JPA
Spring Web

My controller:

@Controller
public class UserController {

// [...]

@DeleteMapping("/users/delete/{id}")
    public String deleteUser(@PathVariable("id") Long id) {

        userDeletionService.deleteUserById(id);

        return "redirect:/users/list";
    }
}

Here's the first tried button using an attribute(user) passed to the template:

<a th:href="@{'/users/delete/{id}'(id=${user.id})}" class="btn btn-danger btn-sm">Delete</a>

Falling on error 405 and we can notice that it did a GET:

DEBUG org.springframework.security.web.FilterChainProxy - Secured GET /users/delete/18    
DEBUG org.springframework.web.servlet.DispatcherServlet - Completed 405 METHOD_NOT_ALLOWED

Here, I'm trying a sedond button:

<form action="#" th:action="@{'/users/delete/{id}'(id=${user.id})}" th:method="delete" >
        <input type="hidden" name="_method" value="delete" />
        <button type="submit" id="submitButton"> </button>
</form>

Falling again on error 405 but, this time, it did a POST:

DEBUG org.springframework.security.web.FilterChainProxy - Secured POST /users/delete/18
DEBUG org.springframework.web.servlet.DispatcherServlet - Completed 405 METHOD_NOT_ALLOWED

Links (``) are always `GET`, forms can be `GET` or `POST`. To issue a `DELETE` you'd have to use JavaScript (AJAX). — slauth, Oct 06 '21 at 14:18
@slauth Thank you so much for the clarity of your explanation! It should be more referenced not loosing too much time on debugging. I'll try this out and get right back. — David, Oct 06 '21 at 14:25
Thanks again to @slauth. What worked for me was Raphael Roussis's answer on the following link (thanks to him as well): https://stackoverflow.com/questions/38370011/thymeleaf-button-click-to-call-http-delete-method — David, Oct 06 '21 at 15:00

score 0 · Answer 1 · answered Oct 07 '21 at 13:18

HTML can only use GET or POST by default. Spring Boot and Thymeleaf support a workaround via the HiddenHttpMethodFilter.

To use it, you need to do 2 things:

Add th:method="delete" on your form:

<form th:method="delete" ... >

Thymeleaf will automatically insert a hidden input like this:

<input type="hidden" name="_method" value="delete" />

Enable the filter in Spring Boot. The easiest way is adding this to application.properties:

spring.mvc.hiddenmethod.filter.enabled=true

Why my Thymeleaf Delete Button does GET/POST instead of DELETE?

1 Answers1