複数のsubmitボタンをonsubmitで判定する方法
小粋空間 » JavaScript » 複数のsubmitボタンをonsubmitで判定する方法
複数のsubmitボタンをonsubmitで判定する方法を紹介します。
１．問題点
下記のように、複数のsubmitボタンが実装されたフォームがあります。
<form name="test" method="post" action="./test.cgi">
:
<input name="a" type="submit" value="aaa" />
<input name="b" type="submit" value="bbb" />
<input name="c" type="submit" value="ccc" />
</form>フォーム送信時にonsubmit属性などを使って、どのsubmitボタンが押されたかを判定したいのですが、方法がわかりません。
ということで、複数のsubmitボタンをonsubmitで判定する方法を紹介します。
２．複数のsubmitボタンをonsubmitで判定する
複数のsubmitボタンをonsubmitで判定するには、フォームにtype="hidden"のinput要素を追加し、各ボタンにonclick属性を追加します。onclick属性ではtype="hidden"のinput要素に、ボタン毎に異なる値を設定します。
<form name="test" method="post" action="./test.cgi" onsubmit="return check_data()">
:
<input name="a" type="submit" value="aaa" onclick="test.key.value='aaa'" />
<input name="b" type="submit" value="bbb" onclick="test.key.value='bbb'" />
<input name="c" type="submit" value="ccc" onclick="test.key.value='ccc'" />
<input name="key" type="hidden" value="" />
</form>そしてonsubmit属性で起動する関数で、type="hidden"のinput要素の値を判定すればOKです。
<script>
function check_data() {
if (test.key.value == 'aaa') {
:
}
return true;
}
</script>３．複数のsubmitボタンをonsubmitで判定する（jQuery）
２項のコードをjQueryで書くこともできます。jQueryであればフォームに手を加えず、エレガントに書けます。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<form name="test" method="post" action="./test.cgi">
:
<input name="a" type="submit" value="aaa" />
<input name="b" type="submit" value="bbb" />
<input name="c" type="submit" value="ccc" />
</form>
<script>
$(function(){
// フォームにtype="hidden"のinput要素を追加
$('form').append('<input name="key" type="hidden" value="" />');
// ボタンクリック時、type="hidden"のinput要素に自分の値を設定
$('input').click(function(){
$('input[name=key]').val($(this).val());
});
// submit時、type="hidden"のinput要素の値を判定
$('form').submit(function(){
if($('input[name=key]').val() == 'aaa'){
:
}
});
});
</script>