小粋空間  -  a cheap joke and a play on words site

フォームに設置した複数のsubmitボタン（送信ボタン）をjQueryで制御する

1つのフォームに複数設置したsubmitボタン（送信ボタン）の挙動をjQueryで操作・変更する方法を紹介します。

１．用途

このエントリーでは次の2つのケースを紹介します。

• 1つのフォームに同じ動作を行う送信ボタンを複数設置する
• 1つのフォームに異なる動作を行う送信ボタンを設置する

２．1つのフォームに同じ動作を行う送信ボタンを複数設置する

たとえばページに表示されたフォームなどの上下に送信ボタンがあった方が、スクロール量が減るなどの利便性が高い場合があります。これをHTMLだけで実現するには、form要素（赤色）内にtype属性値「submit」のinput要素（青色）を設置すれば可能です。

<form name="foo" method="post" action="foo.cgi">
  <input type="submit" value="送信" />
  …中略…
  <input type="submit" value="送信" />
</form>

サンプル1

ただし、HTMLだけで実現する場合、form要素内にinput要素を記述しないといけないという制約があるようです。次のマークアップでは送信ボタンをクリックしても動作しません。

<input type="button" value="送信" />
<form id="foo" name="foo" method="post" action="foo.cgi">
  …中略…
</form>
<input type="button" value="送信" />

かといってform要素の開始タグと終了タグの記述位置を、送信ボタンを表示したい位置に移動するのもどうかと思われます。

ということで、input要素とjQueryと組み合わせれば送信ボタンを好きな位置に設置する例を示します。ちなみに、input要素は「XHTMLタグ一覧表示ツール」をご覧になればお分かりの通り、div要素やp要素、span要素などの子要素であれば、form要素だけでなく、任意の位置に記述することができます。

具体的には、次のようなjQueryを実装します。HTMLマークアップは動作に必要な要素以外は省略しているのでツッコミなしで。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
    $('input[type=button]').click(function() {
        $('#foo').submit();
    });
});
</script>
 
<input type="button" value="送信" />
<form id="foo" name="foo" method="post" action="foo.cgi">
  …中略…
</form>
<input type="button" value="送信" />

サンプル2

送信ボタン用のinput要素はform要素の外側にあります。送信ボタンをクリックすれば、jQueryのclickイベントでform要素を検索し、submitイベントを実行します。

あるいは、送信ボタンによって動作を変更したい場合があると思います。

２．1つのフォームに異なる動作を行う送信ボタンを設置する

１項で設置したボタンに対し、それぞれ異なる動作を行わせる方法を紹介します。

まず、フォームから起動するCGI（action属性）などを変更するには、次のようにします。input要素にid属性値（赤色）を追加し、それぞれにclickイベントを実装します。clickイベントの中では、form要素のaction属性値を書き換えてからsubmitイベントを実行するようにします。どちらか一方が書き換え不要な場合はform要素のaction属性をそのまま利用しても構いません。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
    $('#button1').click(function() {
        $('#foo').attr('action', 'bar.cgi');
        $('#foo').submit();
    });
    $('#button2').click(function() {
        $('#foo').attr('action', 'hoge.cgi');
        $('#foo').submit();
    });
});
</script>
 
<input id="button1" type="button" value="送信" />
<form id="foo" name="foo" method="post" action="foo.cgi">
  …中略…
</form>
<input id="button2" type="button" value="送信" />

サンプル3

次に、同じCGIを起動し、クリックされた送信ボタンによってPOSTデータを変更したい場合は、次のようにします。type属性「hidden」のinput要素（赤色）を追加し、clickイベントの中でform要素のinput要素の値を設定してからsubmitイベントを実行します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>
$(function(){
    $('#button1').click(function() {
        $('input[type=hidden]').val('bar');
        $('#foo').submit();
    });
    $('#button2').click(function() {
        $('input[type=hidden]').val('hoge');
        $('#foo').submit();
    });
});
</script>
 
<input id="button1" type="button" value="送信" />
<form id="foo" name="foo" method="post" action="foo.cgi">
  <input type="hidden" name="data1" value="" />
  …中略…
</form>
<input id="button2"  type="button" value="送信" />

サンプル4

CGIでは（上の例では）POSTデータの「data1」から値を取得できます。さらに異なるCGIを起動したい場合は、上記の2つのサンプルを組み合わせてください。

以上です。他にも実現方法はあると思いますので色々試してみてください。

2013.05.21
リンク切れを修正しました。