Question

设定：

我有一个表格和一个＆＃34;提交＆＃34;按钮。理想情况下，用户应填写表格，点击＆＃34;提交＆＃34;然后离开标签。如果他试图离开标签而不保存更改，我需要提醒他3个选项：

保存
丢弃：丢弃表单数据更改，并保留选项卡，就好像数据从未修改过一样。如果用户回到同一个标签，他应该看到＆＃34;未修改的＆＃34;数据。
取消：只需关闭对话框，让用户保持在同一个标签页上。用户可以进一步修改数据，点击保存等

问题：

实施保存和取消很容易。问题在于＆＃34; Discard＆＃34;。如果用户点击＆＃34; Discard＆＃34;，表单数据应恢复到修改前的状态。

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

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

reset form只要使用值=“”填写表单的值就可以了

<input type="button" name="reset_form" value="Reset Form" onclick="this.form.reset();">

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。此确认框不可自定义。请查看此question以及此article和此article。基本原则是：

var needToConfirm = true;

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

可以使用按钮

轻松地重置表单

<input type="reset">

如何“丢弃”表单更改？

4 个答案: