Question

我的表格与此类似：

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

然后我做一个Ajax调用来填充这两个字段的值。此时我想保存表单的当前状态（使用填充值），以防用户在进行更改后需要恢复。

我试过这个：

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

以及：

$("#user").html()

都从填充字段之前创建的dom返回原始html。有没有办法在用JS填充后用这些值获取html？

Answer 1

您可以使用内置数据。在执行ajax调用的地方，也将值存储在元素的数据中：

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

在您想要还原更改的位置：

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

当你还原时，你也可以迭代x个元素

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

使用jQuery克隆具有动态添加值的表单元素

2 个答案: