How to specify DELETE method in a link or form?

Question

Rfc2616 lists many methods besides GET and POST, like, say, DELETE, PUT etc. Method field in html forms, though, seems to be allowed to specify only GET or POST.

Is it possible to create a link or form in a html page that uses a request method that is not GET or POST?

See http://stackoverflow.com/questions/165779/are-the-put-delete-head-etc-methods-available-in-most-web-browsers — Caps, Aug 03 '11 at 12:40
After following suggested links, I believe the definitive answer would be: using anything but GET and POST is not possible from an html page without scripting. Although html5 allowed PUT and DELETE in forms for a while, those were [removed](http://goo.gl/8EuZk). — Maurício C Antunes, Aug 18 '11 at 20:18

AlmightyWhy · Answer 1 · 2016-03-29T23:40:33.893

22

Was trying to figure this out for a rails app that was using Angular on the front end; these seems to work for that environment:

<a data-confirm="Are you sure?" data-method="delete" href="/link-to-resource" rel="nofollow">Delete</a>

Edit: Just to give everyone a heads up, I think you still need to have jQuery for this to work. I removed jQuery and it stopped working; I put it back and it started working.

edited Mar 29 '16 at 23:40

answered Feb 09 '16 at 03:02

AlmightyWhy

476
6
11

11

This behavior comes from jquery_ujs, which is part of jquery-rails. Unobtrusive Java Script. It's what also does the data:{confirm: 'do you?'} behavior. – Jesse Farmer Jun 29 '17 at 22:47
how can i achieve the same in rails react – Oshan Wisumperuma Sep 06 '19 at 10:12
1

@OshanWisumperuma try using something like `dataMethod` and `dataConfirm` for props. Haven't used React on Rails, but if I recall correctly, React uses camelCased props for certain HTML properties: https://reactjs.org/docs/dom-elements.html You will probably need to have jquery_ujs for this to work; however, it would also be trivial to use fetch and pass up an HTTP DELETE request. – AlmightyWhy Sep 07 '19 at 04:22

score 18 · Answer 2 · edited May 23 '17 at 10:31

18

You certainly can’t create a link that uses anything other than GET. Since HTML began, links have been meant to be idempotent and free from side effects.

For forms and XMLHTTPRequests, Caps’ link is the place to look: Are the PUT, DELETE, HEAD, etc methods available in most web browsers?.

edited May 23 '17 at 10:31

Community

1
1

answered Aug 03 '11 at 13:41

Paul D. Waite

96,640
56
199
270

the only problem that my links with data-method attrib (comming from rails,was an error ..) are POSTing! at least with FF, Chrome and IE ... – halfbit Aug 22 '14 at 18:22
@halfbit: that’s due to [some JavaScript that Rails includes](http://stackoverflow.com/questions/2809200/how-does-rails-3s-data-method-delete-degrade-gracefully). I’d humbly suggest it’s a terrible idea to make links do anything other than an HTTP GET, especially with JavaScript. – Paul D. Waite Aug 22 '14 at 23:51
oh, yes, I found that out allready (shame on me). I forgot to remove my comment, because false. sry again – halfbit Aug 23 '14 at 14:31
Then again most of the world clicks on GET links for verification of user accounts in emails. – Jonny May 30 '18 at 02:26
1

@Jonny: I’m not clear what that’s got to do with my answer. – Paul D. Waite May 30 '18 at 09:27

score 16 · Answer 3 · edited Jul 14 '17 at 07:14

By default, not there is no way to do this. Links always perform GETs, forms can use GETs or POSTs.

That said, with a little JavaScript, it's possible. Rails for instance ships with helpers which will add a data-method attribute to links. Rails-UJS is a jQuery library that will transparently intercept clicks on these links, and trigger a form submit with a _method parameter used for overriding the normal HTTP method. Finally Rack will intercept requests with a _method params, and overwrite the request method with the value in _method.

Other frameworks no doubt follow a similar pattern.

If you want even more details, I've written up an explanation of how Rails, Rails-UJS, and Rack all work together to provide this.

It's good to know how your libraries work.

Your link goes to a localhost website. Could you link to the online article? — E Rullmann, Jul 10 '17 at 20:47
http://www.monkeyandcrow.com/blog/reading_rails_http_delete_with_a_link/ — dtburgess, Jul 13 '17 at 13:11

score 4 · Answer 4 · answered Feb 19 '14 at 14:28

It is not possible to create a link or form with delete method.

Many web framework create a hidden input called "_method" for handling PUT and DELETE.

I created a plugin for automatically convert links to forms : RestfulizerJs

You can take a look here : https://github.com/Ifnot/RestfulizerJs

score 1 · Answer 5 · answered Mar 05 '17 at 11:07

@Ifnot plugin is great but I created a one based on $.ajax function instead of appending hidden forms! here's a simple example for a DELETE request

HTML

<button class="delete" data-target="http://example.com/post/post-id/" data-method="DELETE" data-disabled="true">Delete Article</button>

JavaScript

$(".delete").restintag(optionsObj, function(data) {
    console.log(data);
},
function(error) {
    console.log(error);
});

https://github.com/KhaledElAnsari/RESTInTag/

score 0 · Answer 6 · answered Feb 05 '23 at 09:05

HTMX is designed to solve this.

Why should only <a> and <form> be able to make HTTP requests? Why should only click & submit events trigger them? Why should only GET & POST methods be available? Why should you only be able to replace the entire screen? By removing these arbitrary constraints, htmx completes HTML as a hypertext

It enables any DOM element to make HTTP requests GET, POST, PUT, PATCH, and DELETE, without writing any custom JavaScript.

score 0 · Answer 7 · answered Aug 29 '23 at 13:47

Here is a straight javascript way to do it.

<body>
<p><a href="javascript: deleteApp('app1')">Delete app1</a></p>
<script>
function deleteApp(branch) {
  fetch('https://example.com/api/v1/resource/'+branch, {
    method: 'DELETE',
    headers: {
      'Authorization': 'Bearer <your_access_token>'
    }
  });
}
</script>
</body>

score -9 · Answer 8 · answered Dec 05 '13 at 19:03

-9

just add a data-method attribute,<a data-method='put' href='whatever'>link</a>

answered Dec 05 '13 at 19:03

Edward Verenich

160
5

2

Can you please link to any kind of documentation that this is correct? – Jarl Apr 17 '14 at 20:26
1

Downvoted because this answer is very vague and based on the information given, it's incorrect. I'm not sure how it achieved the highest number of upvotes. – Simon Aug 17 '14 at 05:04
Maybe it is vague, but indeed it is the correct one, and should receive up-votes. For the question above, it could be used like this: `DeleteMe` – Aleks Apr 09 '15 at 11:27
16

No this is a Rails/jQuery ism. It is not proper protocol. anchor links are get only. This is another example of magic being done that people are not understanding that it is NOT vanilla HTML – Michael Papile Jun 29 '15 at 19:32

How to specify DELETE method in a link or form?

8 Answers8

Linked