如何在按鈕單擊時放棄表單更改？

概述：我有一個包含有以下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

有趣。我會試一試，並會更新。 –

如何在按鈕單擊時放棄表單更改？

回答

相關問題