jQuery で配列をPHPに送りたい

前提・実現したいこと

PHPに対し、チェックホックスのデータを送りたいのですが、うまく配列で送信できません。
チェックボックスの中身が一つの配列に収まって送られるため、とりあえずこれをパースして使用していますが、可能なら配列で受け取りたいので、何処が間違っているか、ご教示頂けると大変助かります。

該当のソースコード

HTML
1<!doctype html>
2<html>
3<head>
4<meta charset="utf-8">
5<title>テスト</title>
6</style>
7<link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.min.css" />
8<script src="./jQuery/jquery-3.2.1.min.js"></script>
9<script src="./bootstrap/js/bootstrap.min.js"></script>
10</head>
11
12<body>
13<div class="container">
14  <div class="row">
15    <div class="col-md-3"></div>
16    <div class="col-md-3">
17      <div class="form-group">
18        <input type="checkbox" name="revl" value="5" checked="checked">
19      </div>
20    </div>
21    <div class="col-md-3">
22      <div class="form-group">
23        <p>星５</p>
24      </div>
25    </div>
26    <div class="col-md-3"> </div>
27  </div>
28  <div class="row">
29    <div class="col-md-3"></div>
30    <div class="col-md-3">
31      <div class="form-group">
32        <input type="checkbox" name="revl" value="4" checked="checked">
33      </div>
34    </div>
35    <div class="col-md-3">
36      <div class="form-group">
37        <p>星4</p>
38      </div>
39    </div>
40    <div class="col-md-3"> </div>
41  </div>
42  <div class="row">
43    <div class="col-md-3"></div>
44    <div class="col-md-3">
45      <div class="form-group">
46        <input type="checkbox" name="revl" value="3" checked="checked">
47      </div>
48    </div>
49    <div class="col-md-3">
50      <div class="form-group">
51        <p>星3</p>
52      </div>
53    </div>
54    <div class="col-md-3"> </div>
55  </div>
56  <div class="row">
57    <div class="col-md-3"></div>
58    <div class="col-md-3">
59      <div class="form-group">
60        <input type="checkbox" name="revl" value="2" checked="checked">
61      </div>
62    </div>
63    <div class="col-md-3">
64      <div class="form-group">
65        <p>星2</p>
66      </div>
67    </div>
68    <div class="col-md-3"> </div>
69  </div>
70  <div class="row">
71    <div class="col-md-3"></div>
72    <div class="col-md-3">
73      <div class="form-group">
74        <input type="checkbox" name="revl" value="1" checked="checked">
75      </div>
76    </div>
77    <div class="col-md-3">
78      <div class="form-group">
79        <p>星1</p>
80      </div>
81    </div>
82    <div class="col-md-3"> </div>
83  </div>
84  <div class="row">
85    <div class="col-md-2"><br />
86    </div>
87    <div class="col-md-8">
88      <button type="button" class="btn btn btn-block" id="search">表示</button>
89    </div>
90    <div class="col-md-2"><br />
91    </div>
92  </div>
93</div>
94<script type="text/javascript">
95$('#search').on('click', function() {
96var colors = [];
97colors.length = 0;
98// 値を取得
99$('input:checkbox[name="revl"]:checked').each(function() {
100// 配列に格納
101colors.push($(this).val());
102});
103
104
105$('<form/>', {action: './test.php', method: 'post'})
106.append($('<input/>', {type: 'hidden', name: 'revl[]', value: colors}))
107.appendTo(document.body)
108.submit();
109});
110
111</script>
112</body>
113</html>

PHP
1<?php
2try
3{
4  //チェックボックスを展開
5  $revl = $_POST['revl'];
6?>
7<!doctype html>
8<html>
9<head>
10<meta charset="utf-8">
11<title>kekka</title>
12</head>
13
14<body>
15<?php var_dump($revl); ?>
16</body>
17</html>
18

試したこと

HTMLで、表示ボタンをクリックすると、jQueryへ跳び、チェックボックスを巡って値を格納し、それをhiddenで送っていると思うのですが、PHPでは、$revl[0]　に5,4,3,2,1　という値で格納されています。

適当にチェックを外すと、例えば　4,2,1　などのように、チェックした値だけ来ますので、収拾過程は問題が無いのではないかと思います。

希望としては、
$revl[0] = 5
$revl[1] = 4
$revl[2] = 3
$revl[3] = 2
$revl[4] = 1

のように受け取れたらと思います。

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

_lemon2003_

2018/08/22 04:04

チェックボックスごとに分けて、配列化して受け取りたいということですね？

ky_46

2018/08/23 00:48

はい。配列化すればループさせての処理が可能になるかと思ったのですが、tacsheaven様の方法、受け取ってから配列化すればいいとのご指摘に、その手を思いつかなかったのがお恥ずかしいです。

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

回答3件

PHPの$_POSTで配列として受け取る仕様はHTTPの仕様ではなく独自仕様です。

HTTPのPOST通信で送るメッセージ的な話を織り交ぜて説明しますが、
revl[]=1、revl[]=2といった風に[]付きの同名のフィールドをいくつも宣言して送信すると、
PHPが$_POST['revl']を["1", "2", ...]という風に解釈して配列として展開します。

これをJavaScriptのコードに反映するとこうなります。

JavaScript
1$('#search').on('click', function() {
2  var $form = $('<form/>', {action: './test.php', method: 'post'});
3
4  // revl[]という名称のinputタグを複数個生成する
5  $('input:checkbox[name="revl"]:checked').each(function() {
6    var color = $(this).val();
7    $form.append($('<input/>', {type: 'hidden', name: 'revl[]', value: color})
8  });
9
10  $form
11    .appendTo(document.body)
12    .submit();
13});

投稿2018/08/22 04:14

編集2018/08/22 05:44

miyabi-sun

総合スコア21158

ky_46

2018/08/23 00:51

ご回答ありがとうございます。今回は時間が惜しいので、送信後、配列化する方法で解決しますが、時間のあるときに、上記のコードを試してみたいと思います。ベストアンサーに出来ず、申し訳ありません。

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

ベストアンサー

HTML の form では、同じ name の値が複数届いた場合に、name=val1&name=val2&... という形で送られます。
これを PHP の方で解釈して name = val1,val2,... の形にしています。

配列として使いたい、というだけなら、受け取っている name=val1,val2,... を、explode してしまえばいいのです。

PHP
1$revl = '5,4,3,2,1';
2$revls = explode(',', $revl);
3var_dump($revls);

array(5) {
  [0]=>
  string(1) "5"
  [1]=>
  string(1) "4"
  [2]=>
  string(1) "3"
  [3]=>
  string(1) "2"
  [4]=>
  string(1) "1"
}

投稿2018/08/22 04:14

tacsheaven

総合スコア13703

ky_46

2018/08/23 00:49

ご回答ありがとうございます。受け取ってから配列化すればいいとのご指摘に、その手を思いつかなかったのがお恥ずかしいです。今回は時間が惜しいので、こちらの方法で処理したいと思い、ベストアンサーにさせていただきました。ありがとうございました。

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

要素をわけないと難しいですね

javascript
1$(function(){
2  $('#search').on('click', function() {
3    var f=$('<form>', {action: './test.php', method: 'post'});
4    $('input:checkbox[name="revl"]:checked').each(function() {
5      f.append($('<input>', {type: 'hidden', name: 'revl[]', value: $(this).val()}))
6    });
7   f.appendTo('body').trigger('submit');
8  });
9});