Proper GET/POST Design for Deleting Items on a Web Page

May 22, 2007 5:21 PM

I'm designing a webpage that will have a list of items and each item can be deleted. I was thinking to have the delete command be link to a URL that does the delete when called. But then I realized maybe that isn't safe since a spider following links might cause things to be deleted. What is the proper design for this type of thing?
posted by GregX3 to Technology (14 answers total)

Use a form with just a submit button, which results in a POST request to the delete URL. On the server-side, check that you have a POST request, not a GET request, before you do the delete. After a successful delete, do a redirect back to the list URL.
posted by chrismear at 5:26 PM on May 22, 2007

Response by poster: Ideally I want a link next to each item that says "delete". How could I do this with a form with a submit button?
posted by GregX3 at 5:28 PM on May 22, 2007

In general, if you want to put something on a web page that Does Something, rather than just Goes Somewhere, use a form and check for POST. Links are just for linking.
posted by flabdablet at 5:29 PM on May 22, 2007

How to do the form: the only visible control should be a the submit (Delete) button, and whatever you need server-side to identify what to delete should be an <input type="hidden" .../> in the same form.
posted by flabdablet at 5:32 PM on May 22, 2007

Response by poster: Well I guess each delete "link" could be its own form as in
<form ...><button ... >Delete</button></form>

Would that work?
posted by GregX3 at 5:33 PM on May 22, 2007

seconding chrismear and flabdablets advice. dont be WTF.
posted by Mach5 at 5:33 PM on May 22, 2007

Response by poster: Ok, right, like flabdablet said. Thanks, I'll use that.

Can a button tag display words and look like a link? If so it would be ideal.
posted by GregX3 at 5:34 PM on May 22, 2007

Best answer: You can style a submit button to look just like a text link if you want to. Something like <input type="submit" style="border:0; background: #ffffff; color: #EC2F27; text-decoration: underline;" name="blah" value="delete">.
posted by iguanapolitico at 5:38 PM on May 22, 2007

If you want a link, and are happy to require JavaScript, this snippet creates an invisible form and submits it when you click on the link:

<a href="delete_url" onclick="var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var m = document.createElement('input'); m.setAttribute('type', 'hidden'); m.setAttribute('name', '_method'); m.setAttribute('value', 'delete'); f.appendChild(m);f.submit();return false;">Delete</a>

(Taken from the Rails ActionView helpers.)
posted by chrismear at 5:45 PM on May 22, 2007

Response by poster: Thanks for the help everyone. I believe I have my answer. The javascript version looks cool too, I may try that later.
posted by GregX3 at 5:52 PM on May 22, 2007

I've used the trick iguanapolitico suggests myself, and it's great, with one exception: It doesn't work at all in Safari. If you don't care about that, that's fine, but Safari will not ignore styles on submit buttons no matter what you do.
posted by cerebus19 at 6:39 PM on May 22, 2007

Make that "will ignore styles..."
posted by cerebus19 at 6:39 PM on May 22, 2007

Safari will ignore styles on submit buttons

Not on button elements, however. But they are tough as hell to style consistently across browsers.
posted by sonofslim at 6:48 PM on May 22, 2007

there's no need to use a submit button. as sort of mentioned above any form can be submitted by js.

a href="#" onlick=javascript:document.getElementById('yourFormNAmeHEre').submit()"
posted by drjimmy11 at 9:09 PM on May 22, 2007