What is the alternate way of new FormData(this) if i submit form with VUE.JS

Question

I am new to VUE.JS and searching and googling from sometime but i didn't find a satisfied solution.. Problem is as we submitting form through JQuery or Javascript so we can pass whole fields of the form with " new FormData(this) " this to our server side request. But problem is that its not working in VUE JS so Please I need a guidance that how can get all the data of form without creating a single variable of every field of the form...

<form id="testing">
   <input type="text" name="email">
   <input type="password" name="password">
   <input type="submit" value="Save">
</form>

$(document).on('submit','#testing',function () {
  event.preventDefault();
  $.ajax({
    url: url + "add-steps-process",
    type: "POST",
    data: new FormData(this),
    contentType: false,
    cache: false,
    processData: false,
    dataType: 'json',
    success: function (data)
     {
     }
   })
  })

 VUE JS CODE
    <form @submit.prevent="add_new_user()" id="new_user_form" method="post">  
      <input type="email" name="email" v-model="email">
       <input type="password" name="password" v-model="password">
       <button type="submit" class="btn btn-default">Add User</button>
    </form>

 IN MY DATA METHOD OF VUE JS

  add_new_user:function(){
     var ins = this;
     var username  = ins.email;
     var passsword = ins.password;
     var url = 'http://myURL/page';
     $.ajax({
          url: url+"add-user",
          type: "POST",
          data: {username,password}, 

          success: function(data)   
          {
          }
      })
    }

 Now i want to avoid creating variable for every field i want the form should submit all the variables as without creating a single field variable.

Can you show us your code? VueJS **is** JavaScript, so there is no reason why you can't do it in VueJS when you can do it in JS anyway. I have a hunch that `this` is not what you're expecting when you're using it in the context of a callback in VueJS. — Terry, Oct 26 '17 at 13:20
Please update your question to include a minimal. concrete, and verifiable example. Also, the code you posted is jQuery, *not* VueJS. — Terry, Oct 26 '17 at 13:42
Yes sir this is jquery i want to explain my question using jQuery code because this is working with this code but not working with VUE.JS Please sir check the question i updated — Sher Muhammad, Oct 26 '17 at 13:48
Can you post your VueJS code? That is what we are looking for. Posting code that works in jQuery isn't really relevant to your question. — Terry, Oct 26 '17 at 13:49
My suspicions have been confirmed: `this` in your VueJS method refers to the component/app, and not the element itself. For that, simply access the event target, e.g. `var ins = event.target`. — Terry, Oct 26 '17 at 14:20
Please...for readability, please don't write method names with underscores...please. Camel case...PLEASE #MyOCD — Mike Barwick, Jan 31 '18 at 17:36

score 1 · Accepted Answer · edited Jul 16 '22 at 00:30

As I have said, you probably was confused about what this is referring to when used in the context of a VueJS method. In this case, this actually refers to the app/component instance, instead of the form element which triggered the submit.

Another issues with your code:

you are accessing username and password as if they are objects of the DOM node of the <form> element. Creata a FormData() instance and then access the inputs using .get(<key>), e.g. .get('username')
password is a reserved keyword, try using something else, like userpass

In order to access the element, you can do one of the two solutions:

check for the native JS event object. If you intend to pass additional parameters, you will have to pass the native JS event using $event as an argument into the add_new_user callback.
give the form a VueJS ref attribute, say loginForm. The form element can then be accessed using this.$refs.loginForm

Solution 1: simply check the native `event`

new Vue({
  el: '#app',
  data: {
    email: 'test@gmail.com',
    password: ''
  },
  methods: {
    add_new_user: function(event) {
      var formData = new FormData(event.target);
      var username = formData.get('email');
      var userpass = formData.get('password');
      var url = 'http://myURL/page';
      console.log(username, userpass, url);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
  <form @submit.prevent="add_new_user" id="new_user_form" method="post">
    <input type="email" name="email" v-model="email">
    <input type="password" name="password" v-model="password">
    <button type="submit" class="btn btn-default">Add User</button>
  </form>
</div>

Solution 2: Give unique `ref` to `<form>` element:

new Vue({
  el: '#app',
  data: {
    email: 'test@gmail.com',
    password: ''
  },
  methods: {
    add_new_user: function() {
      var formData = new FormData(this.$refs.loginForm);
      var username = formData.get('email');
      var userpass = formData.get('password');
      var url = 'http://myURL/page';
      console.log(username, userpass, url);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="app">
  <form @submit.prevent="add_new_user" id="new_user_form" method="post" ref="loginForm">
    <input type="email" name="email" v-model="email">
    <input type="password" name="password" v-model="password">
    <button type="submit" class="btn btn-default">Add User</button>
  </form>
</div>

Thank you sir i understand what you want me to explain... I understand but still i have 1 small question. Can we get all the form data in one object without creating variables for every field of the form? For example i have var username = formData.get('email'); var userpass = formData.get('password'); and i want to access these as these both fields data without creating single field variable is good to get all the form data in one object and process with that... — Sher Muhammad, Oct 27 '17 at 07:08
@SherMuhammad If you’re using jQuery you can simply use `.serialize()` to serialize the form into a data object, and pass it into the data argument of your AJAX request. — Terry, Oct 27 '17 at 07:09
Ok sir. And what if i want to get all my form data using VUE.js? like serialize does. Because .serialize() doesn't need to create variable of every single form field and same i want for VUE.js — Sher Muhammad, Oct 27 '17 at 07:20
@SherMuhammad See: https://stackoverflow.com/questions/11661187/form-serialize-javascript-no-framework — Terry, Oct 27 '17 at 07:24

What is the alternate way of new FormData(this) if i submit form with VUE.JS

1 Answers1

Solution 1: simply check the native event

Solution 2: Give unique ref to <form> element:

Solution 1: simply check the native `event`

Solution 2: Give unique `ref` to `<form>` element: