How to "discard" form changes?

Question

Setup:

I have a form and a "Submit" button. Ideally the user should fill out the form, click "Submit" and then leave the tab. If he tries to leave the tab without saving the changes, I need to alert him with 3 options:

Save
Discard: discard the form data changes, and leave the tab, as if the data was never modified. If user comes back to the same tab, he should see the "unmodified" data.
Cancel: Just dismiss the dialog box, keep the user on the same tab. User can either modify the data further, click save, etc.

Problem:

Implementing Save and Cancel is easy. The issue is with "Discard". If the user clicks "Discard", the form data should get restored to what it was before modification.

Is there any way to do this? If I haven't explained issue properly, please let me know.

If the user is leaving the page, the data won't get submitted either way, so there seems to be no need to discard? — Oldskool, May 17 '12 at 17:19
Did you try the built in `form.reset()` as suggested by @bretterer? — bfavaretto, May 17 '12 at 17:36

Jason · Accepted Answer · 2012-05-17T17:24:48.770

10

You could save the initial state of the form in the jQuery .data() function. Maybe do something like

$(function(){
    $('form').find(':input').each(function(i, elem) {
         var input = $(elem);
         input.data('initialState', input.val());
    });
});

Then once you hit discard, you could call a method, say:

function restore() {
    $('form').find(':input').each(function(i, elem) {
         var input = $(elem);
         input.val(input.data('initialState'));
    });
}

Note: this is useful if you want to restore the form to what the data was on the page without having the user leave the page. If you don't want to save the data, just don't... save the data.

edited May 17 '12 at 17:24

answered May 17 '12 at 17:19

Jason

51,583
38
133
185

looks promising, i will try it out. – Bhushan May 17 '12 at 17:34
this won't save the users data if they leave the page though. it will only "save" the users entries last time the first function runs. – Eonasdan May 17 '12 at 17:40
he doesn't want to save the data. he wants to restore the data to the initial state before any modifications were made (and not saved) – Jason May 17 '12 at 17:42
+1 and accepted. only thing which is not working is it is not able to handle the checkboxes. trying to solve that. – Bhushan May 17 '12 at 19:42
you need to add some custom code for checkboxes, but you can follow the same formula – Jason May 17 '12 at 20:40
for checkboxes you have to check if elem.type == "checkbox" and then do input.data('initialState', input.is(":checked")). Whene restoring, check again if it's a checkbox, then do input.prop('checked', input.data('initialState')) – secador de pelo Jan 23 '14 at 09:11

bretterer · Answer 2 · 2012-05-17T18:42:47.983

2

reset form as long as the values of the form are filled in using the value="" you can just do

<input type="button" name="reset_form" value="Reset Form" onclick="this.form.reset();">

edited May 17 '12 at 18:42

answered May 17 '12 at 17:20

bretterer

5,693
5
32
53

score 1 · Answer 3 · answered May 17 '12 at 17:28

var initials = [];

// Call this function to store all initialvalues
function gettter() {
  $('input,select', 'form').each(function() {
      initials.push({
         type: $(this).attr('type'),
         name: $(this).attr('name'),
         value: $(this).val()
      });
  });
}

// Call this function to restore all values
function setter() {
   initials.each(function(index, record) {
     $('input[type="'+ record.type+'"][name="'+ record.name +'"]', 'form').val(record.val);
   });
}

But if you want to just reset the form without any previous value;

$('form').reset();

score 0 · Answer 4 · edited May 23 '17 at 12:02

probably about the best thing you can do to check users leaving the page is use onbeforeunload. This confirm box is not customizable though. Take a look at this question and this article and this article. The basics are this though:

var needToConfirm = true;

  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    if (needToConfirm)
      return "this is required but doesn't actually show";
  }

resetting the form can easily be done with a button

<input type="reset">

How to "discard" form changes?

4 Answers4

Linked