如何“丢弃”表单更改?

时间:2012-05-17 17:16:40

标签: jquery

设定:

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

  1. 保存
  2. 丢弃:丢弃表单数据更改,并保留选项卡,就好像数据从未修改过一样。如果用户回到同一个标签,他应该看到"未修改的"数据。
  3. 取消:只需关闭对话框,让用户保持在同一个标​​签页上。用户可以进一步修改数据,点击保存等
  4. 问题:

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

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

4 个答案:

答案 0 :(得分:9)

您可以在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'));
    });
}

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

答案 1 :(得分:2)

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

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

答案 2 :(得分:1)

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();

答案 3 :(得分:0)

可能关于检查用户离开该页面的最佳方法是使用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">