jQuery: html() chức năng lấy dữ liệu cũ dưới dạng

Question

Tôi đang sử dụng jQuery để đọc dữ liệu trong trang HTML. Trên trang đó, tôi có một phần tử <form> chứa một số thẻ <input> để người dùng nhập các giá trị của chúng.
Khi được khởi tạo, biểu mẫu này có một số giá trị mặc định cho các phần tử <input> đó. Khi tôi gửi biểu mẫu này, tôi sử dụng phương thức html() để nhận chuỗi HTML trạng thái hiện tại của trang này, nhưng tôi không lý do tại sao chuỗi kết quả này vẫn chứa giá trị cũ (giá trị đầu vào mặc định), chứ không phải giá trị mới.
Có cách nào để cập nhật hoặc duy trì giá trị do người dùng nhập vào các yếu tố <input> trước khi gọi html() không? Làm thế nào tôi có thể nhận được chuỗi có chứa giá trị mới nhất bằng cách sử dụng các phương pháp jQuery?
Cảm ơn bạn rất nhiều!

Answer 1

Tuy nhiên, điều lạ là bạn đang cố gắng làm, nhưng tất cả những gì bạn cần là cập nhật thuộc tính giá trị của các phần tử biểu mẫu. Nó có thể được thực hiện với đoạn mã sau (đặt nó trong xử lý hình thức submit):

$("form input").attr("value", function() { 
    return this.value; 
}); 

DEMO:http://jsfiddle.net/BXha6/

Answer 2

Theo mặc định chức năng jQuery html() sẽ giữ gìn defaultValue và defaultChecked tính hơn là sử dụng các giá trị/lựa chọn hiện tại (giống như JavaScript innerHTML). Để giải quyết vấn đề này, trước tiên bạn cần sử dụng jQuery prop(): Read the Documentation on prop().

Ví dụ, với các mã:

<form action='/'> 
    <input type='radio' value='1' checked name='first' /> 
    <input type='radio' value='2' name='first' /> 

    <input type='checkbox' value='yes' /> 

    <input type='text' value='Start Text' name='second' /> 
</form> 

sau đó

$('form').html() 

Sẽ luôn luôn ra rằng mã chính xác, bất kể những gì giá trị mà bạn đã thêm vào/chọn/sửa đổi.

Để khắc phục điều đó, chỉ cần chạy một chức năng để chuyển đổi các giá trị của phần tử để tính:

$("form input[type='radio']").each(function(){ 
    if (this.checked){ 
     $(this).prop("defaultChecked",true); 
    } else { 
     $(this).prop("defaultChecked",false); 
    } 
}); 
$("form input[type='checkbox']").each(function(){ 
    if (this.checked){ 
     $(this).prop("defaultChecked",true); 
    } else { 
     $(this).prop("defaultChecked",false); 
    } 
}); 
$("form input[type='text']").each(function(){ 
    $(this).prop("defaultValue",$(this).val()); 
}); 

alert($(form).html()); //or var the_code = $(form).html(); 

Bây giờ bạn sẽ có HTML như trạng thái trang hiện tại của bạn được hiển thị nó.

Answer 3

Bit textarea là một chút khác nhau nếu bạn đang tìm kiếm cách để làm điều đó loại phần tử:

$("textarea").html(function() { 
    return this.value; 
}); 

http://jsfiddle.net/BXha6/7/