idを取得し、投稿を削除したい

前提・実現したいこと

削除ボタンを押すと、該当の投稿idを取得し、削除したい。

現在、以下のようにデータが削除できるように実装中です。

1.削除ボタンをおす

2.ポップアップが出る

3.「はい」を押すと、データが削除される

##該当コード

php
1<?php
2session_start();
3ini_set('display_errors', "On");
4ini_set('display_errors',1);
5require_once(ROOT_PATH .'Controllers/PlayerController.php');
6$player = new PlayerController();
7$params = $player->index();
8?>
9
10<!DOCTYPE html>
11<html lang="en">
12<head>
13  <meta charset="UTF-8">
14  <meta http-equiv="X-UA-Compatible" content="IE=edge">
15  <meta name="viewport" content="width=device-width, initial-scale=1.0">
16  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
17  <link rel="stylesheet" href="/css/base.css">
18  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
19  <script src="/js/script.js"></script>
20  <title>worldcup</title>
21</head>
22<body>
23  <h2 class="players-lists">■選手一覧</h2>
24  <table class="s-tbl">
25  <tr>
26    <th>No</th>
27    <th>背番号</th>
28    <th>ポジション</th>
29    <th>名前</th>
30    <th>所属</th>
31    <th>誕生日</th>
32    <th>身長</th>
33    <th>体重</th>
34    <th>所属国</th>
35  </tr>
36  <?php foreach($params['players'] as $player): ?>
37  <tr>
38    <th><?=$player['id'] ?></th>
39    <th><?=$player['uniform_num'] ?></th>
40    <th><?=$player['position'] ?></th>
41    <th><?=$player['name'] ?></th>
42    <th><?=$player['club'] ?></th>
43    <th><?=$player['birth'] ?></th>
44    <th><?=$player['height'] ?>cm</th>
45    <th><?=$player['weight'] ?>kg</th>
46    <th><?=$player['所属国'] ?></th>
47    <th><button type="button" class="btn btn-primary"><a id="show" href="show.php?id=<?php echo $player['id'] ?>">詳細</a></button></th>
48    <th><button type="button" class="btn btn-success"><a id="edit" href="edit.php?id=<?php echo $player['id'] ?>">編集</a></button></th>
49    <th>
50      ●●<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">
51        削除
52      </button>
53      <!-- Modal -->
54      <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
55        <div class="modal-dialog">
56          <div class="modal-content">
57            <div class="modal-header">
58              <h5 class="modal-title" id="exampleModalLabel">選手データの削除</h5>
59              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
60            </div>
61            <div class="modal-body">
62              選手のデータを本当に削除しますか？
63            </div>
64            <div class="modal-footer">
65              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">いいえ</button>
66              <button type="button" class="btn btn-primary"><a id="delete" href="delete.php?id=<?php echo $player['id'] ?>">はい</a></button>
67            </div>
68          </div>
69        </div>
70      </div>
71    </th>
72  </form>
73  </tr>
74  <?php endforeach; ?>
75  </table>
76  <div class='paging'>
77  <?php
78  for($i=0;$i<=$params['pages'];$i++) {
79    if(isset($_GET['page']) && $_GET['page'] == $i) {
80      echo $i+1;
81    } else {
82      echo "<a href='?page=".$i."'>".($i+1)."</a>";
83    }
84  }
85  ?>
86  </div>
87<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
88<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
89<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
90</body>
91</html>

※ポップアップとかボタンの装飾はブートストラップで実装しています。

##問題点
上記のコードでは、削除ボタンを押すと、任意のidを削除するのではなく、先頭のidを削除してしまいます。これを任意のidのデータを削除できるようにしたいです。

つまり、現状は3を削除しても1が削除されてしまう。3を削除した時に3のデータが削除されるようにしたい。

##確認ずみ
・データベースの接続は確認済み
・データが削除できることは確認済み

試したこと

●●<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">
  削除
</button>
↓
●●<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#exampleModal">
  <a id="delete" href="delete.php?id=<?php echo $player['id'] ?>">削除</a>
</button>

上記のようにかくと、確かにidごとのデータを削除できるが、ポップアップが表示される前にデータが削除されてしまう。

どのようにすれば、ポップアップで削除を確認し、idごとにデータを削除できるようになりますか？

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

回答2件

buttonの中にアンカーを入れるのはやめた方がいいでしょう

アンカーをボタン風にCSSで修飾するか
ボタン自体に処理をつける

また、挙動がおなじモーダルは共有し、モーダルのボタンにidを渡すのはやめましょう

投稿2021/03/13 13:31

yambejp

総合スコア114843

ベストアンサー

何かがおかしいと思ったら…
foreachで回してるのにポップアップのidを全部同じにしてるから
一番初めに出力されたポップアップがアクティブになるんじゃないかな？

1つのページで同じidを指定すると先頭のモノしか取れなかったはず。
JSで処理するときにidを要素の指定に使うのは、
「１つのページに１つしかない」という前提があって操作しやすいからです。

PHPのechoでidの後ろにナンバリングしてあげれば、
ポップアップのJSがユニークなidを探しに行って、
そのポップアップがアクティブになると予想します。

不安定版であるbootstrap5の機能みたいなのでまだ試したことは無いですが、
JSのポップアップであれば、data-bs-target="#exampleModal+数字"としてやれば効きそうな気がします。
プラグインのsliderなんかでも１ページに２つ使いたいときはslider1,slider2とかしてあげると動くので。

以下追加です。

以下チャレンジコード
※手元の環境で試してないよっ※
※変えて欲しいところだけしか載せてないよっ※

php
1data-bs-target="#exampleModal<?php echo $player['id'] ?>">
2
3id="exampleModal<?php echo $player['id'] ?>"

#exampleModalにナンバーを付与する感じ。
これでidがユニークになり、
JSで指定するポップアップもただ1つに限定されるので効くようになる…はず。

上記で出来なければJSで要素のvalue（or data属性）を取って、
ポップアップのはいボタンのhrefに埋め込む方法というのもあります。

投稿2021/03/13 13:05

編集2021/03/13 13:18

退会済みユーザー

総合スコア0

退会済みユーザー

2021/03/13 13:27

解決しました。ご指摘の通り、idにそれぞれ付与したら問題なく実装できました。ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！