Method override for PUT and DELETE in HTML

Following four HTTP methods are commonly used in REST.
• GET - This is to provide a read-only access to resource.
• PUT - This is to create a new resource
• DELETE - This is to remove a resource
• POST - This is to update a existing resource or create a new resource.

When we try to use PUT and DELETE in HTML, we have a problem. Browsers do support PUT and DELETE but it only by using request via AJAX, but not via 'HTML form' submission.

In both HTML4 and HTML5 spec, it says that the only HTTP methods that HTML form element should allow are "GET" and "POST". There is no clear reason why PUT and DELETE are not supported by 'HTML form'. My understanding is POST can be more effectively reused to support PUT and DELETE method. PUT and DELETE typically don't redirect to an appropriate page, while POST will redirect accordingly. We probably don't need to reinvent PUT and DELETE method for HTML but just reuse POST in this case (this is my opinion).

As the purpose of this page to understand how to use "method override" middleware to get around this problem.
The following is probably the most popular way to get it done.

First, install npm package for method-override.

$ npm install method-override

The idea is to use a header to override the method. The following example is to override POST method to create PUT and DELETE method.

Specify the header name a string argument of "methodOverride"
const methodOverride = require('method-override');

Override with '_method' header in the request. You can choose your own header.
app.use(methodOverride('_method'));

'post' is allowed method by HTTP form. We can override this post method for the following "put" and "delete" method.
app.post('/ideas', (req, res) => {
//
});

"put" method is overriden post method.
app.put('/ideas/:id', (req, res) => {
//
});

"delete" method is overriden post method.
app.delete('/ideas/:id', (req, res) => {
//
});

Query override using HTML form. The following is for "post".
<form action="/ideas/{{idea.id}}?_method=PUT" method="post">
<input type="hidden" name="_method" value="PUT">
</form>

Query override using HTML form. The following is for "delete".
<form method="post" action="/ideas/{{id}}?_method=DELETE">
<input type="hidden" name="_method" value="DELETE">
</form>

Comments

[Othmane Namani]

Hi @Chan, I really don't understand why using hidden input to render req.body._method = DELETE/PUT inside a form that really renders req.body._method = DELETE/PUT.
it is used separately in method-override documentation.
method-override documentation => github.com/expressjs/method-override

[william kolee]

This works perfectly :)

[Garyyyyyyy]

Awesome. Thanks for sharing!

[Mritunjay]

Thank you so much. Man I've literally cried.

[Emmanuel Hernández Olvera]

Worked like magic. Thanks.

[chan 🤖]

Is method_override still required up to this day?

[guerreroandresg]

Is this still working? I'm having some issues doing it, I dont get any update with the put method

[Garyyyyyyy]

it's still working. Just tried this today.

[Vinicius Cerqueira Bonifácio]

Thanks a lot for this post. It goes straight to the point, is concise and easy to understand.