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

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

「ページ遷移なし」とのことから、Ajax になるのだけど、検索しても type=”radio”，type=”checkbox”，select の選択値を取得する方法ばかり。。。type=”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！