Question

概述：我有一个HTML表单，其中包含10个单选按钮和3个文本区域，其中包含以下3个按钮：

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

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

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

注意：表单从数据库中填充。在“取消”单击时，如果进行了任何更改，我想恢复旧数据。

问题：如何在单击“启用编辑”按钮时实现临时存储数据的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();
});
});

Answer 1

我用

替换了两行代码

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

我认为这对你有用。这是我的演示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();
    });
    });

Answer 2

在我看来，点击＆＃34;取消＆＃34;按json变量保存旧数据并恢复表单。按钮。

Answer 3

你可以做的就是你可以创建一个数组A，当你点击启用编辑按钮时，你可以存储该数组的所有字段值（A），键将是字段的id和value是字段值，因此当您想要将旧值放在字段中时，您可以运行每个函数并将旧值放入具有其所尊重的ID的相应字段中。喜欢- 如果你有三个输入字段有id input1，input2，input3 当你点击启用编辑按钮时，你可以这样做。

DIV

这将包含所有旧值，当您想将旧值放回输入字段时，您会喜欢这样。

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

Answer 4

您可以使用

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

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

4 个答案: