テーブルのセレクトボックスを選択した行の値を取得して、コントローラーに送信したい

Question

Laravel6.0を使用しています。

「登録」ボタンを押した時に、セレクトボックスが選択されている行の値を取得して、その値をコントローラーに送信したいです。

厳密にやりたいこととしては、

1. セレクトボックス から上司を選択する
2. 登録ボタンを押した時に、上司が選択されていたら、その行のvalueを取得してコントローラー側に送信したい。

【画像の例】
社員ID 1,2,3 に対して 上司 が選択されているので、

2(上司ID=2), 1(社員ID=1), ユーザー名
3(上司ID=2), 2(社員ID=1), ユーザー名
3(上司ID=2), 3(社員ID=1), ユーザー名

を、コントローラーに送信したいです。

選択したセレクトボックスの値だけを送信するイメージはついているのですが、社員ID,社員名も同じように送信するイメージが上手く湧かない状態になります。
こちら実装のイメージが上手く湧かず....

登録ボタンをクリックした時に、javascript側で値を取得する処理を挟むものと予想しています。

こちらに関しまして、ご教示いただけますと幸いです。

フロント側のイメージ画像は下記のような形になります。

<table id="test1">
  <thead>
    <tr>
      <th>上司を選択</th>
      <th>社員ID</th>
      <th> 社員名 </th>
    </tr>
  </thead>
  <tbody>
    @for ($i = 1; $i < 5; $i++) <tr>
      <td>
        <select name="manager_id[]">
          <option value="">選択してください</option>
          <option value="1">上司A</option>
          <option value="2">上司B</option>
          <option value="3">上司C</option>
          <option value="4">上司D</option>
          <option value="5">上司E</option>
        </select>
      </td>
      <td>{{$i}}</td>
      <td>ユーザー名</td>
      </tr>
      @endfor
  </tbody>
</table>

<div>
  <button>登録</button>
</div>

$('button').on('click',function(e){
    // 一度フォームの送信を停止
  e.preventDefault();
    //選択された行のデータを取得したい
});

Comments

[FKM]

DBはなにか使っているんですか？

[fork_]

DBはMysqlを使用しています。
コントローラーに値を送信して、モデルを介してDBにデータを保存、というところまでやりたいのですが、
今回はフロント側に問題があるため、コントローラーから先の処理は記述していませんでした。

[FKM]

つまり、上司に紐付いたDB上の部下の情報をコントローラに送る前に取得して展開したいということで宜しいですかね？

[fork_]

はい、その認識であっております。。

Answer 1

コントローラに送る前に紐付いた情報を取得する方法で一番適切なのはAjaxを使うことでしょうね。

LaravelだとjQueryを使わなくてもFetchAPIやaxiosあたりでもさくっと取れるはずなのです。そしてDBに問い合わせて紐付いた値を取得し、後はそれを転送するのですが…

注意点としてhiddenでは配列は取得できないので、それを一本化した文字列に修正する必要があるかと思います。それでもコントローラで文字列の分解など何かしら処理は必要にはなります。

結論から言えば、コントローラから紐付いた値を取得する、というのが本来のセオリーです（配列のようにバルク化した値を取得するのが困難なため）。