Delete request on express using form is not working

Question

When i'm trying to delete a data from database through form using node.js and express it's not deleting any data. As I know, there are only two methods get and post. no delete method.

router.js code

router.delete('api/:id', (req, res, next) => {
const id = req.params.id;
pool.query(`delete from book WHERE id = ?`, id, (err, result) => {
    if (err) throw err;
        res.status(201).json({ msg: `Deleted`});
  });
});

form code :

<form action="/api" method="">
 <input type="number" name="id" placeholder="delete" /><br/>
</form>

what should be the method here? i tried to give post and get but in vain.

HTML form method is GET by default. Plus, you're sending the id in a body instead of in the URL despite how you wrote your route. So what you are doing, instead of `DELETE /api/id` is `GET /api`. — Azami, Feb 28 '19 at 09:08
@RomonaMK Use POST and access `req.body.id`, or use AJAX to send a custom DELETE route. — Azami, Feb 28 '19 at 09:14
Please check following link for solution - https://stackoverflow.com/questions/9859287/expressjs-support-for-method-delete-and-put-without-the-methodoverride — Rohit Dalal, Feb 28 '19 at 10:14

Kossi D. T. S. · Answer 1 · 2019-03-04T21:41:27.053

Since a form doesnt supprt the delete method, you can prevent the form from sending automatically and send request manually using either the fetch api or a jquery xhr:

 <form action="/api" method="" id="deleteApi">
    <input type="number" name="id" placeholder="delete" /><br/>
    <input type="submit" value="Submit">
 </form>

js code:

  $('#deleteApi').submit(function(event){
    event.preventDefault();
   // send a DELETE request to the api here

     $.ajax({
        url: '/api',
        type: 'DELETE',
        //data: ....
     }).done(function(res) {
        alert( "success", res );
     }).fail(function(err) {
        alert( "error", err );
     })
  })

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

If you check MDN docs:

method The HTTP method that the browser uses to submit the form. Possible values are:

post: Corresponds to the HTTP POST method ; form data are included in the body of the form and sent to the server.

get: Corresponds to the HTTP GET method; form data are appended to the action attribute URI with a '?' as separator, and the resulting.

If you want to send a delete then listen to the submit event on the form, call event.preventDefault() to stop the default action, and make your own request to the backend, which is a more typical "modern" way to do it anyway as it doesn't cause the page to refresh.

Also your route won't get hit without something in the :id part.

One way to go about it is as follows:

Give your form a class or find a way to reference it

<form action="/api" method="post" id="test-form">
    <input type="number" name="id" placeholder="delete" /><br/>
</form>

In your JavaScript, find a way to reference the form and prevent it from submitting:

const form = document.getElementById('test-form');
form.addEventListener('submit', async event => {
    event.preventDefault();     // This prevents the form from submitting using POST

    const idInput = form.querySelector('input[name="id"]');
    const id = idInput.value;

    const res = await fetch(`https://apiurl.com/api/${id}`, {
      method: 'DELETE',
    });
    const json = await res.json();

    console.log(json);
});

Delete request on express using form is not working

2 Answers2