Form data collect (POST) by jQuery

我們在設計網頁的時後，假如要和後端的Web Server服務器互動，最常見的行為模式之一，就是建立一個Form，然後裡面有許許多多的Input標籤，當使用者按下Submit之後，就可以把資料傳送過去。

那麼，這些資料又該如何透過jQuery來取得呢?? 這裡就只記錄下簡單的範例，不呈現完整的程式碼了....

<input type="text" id="idText" />
<input type="password" id="idPassword" />

var strText = $("#idText").val();
var strPassword = $("#idPassword").val();

Input類型為Text和Password非常地簡單，用val()函式就能取得它們的值。

<input type="radio" name="nmSex" value="1" />Male
<input type="radio" name="nmSex" value="0" />Female

var strSex = $("input[name=nmSex]:checked").val();

Radio (單選鈕)要注意的地方是，要有設定Name的屬性，且用Name來取值。

<input type="checkbox" value="0" id="idLang" />Python
<input type="checkbox" value="1" id="idLang" />Perl
<input type="checkbox" value="2" id="idLang" />Ruby
<input type="checkbox" value="3" id="idLang" />HTML5
<input type="checkbox" value="4" id="idLang" />jQuery

var aryLang = new Array(5);
// 1st種方法：
$("input[type=checkbox]:checked").map(function() {
    return $(this).val();
}).toArray();
// 2nd種方法：
$("input[id=idLang]:checked").each(function(i) {
    aryLang[i] = $(this).val();
    return;
});

CheckBox (複選鈕)，要取值的方式有兩種，可以用map()；或者是用each()。前提是都必須要先宣告一個陣列。

<select id="idBlood">
    <option value="0" />BLOOD
    <option value="1" />A
    <option value="2" />B
    <option value="3" />AB
    <option value="4" />O
</select>

var strBlood = $("select#idBlood option:selected").val();

以上，是下拉式選單 (Select-Option)的取值方式。

先記到這邊，以後想到什麼再補充吧!!