Как сбросить изменения формы при нажатии кнопки?

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

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

Answer 2

Вы можете использовать

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

Answer 3

На мой взгляд, сохранить старые данные по переменной JSon и восстановить форму, когда нажмите Кнопка «Отмена».

Answer 4

Что вы можете сделать это, вы можете создать массив A, и когда вы нажмете кнопку включения редактирования, вы можете сохранить все значение поля в этом массиве (A), а ключи будут идентификаторами полей и значение будет значить поля, поэтому, когда вы хотите поместить старые значения в поля, вы можете запустить каждую функцию и поместить старые значения в соответствующие поля с их уважаемыми идентификаторами. Like- , если у вас есть три поля ввода, которые имеют вход id1, 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); 
});