CODEWITHSUNDEEP
javascriptjqueryhtmlforms
Vincent Catalano
Vincent Catalano

Reputation: 2321

Resetting an AJAX Form

I am writing a very heavy Javascript application using jQuery. One of the problems I am facing occurs when I perform AJAX form posts. Initially, the forms are rendered from a server side templating engine, these forms have default values set. The form has two options, SAVE and CANCEL (revert). When a user clicks "SAVE", the form data is POSTed to the server via jQuery. When the user clicks "CANCEL", Javascript's reset() function is called on the form.

The real problem occurs when I input/update fields on the form and then SAVE it. If I then attempt to edit the form again and click "CANCEL" the form is reverted back to it's original state (the state of the form on initial page render) and not that of the last AJAX submit.

It appears that Javascript's reset() function is using the 'value', 'checked', etc. attributes that were set on page render. If this is the case, what is the best way to update a forms values so that the reset() method will revert to the last point at which I submitted the form via AJAX?

Upvotes: 0

Views: 386

Answers (1)

Joseph
Joseph

Reputation: 119877

you would need to "repaint" the forms so that their "initial values" are the ones that are on that AJAX submit. form reset rely on the value that came when the element is painted on the page. here's a demo to show the concept

just rebuild that form again, with a template and the successful values. you can do this on the fly using a JS template engine like mustache and maybe cache the template locally so you won't be doing extra HTTP requests

Upvotes: 2

Related Questions