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

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

ただいまの
回答率

90.50%

  • PHP

    20374questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16454questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8996questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Laravel

    667questions

    LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

foreachで回したデータベースのIDをHTMLのボタンで取ってくる方法

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 247

masateru2

score 23

 前提・実現したいこと

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

 該当のソースコード

<!--top.blade.php-->

@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>

        <!-- 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>
          <!--ここで現在Valueでidを取ってきて受け渡そうとしている-->
          <button type="button" class="btn btn-primary" 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() }}
<!--ここでIDを受け取ってどのカラムかを判断している。-->
           <input type="hidden" class="form-control" name="id" value="{{ $article->id }}">
           <div class="form-group">
             <label for="titleInput">Title</label>
             <input type="text" readonly class="form-control" id="titleInput" name="title" 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

変更後コード

@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
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

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

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

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


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


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

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

※未検証

ボタン

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


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

<input type="hidden" class="form-control" name="id" value="" id="delete_id">
$(function(){
  $(".delete_btn").on("click",function(){
    $("#delete_id").val($(this).val());
  });
});

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

ご参考まで。

 ミニマムコードサンプル

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

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


提示したコードと同じ

$(function(){
  $(".delete_btn").on("click",function(){
    $("#delete_id").val($(this).val());
  });
});

結果:
ボタンを押したらその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 11:23

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

    キャンセル

  • 2018/07/03 11:43

    えっとおそらくLaravelの構造理解されてないのだと思いますが、
    確かBootStrapが標準で入ってますよね。
    BootStrapはjQuery必須のCSSフレームワークです。
    提示のコードにあるモーダルもBootStrapの機能により表示させています。
    ガンガンにJavaScriptコードが動いていますよ。

    というかLaravelはあくまでサーバー言語(PHP)のフレームワークです。
    その質問は「PHPで出力したHTMLではJavaScriptが利用できるのでしょうか?」という質問と同義です。

    PHPはあくまで文字列出力をしているだけ。
    それをHTMLコードを出力してブラウザから確認するからHTMLとして動くのです。

    キャンセル

  • 2018/07/03 11:55

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

    キャンセル

  • 2018/07/03 11:57

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

    キャンセル

  • 2018/07/03 12:08

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

    キャンセル

  • 2018/07/03 12:10

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

    キャンセル

  • 2018/07/03 12:16

    変更点追加しました。
    console.logで見て見ると想定通りのIDが入っているのが確認できます。

    キャンセル

  • 2018/07/03 12:50

    console.logではないですね。ブラウザで表示してhtmlソースを確認してください。
    そこに想定通りのIDが入っていなければいけません。
    一応、ミニマムコード作ってみますね。

    キャンセル

  • 2018/07/03 12:59

    お手数おかけし、申し訳ございません

    キャンセル

  • 2018/07/03 13:08

    回答を更新しました。
    あと気になる点をあげています。

    キャンセル

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

  • ただいまの回答率 90.50%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • PHP

    20374questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    16454questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    8996questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Laravel

    667questions

    LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。