PHPで複数の情報を同時にPOSTしたい（formがネストする場合）

Question

前提・実現したいこと

PHPで下記ソースコードの3行目と8行目にあるテキストフォームにユーザーが入力した情報を、
9行目の変更or削除ボタンをsubmitした時に、同じページに同時にPOST送信したいのですが、
formで行うにも間に別のformがあり（これは別ページへのPOSTです）、
ネストしてしまうためどのように解決すれば良いか悩んでいる状態です。

プログラム駆け出しの者でして、記述に足りない点などあるかと存じますが、
何らかのご意見を頂戴できますと幸いでございます。

該当のソースコード

	foreach($disp_data as $val) { 
		print_r("<tr>");
		print_r("<td><input type=text name=arrayUser value='".$val["arrayUser"]."'></td>");
		print_r("<form action='./test.php' method='post'target='_blank' name='search'>");
		print_r("<td><input type='submit' name='Detail' value='".$val['arrayID']."'></td>");
		print_r("</form>");
		print_r("<td>".$val['name']."</td>");
		print_r("<td><input type=text name=arrayNote value='".$val['arrayNote']."'></td>");
		print_r("<td><input type=submit name=Update value='変更'>　<input type=submit name=Delete value='削除'></td>");
		print_r("</tr>");
	}

試したこと

下記の方法は試してみたものの、そもそもJavaScriptの知識がまだ乏しく上手く実装できませんでした。
https://qiita.com/k5trismegistus/items/eda92664037f96f40e37
https://qiita.com/zakiyamaaaaa/items/bdda422db2ccbaea60d9

検索するとほぼJavaScriptによる実装になるといった印象を受けているのですが、
もしかしたら実はもっと単純な形で実装できるのではないかと思い、ご質問した次第です。

Comments

[x_x]

form はネストできないし、tbody の子にもできません。JavaScript の前にまずは正しい HTML をかけるようになってみては？

[m.ts10806]

そもそもprint_r() が本来の用途と違った使い方をされているような。
echoまたはprintですね。
https://www.php.net/manual/ja/function.print-r.php
指定した変数に関する情報を解りやすく出力する

[azuapricot]

コードを書くのもめんどくさいので追記に書きます～。
formのネストはできません。
となると、どーしたらいいかとなると、JSで変更するのが一番カンタンかなと思います。

