どもです。
webシステムをやっていると、あまりにも多用するform。
では、formに多階層のinput群を構築するにあたって、$_REQUESTを階層化してsubmitしてくれる方法は？
fieldsetは見た目だけ
フォームのグループ化といったら<fieldset>ですが、これは見た目のためのタグで、実際にinputを階層化してはくれません。
<fieldset>
<input type="checkbox" value="1" checked name="test1">
<input type="checkbox" value="1" checked name="test2">
</fieldset>Array
(
[test1] => 1
[test2] => 1
)ドットでのname接続は$_REQUESTを階層化しない
<input type="checkbox" value="1" checked name="group1.test1">
<input type="checkbox" value="1" checked name="group2.test1">
<input type="checkbox" value="1" checked name="group2.test2">Array
(
[group1_test1] => 1
[group2_test1] => 1
[group2_test2] => 1
)nameを配列化すると$_REQUESTも多次元配列になる
<input type="checkbox" value="1" checked name="test1">
<input type="checkbox" value="1" checked name="group1[test2]">
<input type="checkbox" value="1" checked name="group1[test3]">
<input type="checkbox" value="1" checked name="group2[test4][child1]">
<input type="checkbox" value="1" checked name="group2[test4][child2]">
<input type="checkbox" value="1" checked name="group2[test5][child1]">
<input type="checkbox" value="1" checked name="group2[test5][child2]">Array
(
[test1] => 1
[group1] => Array
(
[test2] => 1
[test3] => 1
)
[group2] => Array
(
[test4] => Array
(
[child1] => 1
[child2] => 1
)
[test5] => Array
(
[child1] => 1
[child2] => 1
)
)
)配列風にnameを整形してやると、$_REQUESTも配列になってくれました。
PHPで処理する分には[]による階層化が優勝ですね。
では、jsで処理する分には？
jsで階層化した要素を指定するには？
<input type="checkbox" value="1" checked name="group1[test1]">
<input type="checkbox" value="1" checked name="group1[test2]">console.log(document.getElementsByName('group1'))
//NodeList []
console.log(document.querySelectorAll("[name='group1']"))
//NodeList []
console.log($("[name='group1']"))
//ce {length: 0, prevObject: ce}ん－、全滅。
<fieldset name="group1">
<input type="checkbox" value="1" checked name="group1[test1]">
<input type="checkbox" value="1" checked name="group1[test2]">
</fieldset>console.log(document.querySelectorAll("[name='group1']"))
//NodeList [fieldset]
console.log($("[name='group1']").find("[name$='[test2]']"))
//ce {0: input, length: 1, prevObject: ce}階層化されたデータ群をセレクトすることはできないので、データ群の親要素に識別子つけとくのが無難な方法みたいですね。