jquery插件 - 表單插件

先在頁面裡設定一個普通的表單：

<a href="http://www.lzby.net/boho/blog/?p=190#">PLAIN TEXT</a>

HTML:

action="comment.php" method="post"&gt;

姓名:

name="name" id="name"/&gt;

評論:

id="comment"&gt;&lt;/textarea&gt;

value="送出評論" /&gt;

&lt;/form&gt;

加載jquery庫和插件腳本庫。然後簡單地寫一段初始化腳本，這段腳本将在DOM加載完成時執行：

<a href="http://december.com/html/4/element/head.html">&lt;head&gt;</a>

//加載jquery

//加載插件

//

DOM加載完畢後執行

 $(document).ready(function()

{

綁定'myForm'并定義一個簡單的回調函數

$('#myForm').ajaxForm(function()

alert("評論送出完成!");

});

&lt;/script&gt;

&lt;/head&gt;

OK，就是這麼簡單。當點選“送出評論”按鈕後，表單的資料就會POST到comment.php腳本，并且傳回“評論送出完成”資訊（如果送出成功）。頁面并沒有重新整理，非常AJAX……

讓我們來看看這個插件還有什麼強大的功能。

該方法須預先綁定表單，是以它一般在$(document).ready(function() {

...}裡定義。它能讓表單在不重新整理頁面的情況下POST到目标。可以為該方法提供一個參數，參數一般是一個回調函數用于傳回資訊給使用者。當然如果不提供參數也行，隻是表單提在無聲無息地送出後無法得到确認了。

該方法是以響應事件來通用AJAX方式送出表單。比如點選某個按鈕或改變了某個下拉框的值，在觸發事件函數裡可以設定該方法。如：

JavaScript:

$("#clickme").click(function(){

$("#myForm").ajaxSubmit();

或者這樣：

onchange="$(‘#myForm’).ajaxSubmit();"&gt;

該方法可以表單域的名稱和值連接配接起來，形成一個字元串，字元串格式為name1=value1&amp;name2=value2...比如：

var queryString=$("#myForm").formSerialize();

變量queryString的值将為變成name=xxx&amp;comment=xxx。得到這個字元串後，可以用$.post來送出，如：$.post("comment.php",queryString);

和formSerialize一樣，傳回一個字元串，但傳回的是表單指定元素或特定元素類型域的字元串。傳回字元串格式也是一樣的。如：

var queryString = $('#myForm

:text').fieldSerialize();//傳回myForm表單内所有文本框的字元串值。

傳回一個數組，記錄表單元素的值。如果表單沒有值則對應數組值為空。如：

var data=$(':text').fieldValue();//傳回所有表單中所有文本框類型的值。

變量data為['','','']這樣的一個數組，數組元素對應表單元素的值。事實上我們可以這樣來得到“姓名”文本框裡的值：var

data=$("#name").val();（這個元素要有ID屬性）這樣的作法不需要jquery

form插件也可以得到值。但使用插件可以更友善地取得單個或多個表單中特定元素域的值。比如取得所有文本框或所有複選框的值。隻要加個“:"就可以。這種方法也可以用到formSerialize或fieldSerialize方法上。

var data=$("#myForm

:text").fieldValue();//取得在myForm表單裡所有文本框的值。

同樣也傳回一個數組，這個數組是對象數組。對象有name和value兩個屬性，分别記錄表單中的元素名稱和元素值。如：

var data=$("#myForm").formToArray();

變量data得到的是一個對象數組。data[0].name儲存myForm表單中第一個表單元素的名稱屬性值，這裡是”name"。data[0].value儲存myForm表單中第一個表單元素的值，這裡就是填了什麼值就是什麼。

該方法很簡單啦，恢複表單初始狀态。也就恢複到DOM加載完成時的表單狀态。類似“重設表單”

清除表單域元素。可以清除特定類型的域元素，比如清除所有文本框的，或所有複選框的域。