フォームの「スナップショット」を取得しようとしましたが、値が失われています

Question

私は非常に動的なフォームを持ち、トップレベルの要素とやり取りすることでフォームの下位レベルの要素を完全に変換します。私は状態を維持する簡単な方法を望んでいたので、ユーザがトップレベルカテゴリのフォームデータに部分的に入力した場合、他のものに切り替えることができました（入力されたすべてのデータと実際の入力要素を一時的に失う）その前のトップレベルカテゴリに戻ってクリックし、そのまますべてを復元します。

私のような何かをするために、最上位の要素をクリックの上、のような単純な何かを計画していた。

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()); 
} 

とそれらとのようなものを持つ要素の更新を超える反復-RE：誰もが前にこのようなものに遭遇した場合

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

をしかし、私は思っていたし、手動でこれらを反復処理よりもよりよい解決策を知っていますか？逆のform.serialize（）を行う方法があるかどうか疑問に思っていましたか？そうすれば、シリアライズされたフォームのスナップショットも保存でき、フォーム全体をシリアル化されたデータで更新できます。 .serlize（）はエスケープされた文字列を返すので、仕事よりももっとうまくいくかもしれないし、手作業でフォーム要素型を繰り返し処理する方が良い方法だと思われます...？

Answer 1

代わりに$('form').serializeArray()を使用すると、あとでフォームを再作成するために使用できる素敵なJSONオブジェクトが得られます。あなたはまた、隠しフィールドを回避したいことがあり

$('form :input:not(:hidden)').serializeArray()

このSO postは再移入であなたを指します。

Answer 2

は、私はあなただけのhtmlを選択し、それらの現在の値を持つ入力要素更新する必要がありますform_state[category] = $('form').html();

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

前にこのような何かを行うことができると思います。保存されたhtmlには、現在のユーザー入力状態が反映されます。