入力されたリスト情報をPOSTで取得し、それを他のページへ表示させたい

目標

図１のようにテキストの入力・追加・削除ができる機能があり、そこで入力されたリスト情報を図２のように表示させたいです。

図１(l1.php)

図２(l2.php)

問題点

36行目より、追加する項目の name 属性がずっと「param3」になってしまいます。34行目あたりで「変数=3」を作成し、追加するごとに「変数+=1」ということができないかなと考えているのですが、答えにたどり着くことができませんでした。
どなたかご教授頂けると幸いです。

PHP(l1.php)
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/jquery-ui.css">
9</head>
10<body>
11
12<form action="l2.php" method='POST'>
13    <div class="container">
14        <table>
15            <tbody>
16                <tr>
17                    <td><input type="text" name="param1"></td>
18                    <td><button class="remove">✕</button></td>
19                </tr>
20                <tr>
21                    <td><input type="text" name="param2"></td>
22                    <td><button class="remove">✕</button></td>
23                </tr>
24            </tbody>
25        </table>
26        <button id="addRow" type='button'>+ 追加</button>
27    </div>
28    <input type='submit'></button>
29</form>
30
31<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
32<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
33<script>
34    $(function(){
35        $('#addRow').click(function(){
36            var html = '<tr><td><input type="text" name="param3"></td><td><button class="remove">✕</button></td></tr>';
37            $('tbody').append(html);
38        });
39
40        $(document).on('click', '.remove', function(){
41            $(this).parents('tr').remove()});
42    });
43</script>
44</body>
45</html>

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

回答1件

ベストアンサー

追加する項目の name 属性がずっと「param3」

document.querySelectorAll('.container tr').length などでテーブル内の <tr> の数を数えて、それから name 属性値を作ればよいでしょう。

一般的には、こういう際限なく増える項目をフォームで送るときはすべて同一の name 値でよいです。1つの name 値に対して複数の値を送ることができます。受け取りが PHP なら、name="param[]" のように [] で終わる値にするとよいでしょう。

投稿2023/02/08 00:06

int32_t

総合スコア20884

flexibler

2023/02/08 03:10

ご回答ありがとうございます。配列として取得できるんですね。 l2.php に下記コードを加えることで実現できました。ご丁寧に教えて頂きありがとうございます。 <?php foreach($_POST['param'] as $value){ echo $value; echo '<br>'; } ?>

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