4

设置：

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

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

问题：

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

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

4

4 回答 4

10

您可以将表单的初始状态保存在 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'));
    });
}

注意：如果您想在不让用户离开页面的情况下将表单恢复到页面上的数据，这很有用。如果您不想保存数据，请不要...保存数据。

于 2012-05-17T17:19:47.573 回答
2

只要使用 value="" 填写表单的值，就可以重置表单

<input type="button" name="reset_form" value="Reset Form" onclick="this.form.reset();">
于 2012-05-17T17:20:01.517 回答
1

var 首字母 = [];

// 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();
于 2012-05-17T17:28:32.667 回答
0

检查离开页面的用户可以做的最好的事情可能是 use onbeforeunload。但是，此确认框不可自定义。看看这个问题和这篇文章和这篇文章。基础是这样的：

var needToConfirm = true;

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

重置表单可以很容易地用一个按钮来完成

<input type="reset">
于 2012-05-17T17:34:18.910 回答