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

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

GregX3 — Tue, 22 May 2007 17:21:37 -0800

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?

By: chrismear

chrismear — Tue, 22 May 2007 17:26:28 -0800

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.

By: GregX3

GregX3 — Tue, 22 May 2007 17:28:30 -0800

Ideally I want a link next to each item that says "delete". How could I do this with a form with a submit button?

By: flabdablet

flabdablet — Tue, 22 May 2007 17:29:35 -0800

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.

By: flabdablet

flabdablet — Tue, 22 May 2007 17:32:11 -0800

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.

By: GregX3

GregX3 — Tue, 22 May 2007 17:33:26 -0800

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

Would that work?

By: Mach5

Mach5 — Tue, 22 May 2007 17:33:48 -0800

seconding chrismear and flabdablets advice. dont be WTF.

By: GregX3

GregX3 — Tue, 22 May 2007 17:34:54 -0800

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.

By: iguanapolitico

iguanapolitico — Tue, 22 May 2007 17:38:37 -0800

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">.

By: chrismear

chrismear — Tue, 22 May 2007 17:45:08 -0800

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.)

By: GregX3

GregX3 — Tue, 22 May 2007 17:52:28 -0800

Thanks for the help everyone. I believe I have my answer. The javascript version looks cool too, I may try that later.

By: cerebus19

cerebus19 — Tue, 22 May 2007 18:39:13 -0800

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.

By: cerebus19

cerebus19 — Tue, 22 May 2007 18:39:50 -0800

Make that "will ignore styles..."

By: sonofslim

sonofslim — Tue, 22 May 2007 18:48:13 -0800

Safari will ignore styles on submit buttons

Not on button elements, however. But they are tough as hell to style consistently across browsers.

By: drjimmy11

drjimmy11 — Tue, 22 May 2007 21:09:06 -0800

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()"