[jQueryプラグイン] jQuery Form Plugin

jQuery Form Pluginとは

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

基本的な使い方

[javascript]
// 該当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);
[/javascript]

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()：オプションと同じ。

送信ボタンとの連携

[javascript]
// jQueryのsubmit()
$('#myForm2’).submit(function() {
// jQuery Form Plugin
$(this).ajaxSubmit(options);

// falseを返せば、HTMLのform送信は行なわれない
return false;
});
[/javascript]

jQuery

Posted by takasho