.serializeArray()

Định nghĩa và sử dụng

  • .serializeArray(): Lấy giá trị các thành phần form, mã hóa các giá trị này thành giá trị mãng.
  • Giá trị sẽ được hiển thị cách nhau bởi khoảng trắng: value1 value2...

Cấu trúc

  • Đã được thêm vào từ phiên bản 1.2

.serializeArray()

$('form').serializeArray();

.serializeArray()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    function showValues() {
        var fields = $(":input").serializeArray();
        $("#result").empty();
        jQuery.each(fields, function(i, field){
            $("#result").append(field.value);
        });
    }
    $(":radio").click(showValues);
    showValues();
});
</script>
</head>

<body>
<form>
<input type="radio" name="radio" value="Male" checked="checked" id="male" />
<label for="male">Male:</label>
<input type="radio" name="radio" value="Female" id="female" />
<label for="female">Female:</label>
</form>
<p id="result"></p>
</body>
</html>

Hiển thị trình duyệt:

Khi click chọn vào radio ta đã lấy được giá trị thay đổi của thành phần này.

Ví dụ thêm

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    function showValues() {
        var fields = $(":input").serializeArray();
        $("#result").empty();
        jQuery.each(fields, function(i, field){
        $("#result").append(field.value + " ");
        });
    }
    $(":checkbox, :radio").click(showValues);
    $("select").change(showValues);
    showValues();
});
</script>
</head>

<body>
<form>
<input type="radio" name="radio" value="Male" checked="checked" id="male" />
<label for="male">Male:</label>
<input type="radio" name="radio" value="Female" id="female" />
<label for="female">Female:</label>
<br />
<br />

<input type="checkbox" name="checkbox01" value="html" checked="checked" id="html" />
<label for="html">HTML:</label>
<br />
<input type="checkbox" name="checkbox02" value="css" id="css" />
<label for="css">CSS:</label>
<br />
<input type="checkbox" name="checkbox03" value="jquery" checked="checked" id="jquery" />
<label for="jquery">JQUERY:</label>
<br />
<br />

<select name="city">
<option value="HaNoi">Hà Nội</option>
<option value="HoChiMinh">Hồ Chí Minh</option>
<option value="NhaTrang">Nha Trang</option>
<option value="CanTho">Cần Thơ</option>
</select>
</form>
<p id="result"></p>
</body>
</html>

Hiển thị trình duyệt:

Khi thay đổi giá trị của các thành phần trong form, ta sẽ lấy được các giá trị thay đổi của các thành phần này.

.serialize()

.show()