foreach内で選択された値をjsに渡したい

Question

foreachで存在する数分のカテゴリformを作り,それぞれボタンが押せるようにしています。
そのボタンをクリックしてajaxで一致するサブカテゴリを呼び出したいのですが、
どのボタンを押しても一番目の値しか入りません。
繰り返し処理中、そのボタンを押した時に入っている値が飛ぶ認識でいました。
ご教示お願いします。

<?php
      foreach((array)$main as $key => $mains){
      ?>
        <form method="post">
	      <input type="hidden" name="main_type" class="main-type" value="<?php echo $mains->id ?>">
	      <input type="hidden" name="cate_name" class="cate-name" value="<?php echo $mains->cate_name ?>">
	      <button type="button" class="mains-btn"><?php echo $mains->cate_name ?></button>
        </form>
        
      <?php	
      }
      ?>

$(".mains-btn").on('click',function(){

		var mainType = $(".main-type");
		var  type = mainType.val();

		var mainName = $(".cate-name");
		var name = mainName.val();


		    alert(type+"/"+name);

	});

上記だと全部最初の値だけが表示されます。
selectで試すとうまくいきます↓

<select class="mains-btn">
      <?php
      foreach((array)$main as $key => $mains){
      ?>
        <option value="<?php echo $mains->id ?>"><?php echo $mains->cate_name ?></option>

      <?php	
      }
      ?>
</select>

<script>
$(".mains-btn").on('change',function(){

		var mainType = $(".mains-btn");
		var  type = mainType.val();

		    alert(type);
	});
</script>

これはどうしてなのでしょうか？

Answer 1

それぞれ個別の form が用意されているので、form から取得したほうが楽かもしれませんね。

    var form = $(this).closest('form')[0];
    var type = form.elements['main_type'].value;
    var name = form.elements['cate_name'].value;

HTMLFormElement.elements
https://developer.mozilla.org/ja/docs/Web/API/HTMLFormElement/elements

Comments

[yambejp]

var form = $(this).closest('form').get(0);
では？

[x_x]

あ、そうですね。修正します。

[tarao]

回答ありがとうございます!
closest('form')でformから直近の親要素を取得して
elementsでform内の要素を取得しているのですね。
思い通りの結果を取得できました！
ありがとうございました！

Answer 2

$( '.mains-btn' ).on( 'click', function() {
	var $_t = $( this ).parent();
	var mainType = $_t.find( '.main-type' );
	var  type = mainType.val();
	var mainName = $_t.find( '.cate-name' );
	var name = mainName.val();
	alert(type+'/'+name);
} );

【jQueryで親要素を取得する：parent(), parents(), closest() | UX MILK】
http://uxmilk.jp/8150

Comments

[m.ts10806]

わざわざID振るよりもこっちのほうが変更が少なくて分かりやすかったですね・・・(＾0＾;)

[kei344]

To: mts10806さん
form要素にIDを振るほうが自然かな、と思いますが手抜き回答しました。個人的にIDはあまり使わない（明確に区別すべきものにのみ使う）方法を採ることが多いので、構造が決まっているなら今回の解答のような書き方をすることも有ります。

[m.ts10806]

確かにそうですね。
私の場合、今回の「$mains->id」のようにidが明示されてると使いたくてウズウズしてしまいます・・。

[tarao]

回答ありがとうございます。
教えていただいたコードで思い通りにできました！

クリックした.mains-btnの親要素内にある.main-typeの値を取得しているということでしょうか？
ここでまた疑問なのですが、別々のidを振らなくてもそれぞれの値を取得できてるのは
この親要素が関係しているのですか？

[tarao]

度々すいません。
いただいたサイトを見ながら試して見て、理解することができました！
とても参考になりました！
どうもありがとうございました。

Answer 3

これはどうしてなのでしょうか？

同名classがページ内に複数回出てきているためです。
.mains-btnもその他取得情報も全て複数でてきていますよね。
それぞれ適切にIDを振って対応すべきと思います。

追記：

繰り返し処理中、そのボタンを押した時に入っている値が飛ぶ認識でいました。

「繰り返し処理（今回はforeach()）」はあくまでサーバーサイドのプログラミング言語の都合であり、
PHPの処理が終了してからHTML出力されます。PHPの処理中に値が飛ぶ（送信される？取得される？ってこと？）ようなことはありません。
今回の場合はあくまで「ボタンクリックしたとき」に値を取得しにいっています。

