2011-12-06 18 views
0

我有一個高度動態的表單,與頂級元素進行交互將完全轉換表單較低級別的元素。我想要一個簡單的方法來維護狀態,以便如果用戶部分輸入了頂級類別中的某個表單數據,則可以切換到其他類別(暫時丟失所有鍵入的數據以及實際的輸入元素),然後點擊返回到先前的頂級類別並恢復原樣。嘗試獲取表單的「快照」但丟失值

我正打算一些簡單的像,上單擊頂級元素,做這樣的事情:

form_state[category] = $('form').html(); 

category = this.val(); 

if (form_state[category]) { 
    $('form').html(form_state[category]) 
} 

不過,我很快就發現,HTML表單是不包括形式的值用戶已經與之交互的元素(這是所有原始默認值)。所以,我才明白,我需要收集所有的表單內的元素的值,然後重新設置窗體的內部HTML後手動重置他們...所以我想是這樣的:

$('input, select, textarea').each(function(el) { 
    values.push($(el).val()); 
} 

,然後再次重申了那些與像更新的元素:

if (form_state[category]) { 
    $('form').html(form_state[category]) 
    $('input, select, textarea').each(function(el, i) { 
    $(el).val(values[i]); 
    } 
} 

但我只是想知道,如果一個人遇到這樣的事情之前,比對這些手工遍歷一個更好的解決辦法知道?我想知道是否有任何方式來做一個反向form.serialize()?這樣我就可以存儲一個序列化的表單快照,並用序列化數據更新整個表單。由於.serlize()返回一個轉義字符串,它似乎可能比它的工作更多的工作和手動迭代表單元素類型是一個更好的方式去...?

+0

不是一個真正的答案,但你可能會發現[西西弗斯](http://simsalabim.github.com/sisyphus/)很有幫助。 –

回答

0

改爲使用$('form').serializeArray(),它會爲您提供一個不錯的JSON對象,您可以稍後使用它重新填充表單。

您可能還需要避免隱藏字段$('form :input:not(:hidden)').serializeArray()

SO post將指向你重新填充。

0

我想你可能只是之前form_state[category] = $('form').html();

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

這應該更新HTML選擇和它們的當前值輸入元素做這樣的事情。然後您保存的html將反映當前的用戶輸入狀態。

相關問題