前提・実現したいこと

現在LaravelでCRUDを製作しています。
そこで削除や新規作成といった項目をページ遷移せずにモーダルで行いたいと考えました。
しかし、ボタンをクリックしてモーダルが出ることころまでは行けたのですが、削除する項目がDBの一番最後の値になってしまっています。
どのようにすればボタンに値を持たせ、それをモーダルに値を渡せますか？

該当のソースコード

php
1<!--top.blade.php-->
2
3@extends('layouts.app')
4
5@section('content')
6<!doctype html>
7<html lang="ja">
8    <head>
9      <title>TOP</title>
10        <meta charset="utf-8">
11        <meta http-equiv="X-UA-Compatible" content="IE=edge">
12        <meta name="viewport" content="width=device-width, initial-scale=1">
13        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
14        <title>Top</title>
15
16        <!-- Fonts -->
17        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
18    </head>
19      <h1>ブログ一覧</h1>
20
21      @foreach ($articles as $article)
22      <div class="card mb-2">
23        <div class="card-body">
24          <h4 class="card-title">{{ $article->title }}</h4>
25          <h6 class="card-subtitle mb-2 text-muted">{{ $article->updated_at }}</h6>
26          <p class="card-text">{{ $article->body }}</p>
27          <!--ここで現在Valueでidを取ってきて受け渡そうとしている-->
28          <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#deleteModal" value="{{ $article->id }}">削除</button>
29        </div>
30      </div>
31 @endforeach
32 <!--DeleteModal-->
33 <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
34   <div class="modal-dialog" role="document">
35     <div class="modal-content">
36       <div class="modal-header">
37         <h5 class="modal-title" id="deleteModalLabel">DeleteConfirmation</h5>
38         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
39           <span aria-hidden="true">&times;</span>
40         </button>
41       </div>
42       <div class="modal-body">
43         <form method="post" action="/delete">
44           {{ csrf_field() }}
45<!--ここでIDを受け取ってどのカラムかを判断している。-->
46           <input type="hidden" class="form-control" name="id" value="{{ $article->id }}">
47           <div class="form-group">
48             <label for="titleInput">Title</label>
49             <input type="text" readonly class="form-control" id="titleInput" name="title" value="{{ $article->title }}">
50           </div>
51           <div class="form-group">
52             <label for="bodyInput">Body</label>
53             <textarea readonly class="form-control" id="bodyInput" rows="3" name="body">{{ $article->body }}</textarea>
54           </div>
55         </form>
56        </div>
57       <div class="modal-footer">
58         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
59         <button type="button" class="btn btn-primary">Delete</button>
60       </div>
61     </div>
62   </div>
63 </div>
64<!-- CreateModal -->
65
66
67
68</html>
69@endsection
70

変更後コード

@extends('layouts.app')

@section('content')
<!doctype html>
<html lang="ja">
    <head>
      <title>TOP</title>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
        <title>Top</title>
変更点
        <script type="text/javascript">
        $(function(){
          $(".delete_btn").on("click",function(){
            $("#delete_id").val($(this).val());
          });
        });
        </script>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
    </head>
      <h1>ブログ一覧</h1>

      @foreach ($articles as $article)
      <div class="card mb-2">
        <div class="card-body">
          <h4 class="card-title">{{ $article->title }}</h4>
          <h6 class="card-subtitle mb-2 text-muted">{{ $article->updated_at }}</h6>
          <p class="card-text">{{ $article->body }}</p>

変更点
          <button type="button" class="btn btn-primary delete_btn" data-toggle="modal" data-target="#deleteModal" value="{{ $article->id }}">削除</button>
        </div>
      </div>
 @endforeach
 <!--DeleteModal-->
 <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title" id="deleteModalLabel">DeleteConfirmation</h5>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
         <form method="post" action="/delete">
           {{ csrf_field() }}
変更点
           <input type="hidden" class="form-control" name="id" value="" id="delete_id">
           <div class="form-group">
             <label for="titleInput">Title</label>
             <input type="hidden" class="form-control" name="id" value="{{ $article->title }}">
           </div>
           <div class="form-group">
             <label for="bodyInput">Body</label>
             <textarea readonly class="form-control" id="bodyInput" rows="3" name="body">{{ $article->body }}</textarea>
           </div>
         </form>
        </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         <button type="button" class="btn btn-primary">Delete</button>
       </div>
     </div>
   </div>
 </div>
