jQuery：html（）函數獲取表單中的舊數據

我正在使用jQuery讀取HTML頁面中的數據。在該頁面上，我有一個<form>元素，其中包含一些<input>標籤供用戶輸入其值。
初始化時，此表單對這些<input>元素具有一些默認值。當我提交此表單時，我使用html()方法來獲取此頁面當前狀態的HTML字符串，但我不明白爲什麼此結果字符串仍包含舊值（默認輸入值），而不是新值。
在調用html()之前，有什麼方法可以將用戶輸入的值更新或保留到那些<input>元素中嗎？如何通過使用jQuery方法獲取包含最新值的字符串？
非常感謝！jQuery：html（）函數獲取表單中的舊數據

來源

2012-07-03 Đinh Hồng Châu

哪裏是你的代碼..！ –

爲什麼你需要*來獲取當前狀態的HTML字符串*？ – VisioN

爲什麼你使用html來獲取整個頁面，看起來很奇怪。你應該能夠使用序列化來從表單中選擇所有的值，如果這就是你想要的。 –

然而，你想要做什麼很奇怪，但你需要的只是更新表單元素的值屬性。

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

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

來源

2012-07-03 09:43:52 VisioN

非常感謝。其實，你的建議並沒有幫助我解決這個問題，但它給了我一個線索繼續。我試過你在jsfiddle上創建的演示，它使用jQuery 1.7.1，但是當我將它降級到1.5.2時，它導致錯誤^ _ ^。所以我想也許在jQuery 1.5.2中有一些神祕的東西，我會深入研究它。我將你的線索用於另一種方式： '$（「form input」）。attr（「defaultValue」，function（）{ return this.value; }）;' 它工作的很棒！ –

默認情況下，jQuery的html()功能將保留defaultValue和defaultChecked特性，而不是使用它可以用下面的代碼（把它的形式submit處理器）來完成當前值/選擇（就像JavaScript innerHTML一樣）。爲了解決這個問題，你需要先使用jQuery prop()：Read the Documentation on prop()。

例如，給定的代碼：

<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>

然後

$('form').html()

將始終輸出確切的代碼，無論你添加/選擇什麼值/修改。

要解決的是，僅僅運行一個功能元素的值轉換爲屬性：

$("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();

現在你將有HTML作爲當前頁面的狀態顯示它。

來源

2012-12-01 01:25:51

textarea的一點是有點不同的，如果你正在尋找如何做到這一點的元素類型：

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

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

來源

2014-01-30 14:35:43

jQuery：html（）函數獲取表單中的舊數據

回答

相關問題