Vue Quick Shot - Preventing Multiple Form Submissions

Vue Quick Shot - Preventing Multiple Form Submissions

Good morning! Before I begin, a quick note. I was about to write this post yesterday when I discovered that it was actually very close to another one I wrote a few months back, which was my very first Vue Quick Shot - "Vue Quick Shot - Disabling a Submit Button While Waiting for an Ajax Call".

In that post, I describe how to modify a form that performs a network call to an API such that you can't submit the request until the first request is done. Today's post is very similar. I was inspired by a post earlier this week on the topic, "HTML Forms: How (and Why) to Prevent Double Form Submissions".

In today's post, the difference is rather slight. Instead of a form used to collect data before making an Ajax call, it's going to be a "regular" form that just posts to an action, leaving the current page completely. The solution is incredibly similar, but as it's my blog I figure I'm allowed to do that. ;)

I also want to point out that if this is the only thing you're doing on a page, Vue's going to be overkill. Just use vanilla JS instead (and see my note at the end). But if you're already using Vue,perhaps for some complex client-side validation, then the following tip will help.

I started off building a Pipedream workflow that merely outputs HTML after a four second wait. This You can test this yourself if you view it yourself: https://enz7ceue7sb4c7j.m.pipedream.net. I'm not doing any form validation or handling, I'm just waiting four seconds and responding.

I then built a simple form:

<form action="https://enz7ceue7sb4c7j.m.pipedream.net/" method="post">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name">
  <input type="submit">
</form>

And then I submitting the form, clicking rapidly to send multiple requests. Pipedream records executions of workflows, and I could see multiple firing at once:

List of multiple executions

So let's fix it! Again, I want to stress that if this is the only thing you're doing on a page, Vue is going to be overkill. First, I modified the HTML a bit:

<div id="app" v-cloak>
  
  <form action="https://enz7ceue7sb4c7j.m.pipedream.net/" method="post" @submit="setSubmitting">
    <label for="name">Name:</label>
    <input type="text" name="name" id="name">
    <input type="submit" :disabled="submitting">
  </form>
  
</div>

I've got a submit handler on the form and my submit button has a disabled property tied to a variable. And then here's the simple Vue.js code:

const app = new Vue({
  el:'#app',
  data:{
    submitting:false
  },
  methods: {
    setSubmitting() { 
      this.submitting = true; 
    }
  }
})

Yeah, pretty trivial. But effective. Test it out here:

See the Pen Block Multiple Submission by Raymond Camden (@cfjedimaster) on CodePen.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Comments