form外のボタンでsubmitできない時の対処法

#解決したいこと(1)
フロント(デザイン)の関係でformタグ内に各種パーツ(inputやsubmitボタンなど)を配置できないが、form外のパーツを送信したい。

以下のような場合↓

　<form action="">
　　<label for="">formタグ外のボタンからテキストを送信したい。</label>
　　<input type="text">
　</form>

　<div>
　　<button type="submit">submit</button>
　</div>

#対処法(1)

• formタグにidを付与
• buttonにformクラスを追加し、formタグのidと同じものをつけて紐付ける。

###対処後のコード

<form id="hoge" action="">
　<label for="">formタグ外のボタンからテキストを送信したい。</label>
　<input type="text">
</form>

<div>
　<button type="submit" form="hoge">submit</button>
</div>

#解決したいこと(2)
HTML内でPHPのforeachで回した時にハマったこと。

• テーブルセルの編集をクリック→送信→DBを更新したい
• 常に一番上にあるセルのレコードのみが更新されてしまう

#対処方(2)
常に同じレコードしか更新されないため、送信されるもの（inputされたもの）が厳密に識別されていないのでは、と推測。

###失敗パターン
modalの紐付け部分抜粋

<div>
　<button type="button" class="btn btn-light" data-toggle="modal" data-target="#moge-modal">クリックで送信formを開きます。</button>
</div>
<div class="modal fade" id="moge-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

.modal-body部分のみ抜粋

<div class="modal-body">
　<form id="moge" action="form_update.php?feed_update=<?php echo $r['id']; ?>" method="POST">
　　<label for="">formタグ外のボタンからテキストを送信したい。</label>
　　<input type="text" class="form-control" name="feed_update">
　</form>
　<div>
　　<button type="submit" class="btn btn-light" form="moge">submit</button>
　</div>
</div>

###成功パターン
modalの紐付け部分抜粋

<div>
　<button type="button" class="btn btn-light" data-toggle="modal" data-target="#moge-modal<?php echo $r['id']; ?>">クリックで送信formを開きます。</button>
</div>
<div class="modal fade" id="moge-modal<?php echo $r['id']; ?>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

.modal-body部分のみ抜粋

<div class="modal-body">
　<form id="moge<?php echo $r['id']; ?>" action="form_update.php?feed_update=<?php echo $r['id']; ?>" method="POST">
　　<label for="">formタグ外のボタンからテキストを送信したい。</label>
　　<input type="text" class="form-control" name="feed_update">
　</form>
　<div>
　　<button type="submit" class="btn btn-light" form="moge<?php echo $r['id']; ?>">submit</button>
　</div>
</div>

#参考および使用したもの
###参考
Bootstrap4移行ガイド
###今回のコード
以下のソースでは、submitボタンの位置やデザインが上記のコードとは異なりますのでご注意下さい。表示位置およびデザインが異なるだけで挙動は同一です。
GitHub

#終わりに
今回は、テーブルのレコード（横一列）を丸ごとforeachで回していたので、formタグのidとボタンのformクラスにDBからのidを追加することで識別できました。

開くmodalの識別も必要になります。formタグ等と同じようにDBからのidを付与し、厳密な識別を行なってください。

表示させるもの全てが、foreachの中にあるからこそできることですね。ボタンがformタグの中にない、foreachの中にもないとなった時にはJSを動かす必要がありそうです。