Skip to content

Instantly share code, notes, and snippets.

Last active April 6, 2024 20:12
Show Gist options
  • Save JeffreyWay/5112282 to your computer and use it in GitHub Desktop.
Save JeffreyWay/5112282 to your computer and use it in GitHub Desktop.
Want to send a DELETE request when outside of a form? This will handle the form-creation bits for you dynamically, similar to the Rails implementation. (Requires jQuery, but doesn't have to.) To use, import script, and create a link with the `data-method="DELETE"` attribute.
<a href="posts/2" data-method="delete"> <---- We want to send an HTTP DELETE request
- Or, request confirmation in the process -
<a href="posts/2" data-method="delete" data-confirm="Are you sure?">
(function() {
var laravel = {
initialize: function() {
this.methodLinks = $('a[data-method]');
registerEvents: function() {
this.methodLinks.on('click', this.handleMethod);
handleMethod: function(e) {
var link = $(this);
var httpMethod ='method').toUpperCase();
var form;
// If the data-method attribute is not PUT or DELETE,
// then we don't know what to do. Just ignore.
if ( $.inArray(httpMethod, ['PUT', 'DELETE']) === - 1 ) {
// Allow user to optionally provide data-confirm="Are you sure?"
if ('confirm') ) {
if ( ! laravel.verifyConfirm(link) ) {
return false;
form = laravel.createForm(link);
verifyConfirm: function(link) {
return confirm('confirm'));
createForm: function(link) {
var form =
$('<form>', {
'method': 'POST',
'action': link.attr('href')
var token =
$('<input>', {
'type': 'hidden',
'name': 'csrf_token',
'value': '<?php echo csrf_token(); ?>' // hmmmm...
var hiddenInput =
$('<input>', {
'name': '_method',
'type': 'hidden',
return form.append(token, hiddenInput)
Copy link

raysn0w commented May 16, 2015

Im curious, how did you guys managed to get this to work with the missing '$' before starting the function?

It doesnt work for me unless i add the '$'.

Copy link

how to make it work with L5 ?!

i try to change 'name': 'csrf_token', to 'name': '_token',

but i get

TokenMismatchException in VerifyCsrfToken.php line 46:

Copy link

updated to larevel 5

Copy link

You are genious.

Copy link

hi im new in larave and mine got tokenMismatch can anyone guide me on how am i suppose to include it into my tag thanks :)

Copy link

xoco70 commented Nov 13, 2015

I get a View [] not found.

I understand it, but don't know how to fix it.
In my routes, I use resource();
So, in my route list I have GET (route/{id}) --> Show
So, I don't understand well how should have 2 identical route for 2 actions ( GET (route/{id}) to show or delete)

Here are my route list

PUT | places/{places} | places.update | App\Http\Controllers\PlaceController@update | auth,auth |
| | PATCH | places/{places} | | App\Http\Controllers\PlaceController@update | auth,auth |
| | GET|HEAD | places/{places} | | App\Http\Controllers\PlaceController@show | auth,auth |
| | DELETE | places/{places} | places.destroy | App\Http\Controllers\PlaceController@destroy | auth,auth |
| | GET|HEAD | places/{places}/edit | places.edit | App\Http\Controllers\PlaceController@edit | auth,auth |

Copy link

janzenz commented Jan 20, 2016

Got a problem with this where the link gets redirected instead of triggering the event. So I transferred e.preventDefault(); at the beginning of handleMethod method and it solved my problem.

Copy link

Chalkin commented Feb 1, 2016

Thanks a lot guys! Works perfectly and saves lives!

Copy link

Something like this maybe?

<meta name="_token" content="{{ csrf_token() }}">

and then send it in the form:

 'value': $('meta[name="_token"]').attr('content')

Copy link

dialyy commented Apr 6, 2016

Folks using L5

Line 57 to 62
change ->

      var token = 
      $('<input>', {
        'type': 'hidden',
        'name': 'csrf_token',
          'value': '<?php echo csrf_token(); ?>' // hmmmm...

to ->

      $('<input>', {
        'type': 'hidden',
        'name': '_token',

Copy link

Thanks @dialyy

Copy link

@dialyy +1

Copy link

pastullo commented Jul 3, 2016

unbelievable! How crazy is that i need to paste 80 custom lines of Javascript to simply get a non-GET link to work?

Missing the super useful Rails helpers and the magic UJS:

link_to path, 'Delete', method: :delete

Copy link

Thanks @dialyy !!!

Copy link

ghost commented Oct 8, 2016

Thx @Dially

Copy link

How can you test this links on laravel ?

testSomeLink() { $this->visit('link')->see('result'); }

In this case I get a method not allowed exception.

Ideas ?

Copy link

act360 commented Apr 19, 2017

I tried to modify alert layout with other js library but when i click delete it does not wait for confirm to delete.can anybody give some idea on this?

Copy link

tmomin commented May 16, 2017

Cant seem to get this to work.


@section('title', 'Search')

    <script src=""></script>
    <script src="/js/laravel.js"></script>

    <div class="container theme-showcase" role="main">

        <!-- Main jumbotron for a primary marketing message or call to action -->
        <div class="jumbotron">
            <h1>Welcome to AKF Golf 2017</h1>
            <p>This site is to be used to check players on the of the tournament.</p>

        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <table class="table table-striped table-hover">
                        <th>Dollar Amount</th>
                        <th>Number of Players</th>
                    @foreach($sponsors as $sponsor)
                            <td>{{ $sponsor->id }}</td>
                            <td>{{ $sponsor->name }}</td>
                            <td>${{ $sponsor->dollarAmount }}</td>
                            <td>{{ $sponsor->numOfPlayers }}</td>
                            <td><a href="{{ url('/sponsors', [$sponsor->id]) }}">Edit</a></td>
                            <td><a href="{{ url('/sponsors', [$sponsor->id]) }}" data-method="DELETE" data-confirm="Are you sure?">Delete</a></td>

    </div> <!-- /container -->


<script src=""></script>
<script src=""></script>

Copy link

I've made Javascript Vanilla version of this:

no longer depend on jQuery anymore 😄

Copy link

kohlerdominik commented Jan 22, 2018

This is a nice way for links. But for forms, in my opinion it's better to change the form attributes (and the "_method"-field if necessary). I couldn't find any solution for this, so i made my own script. It's built very like Jeffreys code.


<input type="submit" value="Submit to alternative action" data-submit-action="/new-target">
<input type="submit" value="Submit to alternative target" data-submit-target="_blank">
<input type="submit" value="Submit as delete" data-submit-method="delete">
<input type="submit" value="Submit with confirmation" data-submit-confirmation="Are you sure?">
 {{ Form::submit('Submit alternative', [   'data-submit-action' => '/new-target',
                                        'data-submit-target' => '_blank',
                                        'data-submit-method' => 'delete',
                                        'data-submit-confirmation => 'Are you sure?'  ]); }}

I uploaded the full script to my own gist:

Copy link

If the event is not firing it is probably because document is not ready yet. Try this:

Copy link

a1iraxa commented Jul 4, 2018

This would even work in bootstrap-modal and dynamic inserted button.

Return response must be:


Inspired by:

Copy link

How would I then send any data that is outside of the form to the form, if the form is appended to the body?

i.e. I have multiple checkboxes in a table. How would these get sent to the form so they can be deleted?

Copy link

Here's a Vue version -

turn your <a href="MY_PUT_URL" class="button">Go!</a> into <method-link href="MY_PUT_URL" method="PUT" classes="button">Go!</method-link>

Copy link

eemr3 commented May 18, 2020

Nice one Jeffrey, Thanks!

Copy link

rodrigoespinozadev commented Aug 1, 2020

Thank you @JeffreyWay just what i needed you rock!

Copy link

Here's a simple update that uses vanilla JS and a default confirmation message:

Copy link

atulmahankal commented Oct 5, 2022

add <meta name="csrf-token" content="{{ csrf_token() }}" /> into head
Change below code

        'name': 'csrf_token',
        'value': '<?php echo csrf_token(); ?>' // hmmmm...


        'name': '_token',
	'value': document.getElementsByName('_token')[0].value,

else it gives 419 | PAGE EXPIRED Error

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment