0

I am creating a web application to hold items in a list. Prior to re-engineering my front-end to be run on a server and having the contents stored and maintained in-memory on the server, I was using buttons to edit and delete items. These buttons then had event listeners that upon being clicked, javascript functions did their thing.

I am now developing it into a RESTful spa and have no idea how to call the PUT and delete methods. I read that forms/buttons don't support PUT and DELETE, and using POST is bad practice since it's not idempotent.

How do I go about this? Do I need to use some sort of plug-in to be able to achieve this? Is it possible to achieve this without javascript functions?

This how an item is structured in a list in my html:

<li class="list-group-item">
    <span class="description"><%= item %></span>
    <button class="btn btn-default btn-xs pull-right" id="delete-button" formaction="/items/<%= item %>" formmethod="delete" type="submit">
        <i class="glyphicon glyphicon-trash"></i>
    </button>
    <button class="btn btn-default btn-xs pull-right" id="update-button" formaction="/items/<%= item %>" formmethod="put" type="submit">
        <i class="glyphicon glyphicon-pencil"></i>
    </button>
</li>

I know the formmethod tags are incorrect there - left them to explain what I'm trying to achieve

Mariah
  • 101
  • 1
  • 7
  • Does this answer your question? [Javascript : Send JSON Object with Ajax?](https://stackoverflow.com/questions/6418220/javascript-send-json-object-with-ajax) – ps2goat Dec 17 '20 at 20:44
  • You'd follow the pattern for the selected answer without jQuery, except use `"PUT"` with data or `"DELETE"` with or without data (can delete based on a url parameter, for example) – ps2goat Dec 17 '20 at 20:45
  • You can add the action(PUT or DELETE) to the URL for formaction – sonali Dec 17 '20 at 20:48
  • Does this answer your question? [Using PUT method in HTML form](https://stackoverflow.com/questions/8054165/using-put-method-in-html-form) – zero298 Dec 17 '20 at 20:50
  • Forms can only call GET and POST. You'll need JS if you want to use a different verb. – zero298 Dec 17 '20 at 20:50

1 Answers1

1

A form can't make DELETE or PUT operations because for DELETE operation you don't need forms, and for the PUT the form can't possibly understand the semantics of this operation. The <form> element is only used to create data (well, technically to transport the data from the UI to the destination). So if you want to implement delete and update actions, which semantically correspond to DELETE and PUT operations in REST architecture, then you have to do it manually. The PUT operation is pretty simple. In rest it means replacing an existing resource with whatever the form has. You can gather the values manually in JavaScript and send them to the server using fetch. The DELETE operation is even simpler because it does not need body (usually, though it is allowed). You just take the resource identifier (the link to the resource) and you use fetch API to send the request.

Note here, you can't do update and delete with form and keep semantics of REST operations. You can, however, go RPC (Remote Procedure Call) and create an endpoint to update your data through POST operation. THe endpoint would be something like https://api.domain.com/path/to/resource/id/put, and the endpoint accept POST operation which de facto does the PUT operation.

Pawel Uchida-Psztyc
  • 3,735
  • 2
  • 20
  • 41
  • So what you're saying is that I should still leave the event listeners for my buttons and then call the PUT and DELETE operations in the javascript functions by making use of fetch? Sorry I'm asking again but I'm finding difficulty trying to understand all this; it's my first time using web technologies. – Mariah Dec 17 '20 at 20:53
  • 1
    No worries @MariahZammit. Sorry for not being precise. Yes, you register event listeners for update and delete buttons, and in the event listeners you use the fetch API to make a call to the remote endpoint. – Pawel Uchida-Psztyc Dec 17 '20 at 20:56
  • Great! Thank you, and one last question: that would still be considered as adhering to the REST standards/rule/constraints, right? I'm asking since this is for a school assignment and I want to make sure I'm providing a correct solution hat adheres to best practices. – Mariah Dec 17 '20 at 21:00
  • 1
    @MariahZammit Sorry for the late response. Having different operations for each user action - yes, that would be considered REST architecture. When you start building endpoints like `POST https://api.domain.com/path/to/resource/id/put` I would consider it RPC already. – Pawel Uchida-Psztyc Dec 18 '20 at 01:45