如何"丢弃"表单更改？

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

注意:如果要将表单还原到页面上的数据而不让用户离开页面,这将非常有用.如果您不想保存数据,请不要...保存数据.