FORM が入れ子になるが正しく動作している。

Question

様々なサイトの皆さんのサンプルを利用させていただき何とか作成しています。

一覧表から「編集」は１行ずつ、「削除」は複数選択で一括削除。
下記のコードで動作しているのですが、「FORMが入れ子のなってはいけない」との記述を見ました。
どうすれば可能でしょうか？

<form method="post" class="main_frm" action="">

<table class='list'>
<tr>
<th>タイトル</th><th>編集</th><th>削除</th>
</tr>
while($result = $select->fetch(PDO::FETCH_ASSOC)){
  <tr>
  <td><?= $result["title"]?></td>
  <td>
  <form method="post" class="edit_frm" action="edit.php">
  <input type="submit" value="編集">
  <input type="hidden" name="upd_id" value="<?= $result["id"]?>">
  </form>
  </td>
  <td>
  <input type="checkbox" name="id[]" value="<?= $result["id"]?>">
  </td>
  </tr>
}
</table>
<input type="submit" value="削除">

</form>

よろしくお願いいたします。

Comments

[FKM]

ちょっと解釈を取り違えていますね。
name="upd_id"に対しvalue=$result['id']で取得している値は配列じゃなく、ただの文字列です。
hiddenは配列を取得できません。

[reiko_y]

あっ本当です。内側のformからは1つしかPOSTしてなかったですね。
hiddenでforeachで表示させる場面では一個一個別でした⤵（結果ソースを見る大事）
きちんと理解して使ってないけどたまたま動くって後から怖いです。
もしかして、FORMの「入れ子」も勘違いでしょうか？

Answer 1

form入れ子は無理です

<table>
<thead>
<tr>
<th><input type="submit"  value="削除" form="del"></th>
<th>&nbsp;</th>
</thead>
</tr>
<tbody>
<tr>
<td><input type="checkbox" name="del[]" value="1" form="del"></td>
<td><button type="submit" name="edit" value="1" form="edit">編集</button></td>
</tr>
<tr>
<td><input type="checkbox" name="del[]" value="2" form="del"></td>
<td><button type="submit" name="edit" value="2" form="edit">編集</button></td>
</tr>
<tr>
<td><input type="checkbox" name="del[]" value="3" form="del"></td>
<td><button type="submit" name="edit" value="3" form="edit">編集</button></td>
</tr>
</tbody>
</form>
<form id="del">
<input type="hidden" name="hoge" value="123">
</form>
<form id="edit">
<input type="hidden" name="fuga" value="456">
</form>

Comments

[reiko_y]

FORMを外に出して操作できるのですね。
できました！ありがとうございます。
頑張ります！

[reiko_y]

すいません。
すぐにできました！と書きましたが、（時間がなくて焦ってます）

<form id="edit">
<input type="hidden" name="fuga" value="456">
</form>
はうまくいきましたが、

<form id="del">
<input type="hidden" name="hoge" value="123">
</form>

は値が送られない（取得できない）ため、メインformの方にそのまま
<input type="checkbox" name="id[]" value="<?= $result["id"]?>">

を残したらできました。これでFORMは入れ子でない状態ですか？

[reiko_y]

普通、formからsubmitすると、URLには値がくっつかないですよね。
この方法だとGETしたときみたいに表示されます。
また、削除のテストでは、３６番、３５番のデータにチェックして実行しましたが、<form id="del">の方法をつかうと　
list.php?del%5B%5D=36&del%5B%5D=35　（暗号化？）
となっています。

[reiko_y]

深く理解できてないのですが、一見、FORMの中にFORMがない状態で正しく動作はしている
コードを「自己解決」として投稿させていただきました。
認識が間違っているのであれば厳しくご指摘下さい。よろしくお願いいたします。

[yambejp]

追加質問の意図がわかりませんが
各formにactionやmethodを指定すればいいだけでは？

[reiko_y]

外側のformに method="post"があるのでいいと思い込んでおりました><;
理解力のない私を見捨てずにいてくださり本当にありがとうございました。
今、編集後のコードをアップしました。（動いているからと載せたら見た人が迷惑しますね）

Answer 2

yambejpさんありがとうございました。
外側のformに method="post"があるのでいいと思い込んでおりました><;
根本的に間違っておりました。

<table class='list'>
<tr>
<th>タイトル</th><th>編集</th><th><input type="submit" value="削除" form="del"></th>
</tr>
while($result = $select->fetch(PDO::FETCH_ASSOC)){
<tr>
<td><?= $result["title"]?></td>
<td>
<button type="submit" name="edit" value="<?= $result["id"]?>" form="edit">編集</button>
</td>
<td>
<input type="checkbox" name="del[]" value="<?= $result["id"]?>" form="del">
</td>
</tr>
}
</table>

<form id="del" method="post" action="list.php">
<input type="hidden" name="fuga" value="123">
</form>
<form id="edit" method="post" action="edit.php">
<input type="hidden" name="fuga" value="456">
</form>

Comments

[K_3578]

teratail内ではソースコードはMarkDownのコードブロックで囲んで頂けると見やすくなります。
お手数ですが回答並びに質問本文も修正頂けると幸いです。

書き方がわからない場合は、以下の質問を参考にしてみて下さい。
https://teratail.com/questions/238564

[reiko_y]

分かりました。しばらくお待ちください。

[K_3578]

編集確認しました、ありがとうございます。
これで第三者が見る際にも見やすいものになりました。
以降teratailを利用される際もソースコードは同様に記載して頂けると助かります。
お手数お掛けしました。

[reiko_y]

見やすくなりました。
ありがとうございました。

Answer 3

よくある実装としては、編集の場合はリンクにしてクエリストリングで対象idつけて遷移
削除は非同期通信でしょうか
formタグ無しで出来ます。

Comments

[reiko_y]

すいません。非同期通信について調べていました。

[reiko_y]

一方的に処理するので非同期通信だと思います。

[m.ts10806]

ちょっと意味がわかりません

[reiko_y]

私の理解不足です。もうちょっと勉強します。
ありがとうございました。

[m.ts10806]

どの部分でしょうか。
認識が違う部分をすり合わせておかないとお話にならないと思うのですが。

[reiko_y]

お詫び：

先にご回答いただいているのにご返事をするのが後になってしまったこと申し訳けありませんでした。

同期・非同期の意味：

同期
ひとつの処理が終わったら次の処理を行う　また、次の処理というように順番に処理を行う。

非同期
ひとつの処理をしながら次の処理も行い、次の処理が終わったことを受けて最後の処理を行う。

時間を節約する、待ち時間をなくす目的？？

なので、私が行っているのは同期処理

JavaScriptは使用せずにボタンを押したら、自分自身に送信してPHPで処理（削除等）を行う⇒　リストを再表示する

理解できていますか？

[m.ts10806]

同期非同期についてはおおよそその通りです。
「時間を節約する」ことにはならないのでその部分は間違い。
結局どこかで同負荷を持ちます。
セッションなどもあわせて考えた方が良いです。

＞JavaScriptは使用せずにボタンを押したら、自分自身に送信してPHPで処理（削除等）を行う⇒　リストを再表示する

何に対する説明でしょうか？

[reiko_y]

すいません。同期の説明ではないかもですが、
チェックを入れる　→　削除ボタン押下　→　一括削除処理　→　削除後のデータ読込表示　　です。

月１０レコード程度、管理者以外が入力（作業）することはないものです。
具体的にどのような場合に非同期処理が必要になるのかは理解できていません。