[jQueryプラグイン] jQuery Form Plugin

2012 年 4 月 29 日 Categories: jQuery | Tags: ,

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; 
    });