[jQuery]Submitボタンの置き換え

  jQuery
【注意】
この記事は過去に別サイトで執筆したものを再掲載したものです。
内容が古くなっていて現在では適用できない場合や、もっと良い方法が出来ている場合があります。
　

Submitボタンを通常ボタンへ変更するときの方法です。
Webアプリで画面上のボタン押下処理をSubmitボタンで設計していたのに、突然Submitボタン使用禁止にされた場合に使えます。
そんなことあるのか、と言われそうだが実話です。
IEでのSubmitボタン挙動でフォーカスを示す青い枠が表示されてしまうのを回避するために変更しました。
他の解決方法があったら教えてください。

<form id="form1">

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

このように複数のSubmitボタンの名前を変えておくと、例えば登録ボタンが押されると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();
    }
});
  • 登録ボタンの確認ダイアログなどが該当しそう。
参考にしたサイト

FORMでsubmitする前にhidden項目を追加する。 | keywords memo

https://keywordsmemo.blogspot.com/2011/05/formsubmithidden.html

LEAVE A COMMENT