如何“丢弃"?形式变化? [英] How to "discard" form changes?

问题描述

设置:

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

I have a form and a "Submit" button. Ideally the user should fill out the form, click "Submit" and then leave the tab. If he tries to leave the tab without saving the changes, I need to alert him with 3 options:

1. 保存
2. 放弃:放弃表单数据更改，并保留选项卡，就好像从未修改过数据一样.如果用户返回到同一标签，则应该看到未修改"的数据.
3. 取消:仅关闭对话框，将用户保留在同一选项卡上.用户可以进一步修改数据，单击保存等.

问题:

实现保存和取消很容易.问题在于放弃".如果用户单击放弃"，则表单数据应恢复为修改前的状态.

Implementing Save and Cancel is easy. The issue is with "Discard". If the user clicks "Discard", the form data should get restored to what it was before modification.

有没有办法做到这一点?如果我没有正确解释问题，请告诉我.

Is there any way to do this? If I haven't explained issue properly, please let me know.

推荐答案

您可以将表单的初始状态保存在jQuery

You could save the initial state of the form in the jQuery .data() function. Maybe do something like

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

然后，一旦您丢弃了，就可以调用一个方法，说:

Then once you hit discard, you could call a method, say:

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

注意:如果要将表单还原为页面上的数据，而无需用户离开页面，这将很有用.如果您不想保存数据，那就不要...保存数据.

Note: this is useful if you want to restore the form to what the data was on the page without having the user leave the page. If you don't want to save the data, just don't... save the data.

这篇关于如何“丢弃"?形式变化?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！