how to include HTML form method=DELETE for the same "action" in the REST service call

Question

I want to include DELETE method in the same HTML form, calling the same action(calling a REST service) . How do I do this ? . My current HTML form looks like this :, the DELETE functionality does not work , but the POST does. I have included the REST resource service as well. Any suggestions is appreciated.

  <!DOCTYPE html>
<html>
 <head>
  <title>Form to create a new resource</title>
  <style>
    tab { padding-left: 4em; }
    </style>
 </head>
<body>

 <form id= "myForm" action="../com.dcr.jersey.first/rest/todos" >

  <label for="id">ID</label>
  <input name="id" />
  <br/>
  <label for="summary">Summary</label>
  <input name="summary" />
  <br/>
  Description:
  <TEXTAREA NAME="description" COLS=40 ROWS=6></TEXTAREA>
  <br/> 
  <button type="submit" value="Submit">Submit</button>  <tab> <button type="submit" value="Delete">Delete</button>
  <script>
      $("button.Submit").click(function(){
            $("#myForm").attr("method", "POST");
        });

        $("button.delete").click(function(){
            $("#myForm").attr("method", "DELETE");
        });
  </script>

</form>

</body>
</html>

TodosResource.java

package com.dcr.jersey.jaxb.resources;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletResponse;
import javax.ws.rs.Consumes;
import javax.ws.rs.DELETE;
import javax.ws.rs.FormParam;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.Context;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Request;
import javax.ws.rs.core.UriInfo;

import com.dcr.jersey.jaxb.dao.TodoDao;
import com.dcr.jersey.jaxb.model.Todo;
//Will map the resource to the URL todos
@Path("/todos")
public class TodosResource {

    // Allows to insert contextual objects into the class,
      // e.g. ServletContext, Request, Response, UriInfo
      @Context
      UriInfo uriInfo;
      @Context
      Request request;
      @Context
      Todo todo;
    // Return the list of todos to the user in the browser
      @GET
      @Produces(MediaType.TEXT_XML)
      public List<Todo> getTodosBrowser() {
        List<Todo> todos = new ArrayList<Todo>();
        todos.addAll(TodoDao.instance.getModel().values());
        return todos;
      }
    // Return the list of todos for applications
      @GET
      @Produces({ MediaType.APPLICATION_XML, MediaType.APPLICATION_JSON })
      public List<Todo> getTodos() {
        List<Todo> todos = new ArrayList<Todo>();
        todos.addAll(TodoDao.instance.getModel().values());
        return todos;
      }
    // retuns the number of todos
      // Use http://localhost:8080/de.vogella.jersey.todo/rest/todos/count
      // to get the total number of records
      @GET
      @Path("count")
      @Produces(MediaType.TEXT_PLAIN)
      public String getCount() {
        int count = TodoDao.instance.getModel().size();
        return String.valueOf(count);
      }

      @POST
      @Produces(MediaType.TEXT_HTML)
      @Consumes(MediaType.APPLICATION_FORM_URLENCODED)
      public void newTodo(@FormParam("id") String id,
          @FormParam("summary") String summary,
          @FormParam("description") String description,
          @Context HttpServletResponse servletResponse) throws IOException {
        Todo todo = new Todo(id, summary);
        if (description != null) {
          todo.setDescription(description);
        }
        TodoDao.instance.getModel().put(id, todo);
        servletResponse.sendRedirect("../Created_PopUp.html");
      }  

      @POST
      @Produces(MediaType.TEXT_HTML)
      @Consumes({MediaType.APPLICATION_XML,MediaType.APPLICATION_JSON})

      public void newTodoXMLJSON(Todo todo) throws IOException {
        this.todo=todo;
        TodoDao.instance.getModel().put(todo.getId(), todo);
      }  

      @DELETE
      @Produces(MediaType.TEXT_HTML)
      @Consumes(MediaType.APPLICATION_FORM_URLENCODED)
      public void delTodo(@FormParam("id") String id,
          @Context HttpServletResponse servletResponse) throws IOException {
          Todo c = TodoDao.instance.getModel().remove(id);
            if(c==null)
              throw new RuntimeException("Delete: Todo with " + id +  " not found");
            else servletResponse.sendRedirect("../create_todo.html");
      }  

      @Path("{todo}")
      public TodoResource getTodo(@PathParam("todo") String id) {
            return new TodoResource(uriInfo, request, id);
      }
}

score 1 · Answer 1 · answered Apr 29 '15 at 19:45

1

isn't the property called "formmethod" and not method. The method attribute is usually at the form level. Try $("#myForm").attr("formmethod", "POST"); instead

answered Apr 29 '15 at 19:45

Kar

485
1
4
9

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

You can use only one method (attributes are unique) on a form.

A workaround would be changing the form method depending on what button you press.

JQ Ex:

$("button.save").click(function(){
    $("#myForm").attr("method", "POST");
});

$("button.delete").click(function(){
    $("#myForm").attr("method", "DELETE");
});

Also take a look at this thread for info on browser support.

edited May 23 '17 at 11:43

Community

1
1

answered Apr 29 '15 at 13:07

aldux

2,774
2
25
36

I updated the html as you suggested , it still does not work. I updated the HTML script in the post( as you suggested ) using the ` – Alferd Nobel Apr 29 '15 at 19:40

score 0 · Answer 3 · answered Aug 26 '22 at 01:03

0

HTML forms support only GET and POST methods, if you want to use other methods like DELETE, PUT or PATCH you should send them using fetch or XMLHttpRequest.

answered Aug 26 '22 at 01:03

0MR4N

91
3

how to include HTML form method=DELETE for the same "action" in the REST service call

3 Answers3