Home JavaScript Greasemonkey PHP

jquery.submittable.js2012-09-01

»Download


jquery.submittable.js は、a タグなど任意の要素を指定して、フォームをサブミットすることができる jQuery プラグインです。a タグ (リンク) のクリックでフォームをサブミットさせたい時などに利用することが出来ます。

任意の要素の任意のイベントを対象とすることが出来るので、例えばセレクトボックスが変更されたらサブミット、チェックボックスがチェックされたらサブミット、というような使い方が出来ます。

また、サブミットをする際に以下のようなオプションを指定することが可能です。

  • 一時的に action / method / target を切り替えてサブミット
  • サブミット前に確認メッセージを表示
  • サブミット直前に実行する処理を指定
  • サブミット後に対象要素を無効化
  • 対象要素が含まれない別のフォームをサブミット

通常のサブミットボタンに比べてずっと多くの機能を提供しているため、サブミットボタンにあえて適用することで、サブミットボタンの動作をカスタマイズすることも出来ます。

使い方

上記 Download リンクより jquery.submittable.js をダウンロードし、jquery 本体と一緒に読み込みます。

jquery のバージョンは 1.7 以降が必須です。


すでに使っている古いバージョンの jQuery が置き換えられない？
jQuery は複数のバージョンを共存できますよ？

プラグインを読み込んだら、任意の要素に対して "submittable" を呼び出せば、その要素があたかもサブミットボタンであるかのように振る舞います。

// リンクをクリックすると通常のサブミットボタン同様、それを含むフォームをサブミットします。
$('a').submittable();

// ボタンをクリックするとフォームの属性を書き換えてからサブミットします。
$('button.back').submittable({
    action: './back/',
    method: 'GET',
    target: '_top'
});

// ボタンをクリックするとそのボタンがあるフォームとは別のフォームをサブミットします。
$('button.option').submittable({
    form: '#optionForm'
});

// セレクトボックスが変更されたらフォームをサブミットし、その後セレクト要素は無効にします。
$('select').submittable({
    on: 'change',
    autoDisabled: true
});

// サブミット前に確認メッセージを表示し、サブミット直前に特定の処理を実行します。
$('input[type=submit]').submittable({
    confirm: '送信してよろしいですか？',
    onbeforesubmit: function(e) {
        $('input[name=flag]').val('true');
    }
});

// 特定のチェックボックスがチェックされている時だけサブミットします。
$('input[type=submit]').submittable({
    onconfirm: function(e) {
        return $('input[type=checkbod]').prop('checked');
    }
});

オプション

以下のオプションが指定可能です。

名前説明デフォルト値
onサブミットを実行するためのイベント。'click'
formサブミット対象のフォーム。
jQuery のセレクタを文字列で指定しても、jQuery オブジェクト自体を渡しても、DOM 要素を渡しても大丈夫。		対象要素を含む form 要素
actionサブミット先の action。undefined
methodサブミット時の method。undefined
targetサブミット先の target。undefined
confirmサブミット前に表示する確認メッセージ。
組み込み confirm 関数で表示するので、任意の処理が必要な場合は onconfirm を使う。		undefined
onconfirmサブミット確認用関数。
引数としてサブミットを実行した要素が渡される。
true を返すとサブミットを実行し、false を返すと何もしない。		undefined
onbeforesubmitサブミット直前に呼び出される関数。
引数としてサブミットを実行した要素が渡される。		undefined
autoDisabledサブミット後に対象要素を自動的に無効にするか。
true の場合、disabled 属性を true にし、disabledClass をクラスに追加する。		false
disabledClassautoDisabled が true の時、サブミット後に対象要素に設定するクラス。
無効な状態を解除したい場合は、このクラスを削除すれば良い。		'disabled'

ライセンス

ライセンスは MIT License (日本版 wikipedia の項) で公開します。