複数あるボタンで、どれかボタンをクリックした場合、ページ遷移なしで処理を実行させたい。
そんなご要望があり、いろいろと悩んだ事から、忘れないようここに残しておこうかと。。。
「ページ遷移なし」とのことから、Ajax になるのだけど、検索しても type=”radio”,type=”checkbox”,select の選択値を取得する方法ばかり。。。type=”button” でクリックされたボタンの値を取得する方法が見当たらず。。。
個々のボタンに form タグを付けようか、id を加えようかと試行錯誤した結果が以下のコード。input タグに class を振ったけど ul に id を付けて :button でも。
HTML
<form><ul> <li><input type="button" name="no" value="1" class="btn"></li> <li><input type="button" name="no" value="2" class="btn"></li> <li><input type="button" name="no" value="3" class="btn"></li> <li><input type="button" name="no" value="4" class="btn"></li> <li><input type="button" name="no" value="5" class="btn"></li> </ul></form>
Javascript
$('.btn').click(function(){ var selectNo = $(this).val(); alert(selectNo); }
あとは、ajax で値を送ればOK!
[mokurenCB]