回答編集履歴

2

IDで取得するサンプル

2017/06/29 06:44

投稿

m.ts10806
m.ts10806

スコア80765

test CHANGED
@@ -23,3 +23,115 @@
23
23
  PHPの処理が終了してからHTML出力されます。PHPの処理中に値が飛ぶ(送信される?取得される?ってこと?)ようなことはありません。
24
24
 
25
25
  今回の場合はあくまで「ボタンクリックしたとき」に値を取得しにいっています。
26
+
27
+
28
+
29
+ # IDで取得するサンプル
30
+
31
+
32
+
33
+ 作ってみたものの、あまり美しくないですが、ひとまず参考程度にしてもらえたらと・・・
34
+
35
+ ```PHP
36
+
37
+ <?php
38
+
39
+
40
+
41
+ $main = array(
42
+
43
+ 0=>array("id"=>1,"cate_name"=>"a"),
44
+
45
+ 1=>array("id"=>2,"cate_name"=>"b"),
46
+
47
+ 2=>array("id"=>3,"cate_name"=>"c"),
48
+
49
+ );
50
+
51
+
52
+
53
+ foreach($main as $key => $mains){
54
+
55
+ ?>
56
+
57
+ <form method="post" id="form_<?php echo $mains["id"]?>">
58
+
59
+ <input type="hidden" name="main_type" class="main-type" value="<?php echo $mains["id"]?>">
60
+
61
+ <input type="hidden" name="cate_name" class="cate-name" value="<?php echo $mains["cate_name"] ?>">
62
+
63
+ <button type="button" class="mains-btn" data-id="<?php echo $mains["id"] ?>"><?php echo $mains["cate_name"] ?></button>
64
+
65
+ </form>
66
+
67
+
68
+
69
+ <?php
70
+
71
+ }
72
+
73
+ ?>
74
+
75
+ ```
76
+
77
+ ```javascript
78
+
79
+ $(".mains-btn").on('click',function(){
80
+
81
+ var formid = "form_" + $(this).data("id");
82
+
83
+ var mainType = $("#"+ formid +" .main-type");
84
+
85
+ var type = mainType.val();
86
+
87
+ var mainName = $("#"+ formid +" .cate-name");
88
+
89
+ var name = mainName.val();
90
+
91
+ alert(type+"/"+name);
92
+
93
+ });
94
+
95
+
96
+
97
+ ```
98
+
99
+
100
+
101
+ 解説:
102
+
103
+ - IDを振るというのはclassの名前の付け方ではなくid属性をつけるという意味です。
104
+
105
+ ID属性はページ内で唯一の存在であるという意味合いがあり(実際は同名複数可能ですがルール上は1ページ1つ)、jQueryで要素を取得する際にはIDをつけて取得する方がより望ましいとされています。
106
+
107
+ - というわけでそれぞれの情報の親要素であるformにIDを振ります。form_{id} とか簡単なもので良いです
108
+
109
+ - その他のclass名についてはそのままで結構ですが、親のIDを取得しなければならないのでボタンを押した際にIDを取得できるようにします。
110
+
111
+ ここでは[data属性](http://cly7796.net/wp/javascript/try-to-use-the-data-attribute-in-jquery/)を使ってますがもっとスマートなやり方がありそうです。
112
+
113
+ - クリック時のイベントで自身のボタンについてるデータ属性の値を取得し、formにつけたIDの名前を決定します。
114
+
115
+ - あとは $(#ID名 .クラス名)とすることで「指定ID配下にある要素」の情報を取得することができます。
116
+
117
+
118
+
119
+ もちろん、IDを振って取得さえできればページ内に1つしか出現しないので、
120
+
121
+ ```PHP
122
+
123
+ <input type="hidden" name="main_type" class="main-type" id="main-type_<?php echo $mains["id"]?>" value="<?php echo $mains["id"]?>">
124
+
125
+ ```
126
+
127
+ のようにしておいて
128
+
129
+ ```javascript
130
+
131
+ var dataId = $(this).data("id");
132
+
133
+ var mainType = $("#main-type_"+dataId );
134
+
135
+ ```
136
+
137
+ と書いても同様ですが、なるべくid振る場所を少なくしたかったのでformにのみ振っています。

1

追記

2017/06/29 06:44

投稿

m.ts10806
m.ts10806

スコア80765

test CHANGED
@@ -7,3 +7,19 @@
7
7
  .mains-btnもその他取得情報も全て複数でてきていますよね。
8
8
 
9
9
  それぞれ適切にIDを振って対応すべきと思います。
10
+
11
+
12
+
13
+ 追記:
14
+
15
+
16
+
17
+ > 繰り返し処理中、そのボタンを押した時に入っている値が飛ぶ認識でいました。
18
+
19
+
20
+
21
+ 「繰り返し処理(今回はforeach())」はあくまでサーバーサイドのプログラミング言語の都合であり、
22
+
23
+ PHPの処理が終了してからHTML出力されます。PHPの処理中に値が飛ぶ(送信される?取得される?ってこと?)ようなことはありません。
24
+
25
+ 今回の場合はあくまで「ボタンクリックしたとき」に値を取得しにいっています。