jquery - 如何对 "discard"表格进行修改？

Question

设置:

我有一个表单和一个“提交”按钮。理想情况下，用户应该填写表格，单击“提交”，然后离开选项卡。如果他尝试离开选项卡而不保存更改，我需要通过 3 个选项提醒他:

1. 保存
2. 放弃:放弃表单数据更改，并保留选项卡，就好像数据从未被修改过一样。如果用户返回同一选项卡，他应该看到“未修改”的数据。
3. 取消:只需关闭对话框，让用户保持在同一选项卡上。用户可以进一步修改数据，点击保存等。

问题:

实现保存和取消很容易。问题出在“丢弃”上。如果用户点击“放弃”，表单数据应该恢复到修改前的状态。

有什么办法可以做到这一点吗？如果我没有正确解释问题，请告诉我。

Answer 1

您可以将表单的初始状态保存在 jQuery .data() 中功能。也许做类似的事情

$(function(){
    $('form').find(':input').each(function(i, elem) {
         var input = $(elem);
         input.data('initialState', input.val());
    });
});

然后，一旦你点击了丢弃，你就可以调用一个方法，比如:

function restore() {
    $('form').find(':input').each(function(i, elem) {
         var input = $(elem);
         input.val(input.data('initialState'));
    });
}

注意:如果您想将表单恢复到页面上的数据而不让用户离开页面，这非常有用。如果您不想保存数据，就不要...保存数据。