formで該当コード全体を囲う
押されたボタンのIDを取得して、JavaScriptでクリックイベントを設定
押されたボタンに該当する送信先を、JavaScriptの処理で書き換える
(action属性を変更すれば送信先は書き換えられるでしょう。）
JSお勉強しましょう。毛嫌いするほど難しい処理ではないです。
数行でおわります。

[退会済みユーザー]

システムとして何を作ろうとしていて、その中でいま作っているところはどういうことを実現しようとしているのか、っていう話がほしい。で、狭い見識（失礼）の中でとりあえずコードを書いてみた方向性が正しいのか間違っているのか、改善するにはどうしたらいいのか、という話にしたい。

[退会済みユーザー]

皆さま、早速のご回答をありがとうございます。
コードの拙さについては申し訳ありません。
今は色々なものを見様見真似で書いている状態でして、覚えながら改善していきたく思います。

>azuapricot様
アドバイスありがとうございます。
やはりjsがいいのですね。それではまずはjsの習得から始めたいと思います。

>m6u様
ご連絡ありがとうございます。
現在、PHP上でユーザー情報の登録されたデータベースを表示しております。
その中のユーザー名と内容はテキストフォームにしており（3行目arrayUserと8行目arrayNoteの箇所です）ここを修正してUpdate ボタンを押下した時にテキストフォームに入力した値をPOSTして、その値を元にデータベースへのupdate用のSQL文を記述したい、が、間に別formがあるためにPOSTできない（やり方がわからない）といった状況でございます。

JavaScriptはまだ未学習でして、色々調べるうちに必要であることは感じたのですが、もし参考になるものがあればご教示いただきたいと思っていました。

Answer 1

まずはざっとリファクタリングします。
制御構造に関する別の構文を使えば凄まじく簡素に書けるので、
質問文のようにprintrを重ねるよりはこう書いた方が余程人間に読みやすいのです。
真似してくれてもいいのよ？

<?php foreach($disp_data as $val): ?>
  <tr>
    <td>
      <input type=text name=arrayUser value="<?= $val['arrayUser'] ?>">
    </td>
    <form action="./test.php" method="post" target="_blank" name="search">
      <td>
        <input type="submit" name="Detail" value="<?= $val['arrayID'] ?>">
      </td>
    </form>
    <td><?= $val['name'] ?></td>
    <td>
      <input type="text" name="arrayNote" value="<?= $val['arrayNote'] ?>">
    </td>
    <td>
      <input type="submit" name="Update" value="変更">
      <input type="submit" name="Delete" value="削除">
    </td>
  </tr>
<?php endforeach; ?>

さて見ていきましょう。

これはアレか、分かりますよ。
私も駆け出しエンジニアの頃に全く同じ内容で悩みました。
何故ならば以下の成約がつきまとうからです

• form要素はネスト出来ない
• table要素は親子関係のタグが厳格に決められており、trやtdを包むようなformは定義できない
• その状態で1行1formとして扱いたい

その解決策は2つです。

• display - HTMLクイックリファレンス
• input要素のform属性 - HTML5入門

前者はもう見た通りです。
大昔はテーブル構成にしたければtable -> tbody -> tr -> tdの順番にマークアップしていく必要がありましたが、
CSSの拡張によりこれをエミュレートすれば全然別のタグでtable -> tr -> tdと似たような事が出来るようになりました。

<style> <!-- できれば外部CSSファイルでやってね -->
section {
  display: table;
}
form {
  display: table-row;
}
.cell {
  display: table-cell;
}
</style>

<section> <!-- table要素っぽく振る舞う -->
  <form> <!-- tr要素っぽく振る舞う -->
    <div class="cell"> <!-- td要素っぽく振る舞う -->
      <input type="submit" name="Detail" value="<?= $val['arrayID'] ?>">
    </div>
    <div class="cell"> <!-- td要素っぽく振る舞う -->
      <input type="submit" value="変更">
      <input type="submit" value="削除">
    </div>
  </form>
  <form></form> <!-- 次のループのform要素 -->
</section>

イメージとしてはざっとこんなもんですね。
うまくforeachで包んで実現してください。

さて、次は後者のform属性を利用するほうに関して解説

<input form="所属するform要素のid属性値">

HTML5で追加されたform属性を利用すれば、
form要素の外からその配下の要素として存在出来ます。

<?php foreach($disp_data as $val): ?>
  <tr>
    <td>
      <form id="<?= $val['arrayID'] ?>" action="./test.php" method="post" target="_blank">
        <input type=text name=arrayUser value="<?= $val['arrayUser'] ?>">
      </form>
    </td>
    <td>
      <input type="submit" name="Detail" value="<?= $val['arrayID'] ?>" form="<?= $val['arrayID'] ?>">
    </td>
    <td><?= $val['name'] ?></td>
    <td>
      <input type="text" name="arrayNote" value="<?= $val['arrayNote'] ?>" form="<?= $val['arrayID'] ?>">
    </td>
    <td>
      <input type="submit" name="Update" value="変更" form="<?= $val['arrayID'] ?>">
      <input type="submit" name="Delete" value="削除" form="<?= $val['arrayID'] ?>">
    </td>
  </tr>
<?php endforeach; ?>

こんな風に1カラム目に代表になるformを用意しておいて、
他のinput要素にform属性を指定すれば飛び道具のように紐付けて使えます。

Comments

[miyabi-sun]

因みに私が調査した時は上のどちらも使えない時代だったので、
仕方ないのでformを諦めて全部JavaScript(jQuery)で実装しました(憤怒

[退会済みユーザー]

>miyabi-sun様
とてもご丁寧な回答をいただき感謝いたします…！
是非とも参考にさせていただき、試してみたいと思うのですが1点だけよろしいでしょうか。

いただいた記述ですと、すべて同時にPOSTされるようにお見受けしましたが、私の説明不足で大変申し訳ないのですが、./test.phpへのPOSTはarrayIDだけで、arrayUserとarrayNoteは別にPOSTするのが希望です。

今、私の頭で応用策が出てこないのですが、この場合だとやはりJavaScriptが妥当でしょうか。
ご意見頂戴できればうれしく思います。

[miyabi-sun]

なるほど、formはネスト出来ないので
1つ目のカラムで2つのformを宣言しましょうか。
idはHTML文書内で一意になっているものですので、2つのformに接頭語をつけて別々のidにしてつかいましょう。

```
<td>
<form id="user_<?= $val['arrayID'] ?>"></form>
<form id="note_<?= $val['arrayID'] ?>"></form>
</td>
```

流石にここまで行けばなんとかなる？

[退会済みユーザー]

お早い回答、本当にありがとうございます！
さすがに何から何まで教えて頂くのは自分のためにならないので、ここからは自分で考えてやってみたいと思います。
ここまでお時間を割いて教えていただいて、感謝しています。
また出来ましたらきちんとこの場でご報告いたします。
（もしまた詰まってしまって相談させていただいたらすみません…）

[退会済みユーザー]

miyabi-sun様
ご返信が遅くなってしまって失礼しました。
教えていただいた通りにやってみて、無事POSTすることは出来ました！
あとはcssで形を整えるだけですが、お陰様で目的は達成できましたので、お礼を申し上げるとともに、この質問を解決済みとさせていただきます。
ありがとうございました！