如何在按钮单击时放弃表单更改？

概述：我有一个包含有以下3个按钮10个单选按钮和3个文本区域HTML表单：如何在按钮单击时放弃表单更改？

启用编辑：表单输入字段在这种情况下禁用（表单字段启用/取决于状态）。此按钮将启用输入字段，并允许对表单进行更改。

保存：将数据保存到数据库。

取消：这应该“放弃对窗体所做的更改”并恢复原始值。

注意：表单从DB填充。在“取消”点击我想恢复旧数据，如果有任何更改。

问题：我如何能实现，这将暂时存储数据的onclick方法时“启用编辑”按钮被点击，点击，将恢复旧的表格数据（放弃更改）时，“取消”的另一种方法按钮？

寻找一个类似question后至今我已经试过这样：

$(document).ready(function() { 

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

function restore() { 

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

$('#evaluationFormEditCancel').click(function() { 

    restore(); 
}); 
});

来源

2017-02-15 khalid alqahtani

button type =“reset”？ –

感谢您的快速回复。我希望将表单恢复到在进行任何更改之前的状态，而不是完全重置它。 –

够公平 - 你发布的代码有什么问题？ –

我换过两个线路的代码

$(this).data("previous-value", $(this).val());

我GUSS这会为你工作。这里是我的演示http://jsfiddle.net/0qL8bky6/

$(document).ready(function() { 

    $('#evaluationFormEdit').click(function() { 
     $('#evaluationForm').find(':input').each(function(i, elem) { 
      $(this).data("previous-value", $(this).val()); 
     }); 
    }); 

    function restore() { 

     $('#evaluationForm').find(':input').each(function(i, elem) { 
      $(this).val($(this).data("previous-value")); 
     }); 
    } 

    $('#evaluationFormEditCancel').click(function() { 

     restore(); 
    }); 
    });

来源

2017-02-15 06:15:44 Ritz

谢谢里兹的回复。你将如何改变它，使其适用于文本字段和单选按钮（甚至是所有输入类型）？ –

您可以使用

$('#evaluationFormEditCancel').click(function() { 
     $('#evaluationForm').find(':input').each(function(i, elem) { 
     // uncheck all checkbox here to make it default. 
      $(elem).val(""); 
     }); 
});

来源

2017-02-15 05:48:42

感谢您的回复，但正如我上面提到的，我想用旧数据恢复表单，而不是完全重置表单。 –

好的，如果你想恢复旧值的值。你需要首先在var中存储旧值。你可以通过使用jQuery的更改事件来做到这一点。 –

在我看来，通过JSON变量保存旧数据并恢复窗体时点击“取消”按钮。

来源

2017-02-15 06:07:01 Rio

你可以做什么，你可以创建一个数组A，当你点击启用编辑按钮，你可以存储该数组（A）上的字段的所有值，键将是字段的ID和值就是这些字段的值，所以当你想把旧的值放到字段中时，你可以运行每个函数，并将旧的值放入相应的字段中并使用它们的尊重ID。 Like- 如果你有三个输入字段，它们有id input1，input2，input3 ，当你点击启用编辑按钮时你可以做。

var a = []; 
$('input[type=text]').each(function(){ 
    a.push({'input1':$('#input1').val(),'input2':$('#input2').val(),'input3':$('#input3').val()}); 
});

这将有你所有的旧值，当你想把旧值放回输入字段时，你会这样做。

$.each(a,function(key,data){ 
    $('#'+key).val(data); 
});

来源

2017-02-15 06:11:51

有趣。我会试一试，并会更新。 –

如何在按钮单击时放弃表单更改？

回答

相关问题