How to discard form changes on button click?

Question

Overview: I have an HTML form that contains 10 radio buttons and 3 text areas with the following 3 buttons:

Enable Editing: The form input fields are disabled in this case (form fields are enabled/disabled depending on status). This button will enable input fields and will allow changes to be made to the form.

Save: save data to DB.

Cancel: This should "Discard changes" made to the form and restores the original values.

Note: The form gets populated from the DB. On "cancel" click I would like to restore the old data if any changes were made.

Issue: How can I implement an onclick method that will store data temporarily when "enable editing" button is clicked and another method that would restore the old form data(discard changes) when the "Cancel" button is clicked ?

What I have tried so far after looking at a similar 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();
});
});

Thanks for the quick reply. I would like to restore the form to how it was before any changes were made and not to reset it completely. — khalid alqahtani, Feb 15 '17 at 05:47
@khalidalqahtani check link http://www.dorcode.com/answers.php?id=57&que=confirm-alert — PHP Ninja, Feb 15 '17 at 05:51
I'm not completely sure but think it has something to do events handling. When I click on cancel nothing happens and I get no errors. — khalid alqahtani, Feb 15 '17 at 05:54
Just save your response from db to some local object and then bind it to the form and on cancel button click, just call the restore function where you just rebind the data to form from local object! — Aazib I Gandhi, Feb 15 '17 at 06:15
This would reset the form: $("#form-name").trigger('reset'); — Ashil John, Feb 15 '17 at 10:38

score 2 · Answer 1 · answered Feb 15 '17 at 06:07

2

In my opinion, save your old data by json variable and restore form when click "Cancel" button.

answered Feb 15 '17 at 06:07

Rio

181
3

score 2 · Accepted Answer · answered Feb 15 '17 at 06:15

I replaced two line of code with

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

I guss this will work for you. here is my 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();
    });
    });

Thank you Ritz for the reply. How would you change this to make it work for both text fields and radio buttons(or even all input types) ? — khalid alqahtani, Feb 15 '17 at 07:02

score 1 · Answer 3 · edited Dec 02 '17 at 05:24

What you can do that is you can create an array A and when you click on the enable editing button you can store all the value of the field on that array(A) and keys would be the ids of the fields and the value would the fields value, so when you want to put the old values in the fields you can run the each function and put the old values in to the corresponding fields with their respected ids. Like- if you have three input fields which have id input1, input2, input3 and when you click on the enable editing button you can do.

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

This will have all you old values and when you want to put the old values back to input fields you do like this.

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

score 0 · Answer 4 · answered Feb 15 '17 at 05:48

0

You can use

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

answered Feb 15 '17 at 05:48

Hitesh Ranaut

751
6
12

Thanks for the reply but as I mentioned above I would like to restore the form with the old data and not reset the form completely. – khalid alqahtani Feb 15 '17 at 05:56
Okay if you want to restore values to old values. you need to first store old values in var first. you can do this by using jquery change event. – Hitesh Ranaut Feb 15 '17 at 06:03

How to discard form changes on button click?

4 Answers4