<!-- CreateModal -->



</html>
@endsection

行動規範の内容に同意します

回答1件

ベストアンサー

削除する項目がDBの一番最後の値になってしまっています。

foreach抜けたら残っているのは最後のデータのみ（確か）であるからです。
ミニマムサンプルコード

php
1<?php
2$arr = [1,2,3,4,5];
3foreach($arr as $v){
4    echo $v;
5}
6echo $v;
7//123455

$arrの中を1つずつ$vに代入していっています。
自動では破棄されないので最終値が残ったままになっているわけです。

たくさんの同じ形式のボタンがあり、そこに対象のIDが指定されていて、別の場所に渡したい場合、
JavaScriptにてボタンクリックのイベントを別途とって、ボタンに設定されているvalueを設定すれば良いです。

明示的に別のクラスをボタンにつけておいたほうがやりやすいですし、
hiddenも1つしかないならIDつけておいたほうがやりやすいので
それも含めてこんな感じです。

※未検証

ボタン

html
1<button type="button" class="btn btn-primary delete_btn" data-toggle="modal" data-target="#deleteModal" value="{{ $article->id }}">削除</button>

hidden valueはセットしておく必要はありません。

html
1<input type="hidden" class="form-control" name="id" value="" id="delete_id">

js
1$(function(){
2  $(".delete_btn").on("click",function(){
3    $("#delete_id").val($(this).val());
4  });
5});

$(this)のval()とすることで押したボタンのvalueが取れます。

ご参考まで。

ミニマムコードサンプル

html　同じClass名のボタンを並べ、それぞれに違う数字を入れる。
受け取り先でとりあえずtextボックスを設置

html
1<button type="button" class="delete_btn" value="1">削除</button>
2<button type="button" class="delete_btn" value="2">削除</button>
3<button type="button" class="delete_btn" value="3">削除</button>
4<input type="text" name="id" id="delete_id">

提示したコードと同じ

js
1$(function(){
2  $(".delete_btn").on("click",function(){
3    $("#delete_id").val($(this).val());
4  });
5});

結果：
ボタンを押したらそのvalueの設定値がtextボックスに表示される

分かりやすくするためにtextにしましたが、hiddenでも同じです。
hiddenの場合は開発ツールの、GoogleChromeで言えば「Elements」で対象のHTMLコード部分を見ていれば変化しているのがわかります。

「変更後コード」で気になるのは
jQueryの読み込み記述より先にjQueryのコードが書かれているように見受けられるところです。
Bootstrap本体またはjQueryのjsファイルを読み込んでいる箇所はどこでしょうか？それより後にしなければなりません。

あと直接関係はありませんが、modalの$article->titleを入れているhiddenとdelete_idを入れる予定のhiddeのnameが同じになっています。
それでは想定通りのIDが送信できません。

投稿2018/07/03 02:07

編集2018/07/03 04:01

m.ts10806

総合スコア80850

masateru2

2018/07/03 02:23

回答ありがとうございます。現在laravelで製作しているのですが、Jsも使用できるのでしょうか？

m.ts10806

2018/07/03 02:43

えっとおそらくLaravelの構造理解されてないのだと思いますが、確かBootStrapが標準で入ってますよね。 BootStrapはjQuery必須のCSSフレームワークです。提示のコードにあるモーダルもBootStrapの機能により表示させています。ガンガンにJavaScriptコードが動いていますよ。というかLaravelはあくまでサーバー言語（PHP）のフレームワークです。その質問は「PHPで出力したHTMLではJavaScriptが利用できるのでしょうか？」という質問と同義です。 PHPはあくまで文字列出力をしているだけ。それをHTMLコードを出力してブラウザから確認するからHTMLとして動くのです。

masateru2

2018/07/03 02:55

なるほど。構造理解が足りていませんでした。

m.ts10806

2018/07/03 02:57

過去質問からするとやはり「PHP自体への理解不足」は否めませんね。

masateru2

2018/07/03 03:08

確かにWeb言語への理解力は全然無いことは自他共に認めております。あとこの方法でもやはり取れるIDは末尾IDしか取得できませんでした。

m.ts10806

2018/07/03 03:10

それはおかしいですね。私のほうではできています。そもそもどのようなコードを書かれたのでしょうか？各ボタンのvalueには想定通り各IDが入っていますか？