Laravel 記事の削除ができない（"The POST method is not supported for this route. Supported methods: DELETE."）

Question

#最終的な目標
任意の記事をModelのdelete()を使用し削除することをしたいと考えています。

#ソースコード
###HomeController.php

namespace App\Http\Controllers;
use Illuminate\Support\Facades\Auth;
use App\Http\Controllers\DB;
use Illuminate\Http\Request;
use App\Post;
use Illuminate\Support\Facades\Storage;
class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }
//〜〜その他のコード省略〜〜〜〜〜〜〜〜〜〜〜

  public function destroy(Post $post) {
          $post->delete();
          return redirect('/star/admin');
        }
}

###web.php

//〜〜その他のコード省略〜〜〜〜〜〜〜〜〜〜〜
Route::delete('/posts/dell/{post}', 'HomeController@destroy');

###home.blade.php

  @foreach($val as $pages)
  
    <tr>
  
    <td>{{$pages->updated_at}}</td>
      <td><a href="{{url('/page/'.$pages->id )}}">{{ $pages->title }}</a></td>
      <td><span id="{{$pages->type}}"></span></td>
      <td>

//下記の削除ボタンをクリックしたら削除処理実行
<a class="btn btn-danger" href="#"data-id="{{$pages->id}}">削除</a></td>
    </tr>

   <form method="post" action="{{url('/posts/dell',$pages->id)}}"id="form_{{$pages->id}}">
       {{ csrf_field() }}
      {{ method_field('delete') }}
    </form>
 @endforeach

###main.js

document.addEventListener( 'DOMContentLoaded' , function( e ) {
    'use strict';
    var cmds = document.getElementsByClassName('btn btn-danger');
    var i;
    for ( i = 0; i < cmds.length; i++ ) {
        cmds[ i ].addEventListener( 'click', function( e ) {
            e.preventDefault();
            if ( confirm( 'are you sure?' ) ) {
                document.getElementById( 'form_' + this.dataset.id ).submit();
            }
        }, false );
    }
}, false );

#エラーメッセージ

"The POST method is not supported for this route. Supported methods: DELETE."

#その他

• ドットインストールのコードを元にしています。

全く解決方法が見いだせません…
どなたかご親切なかたご教授お願いいたします。

Answer 1

JavaScriptを使用したSubmitを削除し、<input type="submit" value="削除">を使用した送信で削除ができるようになった。

Answer 2

同様のエラーに遭遇しました。
javascriptを使用するとこのエラーになることがあるようです。

Answer 3

bootstrap使ってるなら削除確認はbootstrapのModal使えばいいのでは。
自分がいつもやってること。

削除ボタンクリックでモーダル表示
→モーダル内の削除ボタンで実際に削除。
htmlしか書いてないのでJSからsubmitしてるからなにかおかしいとかがない。

削除確認程度にmain.jsみたいなこと書きたくない。Laravelの学習とは関係ない部分だから適当に流せばいい。

Comments

[y_ymo10]

回答ありがとうございます。Jsを使用せずsubmitしたところ解決いたしました。
対応ありがとうございました。

Answer 4

動作確認していませんが…

Laravel web.php側で、メソッド「delete」で受けているのに、
View側のformタグのmethod属性が、「POST」になっているからだと思います。
web.phpでのメソッドと合わせる必要があります。

home.blade.php

 <form method="delete" action="{{url('/posts/dell',$pages->id)}}"id="form_{{$pages->id}}">

Comments

[y_ymo10]

返信ありがとうございます。修正して試しましたが、同じメッセージが表示されました。
deleteで送信することは、method_field('delete')を設置しているので問題ないかと思うのですが、他におかしな点がありましたら、ご指摘お願いします。

[pochi_kun]

なるほど、これはお恥ずかしい、大変失礼いたしました。

ちなみに、生成されたHTML上はどのようになっていますか？
また、Laravelのバージョンはいくつでしょうか？

[y_ymo10]

バージョンですが、5.8.19　です.
生成されたコードは下記のとおりです。

<td>2019-05-30 11:11:23</td>
<td><a href="http://">テスト投稿4</a></td>
<td><span id="event"></span></td>
<td><a href="http:///post/31/" class="btn btn-success">編集</a><a class="btn btn-danger" href="#"data-id="31">削除</a></td>
</tr>

<form method="delete" action=/posts/dell/31"id="form_31">
<input type="hidden" name="_token" value="">
<input type="hidden" name="_method" value="delete">
</form>
</tbody>
</table>

トークンとactionのアドレスはすみませんが、削除しました。
対応お願いいたします。

[y_ymo10]

先程、JavaScriptを使用せずSubmitしたところ解決いたしました。対応ありがとうございました。