jQuery

Submitボタン→通常ボタンへの変更

Webアプリで画面上のボタン押下処理をSubmitボタンで設計していたのに、突然Submitボタン禁止にされた場合の突貫対応。*1

<form id="form1">
  <input type="submit" name="register" value="登録" />
  <input type="submit" name="delete" value="削除" />

みたいに複数のボタンの名前を変えておくと、例えば登録ボタンが押されるとregisterに値が設定されたようにフォームが送信される。こんな感じ。

register=登録

ここでsubmitボタンを禁止されると、ボタン押下イベントで自力でsubmit処理を行う必要が出てくる。htmlの方は全てのsubmitをbuttonに変更し、jQueryでクリックイベントをまとめて設定しやすくするために識別子として class に "submit" を設定した。

<form id="form1">
  <input type="button" name="register" value="登録" class="submit" />
  <input type="button" name="delete" value="削除" class="submit" />
// Submitボタン押下イベント設定
$('.submit').each(function() {
    $(this).click(function() {
        $('<input />').attr('type','hidden')
            .attr('name',$(this).attr('name'))
            .attr('value',$(this).attr('value'))
            .appendTo('#form1');
        $('#form1').submit();
    });
});

いちおう書き下しておくと、

  1. classにsubmitという文字列が指定されている要素に対してクリックイベントを設定する。
  2. クリックイベントでは動的にhidden要素を作成する。
  3. その際のnameとvalueはイベントを設定する対象のものをそのまま設定する。
  4. 動的にhidden要素を追加した後、フォームのsubmit処理を行う。

こうすることでinput-typeの変更とclassの追加の手間だけで、サーバプログラム側の変更が不要です。

注意

  • jQueryでは一つのイベントに対して複数の関数を登録できるため、もともとのボタンに別のイベントを定義していた場合は今回定義した処理以外の処理も実行される。
  • 定義した順に処理が呼び出されるようなので、Submit代替処理は一番最後に定義するようにする。
  • 初めのイベントでクリックを無効にするような中断を行う場合は、次のようにstopImmediatePropagation()を呼び出す。
    $('btn01').click(function(e) {
        if (中断条件) {
            e.stopImmediatePropagation();
        }
    });
  • 登録ボタンの確認ダイアログなどが該当しそう。

参考にしたサイト


*1 そんなことあるのか、と言われそうだが、IEでのSubmitボタン挙動でフォーカスを示す青い枠が表示されてしまうのを回避するためにあった実話。

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2012-10-17 (水) 15:44:35 (2555d)