How to reset form status with model data?

Question

I have a model in which fills the fields of a form (use Asp.net mvc and the view is typed), that is, I load the fields of this form according to the data of the database for the user to change in the editing screen.

What I want to do is a "undo" button that resets to the initial state of the data that came from the database, not simply using this.meuform.reset() at the click of the button.

I believe that it should be done in the form onload() a way to save the current elements of the form and when clicked on the button, simply play again in the elements, these saved elements...

I prefer pure Javascript.

Answer 1

The reset() as explained in the documentation...

The Htmlformelement.reset() method restores a form element’s default values

should yes reset the value of the elements to the original state, and not clean them, leaving blank or things like that, as in example.

What can be done in your case - which has multiple Forms - select them and in a loop reset to all:

var forms = document.getElementsByTagName("form");
// ou
// var forms = document.querySelectorAll("form");

for (var i = 0; i < forms.length; i++)
{
    forms[i].reset();
}

Or with jQuery:

var forms = $("form");

for (var i = 0; i < forms.length; i++)
{
    forms[i].reset();
}

Demos 1, 2 or with more elements.

UPDATE:

To catch only the first (or only) form of the screen:

var forms = document.getElementsByTagName("form");
// ou
// var forms = document.querySelectorAll("form");

if (forms.length > 0)
{
    forms[0].reset();
}

That way you avoid possible exceptions if the routine tries to reset a form that does not exist.