2012 年 4 月 29 日

jQuery Form Pluginとは

• フォームの内容をまとめてAjaxで手軽に送信するjQueryプラグイン。
• 既存のフォームの値をクリアする機能なども。
• jQuery 1.3.2以降に対応。
• MIT、GPLライセンス
• ファイルURL：http://malsup.github.com/jquery.form.js

基本的な使い方

// 該当formのidを指定
$('#myForm').ajaxForm(function() { 
	alert("callback."); 
});

// オプションの指定
var options = {
	success : function () { alert("success"); },
	url: url, // formのsrcを上書き
	clearForm: true // 成功時にformをクリア
	resetForm: true // 成功時にformをデフォルトの状態にリセット

	// jQueryのajax()のオプションなども指定できる
	timeout: 3000
};

$('#myForm1').ajaxForm(options);

ajaxForm()とajaxSubmit()の違い

ajaxForm()

• 単純に、各input要素のname属性とvalue属性をペアにしてAjaxで送信

ajaxSubmit()

• XmlHttpRequest Level 2を利用して、実際にフォームの内容を送信
• ファイルのアップロードも可能
• XmlHttpRequest Level 2に対応していなければ送信できない

その他の機能

• formSerialize()：form全体の要素から、key1=value1&key2=value2の形の文字列を生成。jQueryのget/ post/ ajax()で使える。
• fieldValue()：form内の特定要素のvalueを配列にまとめて返す。
• fieldSerialize()：form内の特定要素のnameとvalueを、key1=value1&key2=value2という形の文字列にする。
• resetForm/ clearForm()：オプションと同じ。

送信ボタンとの連携

    // jQueryのsubmit()
    $('#myForm2').submit(function() { 
        // jQuery Form Plugin
        $(this).ajaxSubmit(options); 
 
        // falseを返せば、HTMLのform送信は行なわれない
        return false; 
    });