如何“丢弃”表单更改？

建立：

我有一个表单和一个“提交”按钮。 理想情况下，用户应填写表单，单击“提交”，然后退出选项卡。 如果他试图离开标签而不保存更改，我需要提醒他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')); }); } 

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

Answer 2

重置表单 ，只要使用值=“”填写表单的值即可

Answer 3

var initials = [];

 // Call this function to store all initialvalues function gettter() { $('input,select', 'form').each(function() { initials.push({ type: $(this).attr('type'), name: $(this).attr('name'), value: $(this).val() }); }); } // Call this function to restore all values function setter() { initials.each(function(index, record) { $('input[type="'+ record.type+'"][name="'+ record.name +'"]', 'form').val(record.val); }); } 

但是，如果您只想重置没有任何先前值的表单;

 $('form').reset(); 

Answer 4

可能关于检查用户离开页面的最佳方法是使用onbeforeunload 。 此确认框不可自定义。 看看这个问题以及本文和本文 。 基本是这样的：

 var needToConfirm = true; window.onbeforeunload = confirmExit; function confirmExit() { if (needToConfirm) return "this is required but doesn't actually show"; } 

可以使用按钮轻松地重置表单