フォームのサブミットをぐりぐりカスタマイズする jQuery プラグイン jquery.submittable.js リリース！2012-09-01

さて突然ですが、ウェブアプリ・サイトを作っている時、以下のような悩みを持つことはありませんか？

• デザイン上、リンクになっている所からフォームをサブミットしたい
• 進むボタンと戻るボタンでフォームの遷移先を変えたい
• フォームのサブミット前に確認メッセージを表示したい
• サブミットボタンのダブルクリックでフォームが二重サブミットされないようにしたい
• セレクトボックス/ラジオボタン等を変更した時にフォームをサブミットしたい

その時々に応じて JavaScript のロジックを記述したり、サーバサイドで一生懸命頑張ったりなどしてはいませんか？
jquery.submittable.js を使うことで、それらの悩みが簡単に解決するかもしれません。

サンプル

// リンクをクリックすると通常のサブミットボタン同様、それを含むフォームをサブミットします。
$('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');
    }
});

詳しい使い方は、jquery.submittable.js を参照して下さい！