POSTでform内の配列を取得したい

前提条件・したいこと

input[type="text"]のnameは、image_title[title][]とします。
ファイルを一つずつ選択し、input[type="text"]にタイトルを入力します。
POSTで、それぞれのinput[type="text"]のタイトルの中身を取得します。
POSTで、name=image_title[title]の配列を取得されます。

問題点

POSTから取得した配列の中身が一つしか取得できません。

ソース

php
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
9    <!-- <script src="./jquery.uploadThumbs.js"></script> -->
10    <script src="./form_test_edit_img.js"></script>
11    <title>画像読込テスト</title>
12    <?php
13    $image_title = $_POST['image_title'];
14    $image_title1 = $image_title['title'];
15    foreach((array)$image_title1 as $val){
16        echo $val;
17    }
18    ?>
19</head>
20
21<body>
22    <form action="./form_test.php" method="post" id="test_form"></form>
23    <ul id="files">
24        <li><input type="text" name="image_title[title][]" class="upload_title" form="test_form" /></li>
25        <li><input type="file" name="images[]" class="file_input" accept="image/*" form="test_form" /></li>
26    </ul>
27    <input type="submit" value="submit" form="test_form">
28</body>
29
30</html>

javascript
1$(function(){
2  $(document).on('change','.file_input',function(e){
3    var file = e.target.files[0];
4    var self = $(this);
5    var reader = new FileReader();
6    reader.addEventListener('load',function(){
7      self.after($('<img>').attr('src',reader.result).css('max-width',100));
8    });
9    reader.readAsDataURL(file);
10    $('#files').append($('<li>　</li>'),$('<li><input type="text" name="image_title[title][]" class="upload_title" placeholder="画像のタイトルを入力してください" form="test_form"></li>'),$('<li>').append($(this).clone().val("")));
11  });
12});

POSTを使ってinput[type="text"]の中の配列を取得するためには、どうすればよろしいでしょうか。
foreachの使い方がよろしくないのでしょうか。

皆様方からご助言を頂ければと存じます。
お手数ですが、宜しくお願い致します。

m.ts10806

2021/03/23 07:13

そもそもformタグの位置がおかしくないですか？

unwind

2021/03/23 07:19

m.ts10806様。コメント頂きありがとうございます。 formの位置を修正しました。これで、試してみましたが、やはり一つしかname=image[title][]の中身を取得することが出来ませんでした。

退会済みユーザー

2021/03/23 07:33

image_title[title][]　の[title]って変数なのか文字列なのか。htmlとしてもjsとしても文法がおかしいとjsは動かないですよねぇ。

unwind

2021/03/23 07:40

m6u様コメント頂きありがとうございます。 <input type"text" name="image_title[title][]">のname部分は、name="配列名[列の名前][ ]"となっております。 <input type"text" name="image_title[title][]">で入力された文字列を配列として格納しようとしております。

m.ts10806

2021/03/23 07:51

name内は全部文字列なので指定方法に問題はなさそうですが、ひとまず、$image_titleをデバッグで内容確認してください。

unwind

2021/03/23 08:04

m.ts10806様コメント頂きありがとうございます。上記プログラムに、 function console_log($data) { echo '<script>'; echo 'console.log(' . json_encode($data) . ')'; echo '</script>'; } を追加して、複数タイトルを入力し$image_titleをデバッグしたところ、下記のような内容となりました。 {title: Array(1)} title: Array(1) 0: "aiu" length: 1 __proto__: Array(0) __proto__: Object うまく他に入力したものが配列に収まれてないようです。

hentaiman

2021/03/23 08:14

https://www.php.net/manual/ja/reserved.variables.post.php とりあえず何がPOSTされてるか見てみなされ

unwind

2021/03/23 08:18

hentaiman様コメント頂きありがとうございます。 POSTで得た情報が、先ほど私が書いた内容となります。 {title: Array(1)} title: Array(1) 0: "aiu" length: 1 __proto__: Array(0) __proto__: Object

gpsoft

2021/03/23 08:57

不思議ですね。試してみましたが、ちゃんと受け取れてるみたいでしたよ。タイトルを2つ入力(firstとsecond)してみると、firstsecondと表示されました。また、foreach文の上に var_export($image_title1); を追記してみると、 array ( 0 => 'first', 1 => 'second', ) と表示されました。

FKM

2021/03/23 09:24

jsがエラー吐いてないですよね？ChromeのConsoleなどで確認してみてください。

unwind

2021/03/24 04:04

gpsoft様。FKM様。コメント頂きありがとうございます。ページのキャッシュが古かったようです。なので、ページのキャッシュを削除して新しくページを開いたら無事配列を取得することが出来ました。

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

回答1件

ベストアンサー

どこで詰まっているのかわかりませんが、type=textとtype=fileは
ここでは切り分けて考えたほうがいいでしょう

PHP
1<?PHP
2print_r($_POST);
3?>
4<form method="post" enctype="multipart/form-data">
5<ul id="files">
6<li><input type="text" name="image_title[title][]" class="upload_title" value="aiu"></li>
7<li><input type="text" name="image_title[title][]" class="upload_title" value="xxx"></li>
8<li><input type="text" name="image_title[title][]" class="upload_title" value="yyy"></li>
9<li><input type="file" name="images[]" class="file_input" accept="image/*"></li>
10</ul>
11<input type="submit" value="submit">
12</form>