IDで取得するサンプル

作ってみたものの、あまり美しくないですが、ひとまず参考程度にしてもらえたらと・・・

<?php

$main = array(
	0=>array("id"=>1,"cate_name"=>"a"),
	1=>array("id"=>2,"cate_name"=>"b"),
	2=>array("id"=>3,"cate_name"=>"c"),
);

foreach($main as $key => $mains){
	?>
        <form method="post" id="form_<?php echo $mains["id"]?>">
          <input type="hidden" name="main_type" class="main-type" value="<?php echo $mains["id"]?>">
          <input type="hidden" name="cate_name" class="cate-name" value="<?php echo $mains["cate_name"] ?>">
          <button type="button" class="mains-btn" data-id="<?php echo $mains["id"] ?>"><?php echo $mains["cate_name"] ?></button>
        </form>

<?php
}
?>

$(".mains-btn").on('click',function(){
    var formid = "form_" + $(this).data("id");
    var mainType = $("#"+ formid +" .main-type");
    var  type = mainType.val();
    var mainName = $("#"+ formid +" .cate-name");
    var name = mainName.val();
    alert(type+"/"+name);
});

解説：

• IDを振るというのはclassの名前の付け方ではなくid属性をつけるという意味です。

ID属性はページ内で唯一の存在であるという意味合いがあり（実際は同名複数可能ですがルール上は1ページ1つ）、jQueryで要素を取得する際にはIDをつけて取得する方がより望ましいとされています。

• というわけでそれぞれの情報の親要素であるformにIDを振ります。form_{id} とか簡単なもので良いです
• その他のclass名についてはそのままで結構ですが、親のIDを取得しなければならないのでボタンを押した際にIDを取得できるようにします。

ここではdata属性を使ってますがもっとスマートなやり方がありそうです。

• クリック時のイベントで自身のボタンについてるデータ属性の値を取得し、formにつけたIDの名前を決定します。
• あとは　$(#ID名 .クラス名)とすることで「指定ID配下にある要素」の情報を取得することができます。

もちろん、IDを振って取得さえできればページ内に1つしか出現しないので、

<input type="hidden" name="main_type" class="main-type" id="main-type_<?php echo $mains["id"]?>" value="<?php echo $mains["id"]?>">

のようにしておいて

var dataId = $(this).data("id");
var mainType = $("#main-type_"+dataId );

と書いても同様ですが、なるべくid振る場所を少なくしたかったのでformにのみ振っています。

Comments

[tarao]

回答ありがとうございます！
すごい初歩的なことでした^^;
phpの処理が終了してからなんですね。ここら辺がイマイチよくわかっていませんでした。
詳しく教えていただいてありがとうございます。

[tarao]

度々すみません。
mts10806さんのようにidをそれぞれふる場合の方法で理解がまだできていないのですが、
class="main-type<?php echo $mains->id ?>"
このようにふったのですが、このクラス名をjsで取得する時にどのようにして表示するのでしょうか？

ボタンをクリックした後に別々のクラス名と認識させるために<?php echo $mains->id ?>をjs側に送るにしても、全て同じ値になりますよね...

[m.ts10806]

formだけで良いです。ざっくりサンプル書くので少々お待ちください。

[m.ts10806]

というかid振ってるので全部同じ値にはならないと思いますよ。

[tarao]

とっても細かく説明していただいて、本当にありがとうございます！
よくわかりました！
<form method="post" id="form_<?php echo $mains["id"]?>">
<button type="button" class="mains-btn" data-id="<?php echo $mains["id"] ?>/<?php echo $mains["cate_name"] ?>"><?php echo $mains["cate_name"] ?></button>
</form>
↑このようにhiddenを使わなくても、希望通りに渡すことができました！

今回色々な方法があるのだなと、大変勉強になりました！
parent()やclosest()も使っていこうと思います。

[m.ts10806]

まぁ、今回のように既に情報がきてるのであれば
buttonに直接　onclick = "hoge('<?= $mains["id"]?>','<?= $mains["cate_name"]?>')" とか書いて
function hoge(id,catname) {
alert(id+"/"+catname);
}
でも 十分（hidden不要）だったりしますけどね・・。

[tarao]

今回のパターンだとこれでもいけるのですね。
知識、勉強不足です。
これもまた参考になりました!