Home > Mobile >  How to send a DELETE request from Button with JavaScrpt?
How to send a DELETE request from Button with JavaScrpt?

Time:04-02

I am using the resource controller in laravel 8 and I want to hit its delete method from a delete button. How can I create a button with methord='delete'. I have to create this in JavaScript as the button is in a table and I have created that table with JS.

my Edit button is like this:

<a href='" base_url "/donner/" user['donner_id'] "/edit'><button class='btn btn-sm btn-outline-warning'><i class='fa-solid fa-pen-to-square'></i>&nbsp;&nbsp;Edit</button></a>

For the delete button, I have to send a request with the delete method. form buttonor anchor tag.

CodePudding user response:

It's not possible to send a DELETE request directly from pure HTML. You can either use JavaScript to send the DELETE request, or some frameworks support passing the method as a parameter in a POST request body.

<form action="/delete" method="POST">
    <input type="hidden" name="_method" value="DELETE" />
    <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <input type="submit" value="Delete">
</form>

This technique uses a form who's only visible input is a button. When the button is clicked it submits the form sending a POST request to the server. The server then detects the "_method" field and treats it as a DELETE request.

You can learn more about method spoofing in the Laravel docs.

CodePudding user response:

Take a look on the example code below. It shows you what are the steps. Bind a js trigger to the button. Then use fetch or axios or whatEverToMakeJSApiCalls.

Note Im sure that the next problem will come. CSRF, etc

<button 
  
  onclick="deleteSomething( {{$id}} )">
</button>
function deleteSomething(id) {
  fetch('/api/deleteModelName/'   id,  {
    method: 'DELETE'
  })
}

CodePudding user response:

<a onclick=&nbsp;sendDelete('" base_url "/donner/" user['donner_id'] "/delete')&nbsp;><button class='btn btn-sm btn-outline-warning'><i class='fa-solid fa-pen-to-square'></i>&nbsp;&nbsp;Delete</button></a>
function sendDelete(p) {
  var xhr = new XMLHttpRequest();
  xhr.open("DELETE",p);
  xhr.send();
}
  • Related