AutoSave a form

I was wondering how would you automatically save a forms entire values when a user was typing in any field after x number of seconds?

You can “watch” individual fields, but as a complete form as 1 entire entity?

When the form is loaded I save the original values into an “originalValues” if they want to revert back to original simply click “Revert” button or something like that, but on any keyup automatically submit the form to the API after x number of seconds? Similar to Google Docs.

Any ideas / suggestions / insight would be greatly appreciated.

Thanks,

Dave

Solved 1 min later :slight_smile:

<form @submit.prevent @input="logChanges()">

Then that method will wait x number of seconds then submit the form.

Easy enough :slight_smile:

1 Like

what was your method though?
I wonder how to set wait x number of seconds.

Well it all depends on your setup. In my setup the first time the user comes to the form its empty obviously so autosave is bad idea if you have required fields because soon as they type after x seconds it will try to validate fields they never even got a chance to type so thats bad.

So to sidestep that I set my condition to see if the form will autosave or force the user to use the submit button.

<form @submit.prevent @input="logChanges()">

Is simply a secondary method to my standard submitForm

logChanges() {
      if (something) { // determine if to use autosave condition or not
        setTimeout(() => {
          this.submitForm()
      }, 500)
   }
},

and

submitForm() {
      return this.$validator.validateAll().then(isValid => {
        if (isValid) {
          this.save(this.links.store)
            .catch(e => {
              this.handleErrors(e) // SERVER SIDE ERRORS
            })
        } else {
          this.scrollToValidationError() 
          this.showError(this.errors.items) // FRONT END ERRORS
        }
      })
    },

Hope that helps, gets you started