Wie verwerfen Sie Formularänderungen beim Klicken auf die Schaltfläche?

Question

Übersicht: Ich habe ein HTML-Formular, die mit 10 Radiobuttons und 3 Textbereiche mit den folgenden drei Schaltflächen enthält:

aktivieren Schnitt: Die Formulareingabefelder sind deaktiviert in diesem Fall (Formularfelder sind aktiviert/deaktiviert je nach Status). Diese Schaltfläche aktiviert Eingabefelder und ermöglicht Änderungen am Formular.

Speichern: Daten in DB speichern.

Abbrechen: Dies sollte "Änderungen verwerfen" am Formular vornehmen und die ursprünglichen Werte wiederherstellen.

Hinweis: Das Formular wird aus der DB ausgefüllt. Auf "Abbrechen" klicken Ich möchte die alten Daten wiederherstellen, wenn Änderungen vorgenommen wurden. Wie kann ich eine onclick-Methode implementieren, die Daten temporär speichert, wenn die Schaltfläche "Bearbeitung aktivieren" angeklickt wird, und eine andere Methode, die die alten Formulardaten wiederherstellt (Änderungen verwerfen), wenn auf die Schaltfläche "Abbrechen" geklickt wird ?

Was ich versucht habe, so weit nach auf einem ähnlichen question suchen:

$(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

I ersetzt zwei Codezeile mit

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

ich guss dies für Sie arbeiten. Hier ist meine Demo 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

können Sie verwenden

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

Answer 3

Meiner Meinung nach, speichern Sie Ihre alten Daten durch json Variable und wiederherstellen Form bei Klick Schaltfläche "Abbrechen"

Answer 4

Was Sie tun können, ist, dass Sie ein Array A erstellen können und wenn Sie auf die Bearbeitungsschaltfläche klicken, können Sie den gesamten Wert des Felds in diesem Array (A) speichern und Schlüssel wären die IDs der Felder und Der Wert wäre der Wert des Feldes. Wenn Sie also die alten Werte in die Felder einfügen möchten, können Sie die einzelnen Funktionen ausführen und die alten Werte in die entsprechenden Felder mit ihren entsprechenden IDs einfügen. Like- Wenn Sie drei Eingabefelder haben, die id input1, input2, input3 haben und wenn Sie auf die Bearbeitungsschaltfläche klicken, können Sie tun.

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

Dies wird alle alten Werte haben und wenn Sie die alten Werte wieder in Eingabefelder setzen möchten, dann mögen Sie das.

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