分からないこと

foreachで生成したテーブルの、特定の行(tr)の特定のカラム(td)の値の取得方法

実現したいこと

データごとにテーブルの行を作成するために、Controllerから渡ってきた値を、tableタグ内、tbody内でforeachして、tr,tdを生成しているのですが、
そこにボタンを設置し、
・ボタンが押されたら、その行の特定のtdの値(user_id)を取得(jQuery利用）
・そのuser_idを、foreachの外にあるformタグ内のhiddenのvalueにして、submit()
という処理を実装したいです。

以下、実装イメージです。

PHP
1@foreach ($data as $key => $val)
2   <tr>
3   　　<td><input class="btn" type="button" id="detail" name="detail" value="詳細" onClick="submitUserId()"></td>
4   　　<td>{{$val['user_id']}}</td>
5   　　<td>{{$val['user_name']}}</td>
6   </tr>
7@endforeach
8
9<form id="to_detail" action="/detail" method="POST">
10   <input type="hidden" id="user_id" value="">
11</form>

※foreachでformタグ生成してsubmitボタンも生成、は他の処理との兼ね合いがありできません

質問したいこと

上記コードで言うところの、onClick="submitUserId()" の中で、
「押されたボタンと同じ行のtdのうち、特定のもののvalueを取得」
「そのvalueを、外のformタグのhiddenのvalueとする」
という処理をどのように書けばよいでしょうか。
ググってもなかなか情報が見当たらず、困っております。

知見がお有りの方、どうぞよろしくお願いいたします。

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

回答4件

jqueryとかでできますね。
まず、tdにidを振る。
この場合は、idがbtn-aの場合のvalueを取得。
var btn = $('#btn-a').val();

あとは、セットする。

<form name="form2"> <input type="hidden" name="hidden2" value=""> </form> document.form2.hidden2.value = "blue";

投稿2020/10/07 04:42

firegrape

総合スコア902

m.ts10806

2020/10/07 04:53 編集

「id振る→jQueryでとる」という提案しておきながらセットでそれはさすがに。ボタンのvalueとっても意味ないですし。（tdにID振ってもval()では取れない）

YO14

2020/10/09 14:50

私の求める情報ではなかったようです。失礼いたします。

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

php
1@foreach ($data as $key => $val)
2   <tr>
3   　　<td>
4          <input class="btn"
5              type="button" 
6              name="detail" 
7              value="詳細" 
8              data-id="{{$val['user_id']}}" 
9          />
10      </td>
11   　　<td>{{$val['user_id']}}</td>
12   　　<td>{{$val['user_name']}}</td>
13   </tr>
14@endforeach
15
16<form id="to_detail" action="/detail" method="POST">
17   <input type="hidden" name="user_id" value="">
18</form>
19
20<script>
21$("table .btn").on('click', function(){
22    let id = $(this).data('id');
23    $('#to_detail :hidden[name="user_id"]').val(id);
24    $('#to_detail').submit();
25})
26</script>

投稿2020/10/07 04:38

phper.k

総合スコア3923

ベストアンサー

jQueryの必要性を感じない内容ですが、、ボタンにonclick仕込んでるなら、引数につけては？

onClick="submitUserId({{$val['user_id']}})"

あとはいっそformをつけてしまう

@foreach ($data as $key => $val)
   <tr>
   　　<td>
   <form id="to_detail" action="/detail" method="POST">
      <input class="btn" type="submit" id="detail{{$val['user_id']}}" name="detail" value="詳細">
      <input type="hidden" id="user_id{{$val['user_id']}}" name="user_id" value="{{$val['user_id']}}">
   </form>
   　　</td>
   　　<td>{{$val['user_id']}}</td>
   　　<td>{{$val['user_name']}}</td>
   </tr>
@endforeach

name属性がない要素は送信されないので注意が必要。

投稿2020/10/07 04:37

編集2020/10/07 04:58

m.ts10806

総合スコア80875

YO14

2020/10/09 14:51

ご回答ありがとうございます。 onClick="submitUserId({{$val['user_id']}})" こちらのやり方と、formタグにhiddenを用意してそのvalueに$val['user_id"]を入れることで、求めていた結果が得られました。 jsのメソッドの引数に、{{ }} で書いた変数をそのまま使えるとは知りませんでした。