18

I'm using Vue in my application and I would like to know how to submit a form but avoid redirection. According to the official Vue doc it can be achieved in the following way:

<!-- the submit event will no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>

Here is my part of my form:

<form class="myForm" action="/page" method="post" @submit.prevent="onSubmit">
    <input name="email" type="email" placeholder="e-mail" v-model="email">
    <button @click="myFunction()">

It sorta works in the sense that the page is no longer redirected but I get an error saying that onSubmit method is not defined. So What I don't understand is how I should define it. On the other hand I could just write @submit@prevent but as far as I understand it completely prevents submission and that's not what I'm looking for. Is there a proper way to do this without ajax, axios and that sort of technologies? What I want is myFunction to execute and form to submit but I would want to avoid redirection.

Improve this question

6 Answers 6

Reset to default
48

onSubmit should be a function within your methods property on the vue instance. I.e

methods: {
  onSubmit () {
    // DO Something
  }
}

Then as the docs say, using <form v-on:submit.prevent="onSubmit"></form> is correct. I use this in my app.

See the example below. The message will change once the button is clicked without a page refresh.

var vm = new Vue({
  el: '#app',
  data () {
    return {
      test: 'BEFORE SUBMIT'
    }
  },
  methods: {
    onSubmit () {
      this.test = 'AFTER SUBMIT'
    }
  }
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  {{test}}
  <form v-on:submit.prevent="onSubmit">
    <button>Submit!</button>
  </form>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

For a form with only a single input element (like a search box), use @submit.native.prevent.
23

Just use @submit.prevent (without any equal signs).

Then, define @click="doAction()" on the button.

Improve this answer

2 Comments

This is the simplest solution, and it works. Thanks!
Seems to throw Uncaught (in promise) TypeError: e.preventDefault is not a function
4

Try @submit.prevent="myFunction()", and your button could instead be <input type="submit" value="Submit"/>. The submit type will trigger the form to submit, and the submit.prevent will prevent the default submit behavior and execute myFunction as desired.

This has the additional benefit of triggering form validation for required input fields!

Improve this answer

11 Comments

For what it's worth, a button's default type is submit. (This is counter-intuitive to me.)
okay, but how do I check if it actually makes a post request?
@Bill Check the network tab of your browser console. Have it open just before you click submit and you should see new network activity. If you're not seeing any new activity, be sure to check for errors. If you continue to have trouble, be sure to include the myFunction code so that we may examine it for problems.
The strange thing is that I do have the network tab open but I don't see any new network activity when I press enter and submit the form. Would you please tell me what @submit.prevent does? What's it for? In the official documentations it says: "the submit event will no longer reload the page". I want to understand why.
@Bill submit.prevent is shorthand for "on submit, do event.preventDefault() to stop the form from submitting". The entire submit.prevent="myFunction()" means "stop the form from submitting the normal way and execute myFunction() instead". If you want to submit the form the ordinary way, i.e. with a page refresh, this is NOT the way to do it. Otherwise, in myFunction() you need to be performing an ajax request and then redirecting once it's finished.
|
2

<form @submit.prevent="saveData()" method="post"> <!-- Add all the input filed --> <button type="submit"> Save </button> </form>

This will avoid redirection of the form also we can validate input fields.

Improve this answer

1 Comment

For what it's worth, this is the only the solution that actually ran native browser form input validation, worked with pressing a keyboard return/enter button, worked while clicking the submit button, and did not result in the browser reloading/redirecting. I think this is the best answer.
2

Try to change <button @click="myFunction()"> to <button type="button" @click="myFunction()">

Improve this answer

Comments

0

To disable redirection, the method that binds to @submit has to return false.

It's better for accessibility to bind @submit instead of @click.

See https://stackoverflow.com/a/71011158/8400360

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.