プログラミング学習262日目〜Laravel 自動車整備履歴アプリ作成 14日目〜

Pukumon Go

登録車輌の削除の実装ですが、削除自体は簡単なのですが、ボタンクリックで一気に削除されないよう確認のダイアログを表示させた上で削除させることに予想以上に手間取りました。

やりたいことは、ボタンをクリックするとダイヤログを表示して、キャンセルならそのまま、OKならページの移動、これだけです。
結果から言うとこれでうまく動作しました。

<form method="POST" action="/carinfo/destroy/{{$carinfo->id}}">
   @csrf
   <button type="submit" class="btn btn-danger btn-sm" onclick="return checkDestroy()">削除</button>
</form>

<script>
   function checkDestroy(){
       if(window.confirm('削除してよろしいですか？')){
           return true;
       } else {
           return false;
       }
   }
</script>

 

ついでにいうとこれでも動作します。

<a href="/carinfo/destroy/{{$carinfo->id}}" onclick="return checkDestroy()">削除</a>

<script>
   function checkDestroy(){
       if(window.confirm('削除してよろしいですか？')){
           return true;
       } else {
           return false;
       }
   }
</script>

ただしこの場合ルートのメソッドはpostではなくgetになります。

Route::get('/carinfo/destroy/{id}',[CarinfoController::class, 'destroy']);


わけあってbuttonタグで実装したかったので、最初の方法を採りました。
で、手間取ったのはなぜかというと、formタグを使わず実装しようとしていたから。
クリックしたときにダイアログが出て、ページが移動すればいいのだからということで


 <button type="submit" class="btn btn-danger btn-sm" 
 onclick="location.href='/carinfo/destroy/{{$carinfo->id}}'; return checkDestroy()">削除</button>


<script>
   function checkDestroy(){
       if(window.confirm('削除してよろしいですか？')){
           return true;
       } else {
           return false;
       }
   }
</script>

こうしていました。
一瞬うまく動作したとは思ったのですが、この場合ダイアログでOKにしてもキャンセルにしてもページが移動され結果的に削除が実行されてしまいます。

多分JavaScriptでうまく書けば解決するのだとは思うのですが、formタグを使えばうまくいきそうだと思いついたというか思い出したので今回はそちらで実装しました。

ちなみにonclick時に複数動作させる場合についてはこちらの記事を参考にしました。


この記事が気に入ったらサポートをしてみませんか？