複数あるボタンで、どれかボタンをクリックした場合、ページ遷移なしで処理を実行させたい。

そんなご要望があり、いろいろと悩んだ事から、忘れないようここに残しておこうかと。。。

「ページ遷移なし」とのことから、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]