'Getting form data on submit?

When my form is submitted I wish to get an input value:

<input type="text" id="name">

I know I can use form input bindings to update the values to a variable, but how can I just do this on submit. I currently have:

<form v-on:submit.prevent="getFormValues">

But how can I get the value inside of the getFormValues method?

Also, side question, is there any benefit to doing it on submit rather than updating variable when user enters the data via binding?

vue.jsvuejs2


Solution 1:[1]

The form submit action emits a submit event, which provides you with the event target, among other things.

The submit event's target is an HTMLFormElement, which has an elements property. See this MDN link for how to iterate over, or access specific elements by name or index.

If you add a name property to your input, you can access the field like this in your form submit handler:

<form @submit.prevent="getFormValues">
  <input type="text" name="name">
</form>

new Vue({
  el: '#app',
  data: {
    name: ''
  },
  methods: {
    getFormValues (submitEvent) {
      this.name = submitEvent.target.elements.name.value
    }
  }
}

As to why you'd want to do this: HTML forms already provide helpful logic like disabling the submit action when a form is not valid, which I prefer not to re-implement in Javascript. So, if I find myself generating a list of items that require a small amount of input before performing an action (like selecting the number of items you'd like to add to a cart), I can put a form in each item, use the native form validation, and then grab the value off of the target form coming in from the submit action.

Solution 2:[2]

You have to define a model for your input.
<input type="text" id="name" v-model="name">

Then you you can access the value with this.name inside your getFormValues method.

This is at least how they do it in the official TodoMVC example: https://vuejs.org/v2/examples/todomvc.html (See v-model="newTodo" in HTML and addTodo() in JS)

Solution 3:[3]

Please see below for sample solution, I combined the use of v-model and "submitEvent" i.e. <input type="submit" value="Submit">. Used submitEvent to benefit from the built in form validation.

<!DOCTYPE html>
    <html>
        <head>
            <script src="https://unpkg.com/vue"></script>
        </head>
    <body>
      <div id="app">
        <form  @submit.prevent="getFormValues">
           <div class="form-group">
              <input type="email" class="form-control form-control-user"                                            
              v-model="exampleInputEmail"                                
              placeholder="Enter Email Address...">
           </div>
           <div class="form-group">
              <input type="password" class="form-control"
              v-model="exampleInputPassword" placeholder="Password">   </div>
              <input type="submit" value="Submit">
        </form>
      </div>
      <script>
            const vm = new Vue({
                    el: '#app',
                    methods: {
                        getFormValues (submitEvent) {
                        alert("Email: "+this.exampleInputEmail+" "+"Password: "+this.exampleInputPassword);
                        }
                    }
            }); 
        </script>
        </body>
    </html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amit Rahav
Solution 2 Sebastian
Solution 3

Related Questions