inputの値を多次元配列で$_POSTする方法について

Question

実現したいこと

input=textをjsで動的に増減させ、その値を多次元配列の形にして$_POSTしたいです。

該当のソースコード

• test3.php

<form action="test-check3.php" method="post" accept-charset="utf-8">
<ul class="addInput">
 	<li><input type="text" name="name[]" /><input type="text" name="tel[]" /></li>
 	<li><input type="text" name="name[]" /><input type="text" name="tel[]" /></li>
</ul>
<ul class="buttonset">
 	<li><span class="add">ADD</span></li>
 	<li><span class="remove">REMOVE<strong></strong></span></li>
</ul>
<input type="submit">
</form>

<!--jQuery本体--> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<!--メニュー追加-->
<script type="text/javascript">
$(function(){
    //「ADD」を押したら増やす
    $('.add').click(function(){
        $('.addInput').append('<li><input type="text" name="name[]" /><input type="text" name="tel[]" /></li>');
    });
    //「REMOVE」を押したら減らす
    $('.remove').click(function(){
        $('.addInput li:last-child').remove();
    });
});
</script>

• test-check3.php

<?php
//変数にする
$name = $_POST["name"];
var_dump($name);
$tel = $_POST["tel"];
var_dump($tel);
?>

前提

現在このような配列の形で値を受け取っているのですが、

array(2) {
[0]=> string(13) "メニュー1"
[1]=> string(13) "メニュー2"
}
array(2) {
[0]=> string(4) "3000"
[1]=> string(4) "5000"
}

このような多次元配列の形で受け取りたいです。

array(2) {
[0]=>array(2) {[0]=>string(13) "メニュー1"[1]=>string(4) "3000"}
[1]=>array(2) {[0]=>string(13) "メニュー2"[1]=>string(4) "5000"}
}

試したこと

(1)

---

js部分を一旦コメントアウトして

• test3.php

<li><input type="text" name="name[]" /><input type="text" name="tel[]" /></li>
<li><input type="text" name="name[]" /><input type="text" name="tel[]" /></li>

の部分を

<li><input type="text" name="tab[0][0]" /><input type="text" name="tab[0][1]" /></li>
<li><input type="text" name="tab[1][0]" /><input type="text" name="tab[1][1]" /></li>

のように変更し、$_POSTすると

array(2) { 
[0]=> array(2) { [0]=> string(13) "メニュー1" [1]=> string(4) "3000" } 
[1]=> array(2) { [0]=> string(13) "メニュー2" [1]=> string(4) "1000" } 
}

と受け取る事ができたのですが、input=textをjsを動的に増減させる部分の設定方法がわかりません。

(2)

---

• test3.php

for ($i = 0 ; $i < count(); $i++){
<li><input type="text" name="tab[$i][0]" /><input type="text" name="tab[$i][1]" /></li>
}

のようにforを使って$iを変化させるのか？とも考えたのですがその場合、

1. $iの上限部分count()には何を設定すれば良いのでしょうか？
2. jsの $('.addInput').append('<li><input type="text" name="name[]" /><input type="text" name="tel[]" /></li>');部分はどのように変えれば良いでしょうか？
3. js内にPHPの$iを記述する方法

アドバイスを頂きたいです。よろしくお願いします。

Answer 1

こんな風にnameをつけてください

<?PHP
print_r($_POST);
?>
<form method="post">
<input name="hoge[0][0]" value="メニュー1"><br>
<input name="hoge[0][1]" value="3000"><br>
<input name="hoge[1][0]" value="メニュー2"><br>
<input name="hoge[1][1]" value="5000"><br>
<input type="submit" value="send">
</form>

調整版

こんな感じで？

<?PHP
print_r($_POST);
?>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  add.addEventListener('click',()=>{
    u1.appendChild(u1.querySelector('li').cloneNode(true))
  })
  del.addEventListener('click',()=>{
    if(u1.querySelector('li:nth-child(2)')){
      u1.querySelector('li:last-child').remove();
    }
  })
});
document.addEventListener('formdata',e=>{
  const f=e.formData;
  const n=f.getAll('name[]');
  f.delete('name[]');
  const t=f.getAll('tel[]');
  f.delete('tel[]');
  n.forEach((x,y)=>{
    f.set(`hoge[${y}][0]`,x);
    f.set(`hoge[${y}][1]`,t[y]);
  });
});
</script>
<form method="post">
<input type="button" value="add" id="add">
<input type="button" value="del" id="del">
<input type="submit" value="send">
<hr>
<ul id="u1">
<li><input type="text" name="name[]" /><input type="text" name="tel[]" /></li>
</ul>
</form>

Comments

[emi_ono]

ありがとうございます！
<script type="text/javascript">
$(function(){
//「ADD」を押したら増やす
$('.add').click(function(){
$('.addInput').append('<li><input type="text" name="name[]" /><input type="text" name="tel[]" /></li>');
});
//「REMOVE」を押したら減らす
$('.remove').click(function(){
$('.addInput li:last-child').remove();
});
});
</script>
のnameの値をhoge[2][0],hoge[2][1],hoge[3][0],hoge[3][1].....
のように動的に変更するにはどのように記述すれば良いでしょうか？

[yambejp]

追記したのでテストしてみてください

[emi_ono]

ありがとうございます。
期待していた形で受け取る事ができました！

あと1点教えて頂きたいのですが
1行目に値を入力した後に「add」ボタンを押すと、入力した値ごとコピーされてしまいます。
空欄の枠を増やしたいのですが、どこを変更すれば良いでしょうか。

u1.appendChild(u1.querySelector('li').cloneNode(true))
↓
$('#u1').append('<li><input type="text" name="name[]" /><input type="text" name="tel[]" /></li>');
に変更してみたのですが、上手く値を受け取れなくなってしまいました。

何度も申し訳ありません。よろしくお願いします。

[yambejp]

add処理を以下のようにしてみてはどうでしょうか？
add.addEventListener('click',()=>{
const n=u1.querySelector('li').cloneNode(true);
n.querySelectorAll('input').forEach(x=>x.value="");
u1.appendChild(n);
})

[emi_ono]

解決できました。
本当にありがとうございます。