Использование JQuery для клонирования элементов формы с динамически добавленных стоимостей

Question

У меня есть форма, которая похожа на это:

<fieldset id="user"> 
    <input type="text" id="firstName"> 
    <input type="text" id="lastName"> 
</fieldset> 

Тогда я делаю вызов Ajax для заполнения значения этих двух полей. В этот момент я хочу сохранить текущее состояние формы (с заполненными значениями) в случае, если пользователю нужно вернуться назад после внесения изменений.

Я попытался это:

$("#user").clone(true).html() 

Как это:

$("#user").html() 

как вернуть исходный HTML из РОМ, который был создан до того, как поля были заполнены. Есть ли способ захватить html со значениями после того, как они были заполнены JS?

Answer 1

Вы можете использовать встроенные данные. Где вы делаете вызов Ajax, сохранить значение в данных для для элемента тоже:

$.data($("#firstname"), "value", value); 
$.data($("#lastname"), "value", value); 

На месте, где вы хотите вернуть изменения:

$("#firstname").val($.data($("#firstname"), "value")); 
$("#lastname").val($.data($("#lastname"), "value")); 

Когда вы вернетесь, вы можете перебирать через й число элементов тоже

$("#user input").each(function() { 
    $(this).val($.data($(this), "value")); 
}); 

Answer 2

var prev = $('#user').html(); // store previous state 

$.ajax({ 
    url: '', 
    .... 
    .... 
    success: function(res) { 
    //assume that your res is like: 
    /** 
    res = { 
     firstname: 'FIRSTNAME', 
     lastname : 'LASTNAME' 
    } 
    */ 
    $('#user input#firstname').val(res.firstname); 
    $('#user input#lastname').val(res.lastname); 
    } 
}) 

//For revert: 

$('#user').empty().html(prev);