How to auto submit form after values are set from api

Question

how to auto submit form after values of from are set after calling api

i want the form to auto submit after the values are successfully fetched from the api,

i used $refs.form.submit(), however, it doesn't work as expected,

a request is sent to: http://localhost:3200/login-saml (FE)

while expected url is : localhost:8080/login (BE)

here is all my code:

<template>
  <!-- Sing in  Form -->
  <section class="sign-in" style="padding-top: 65px">
    <div class="container">
      <form v-bind:action="urlLogin" method="post" ref="form">
        <input type="text" id="SAMLRequest" name="SAMLRequest" v-model="SAMLRequest">
        <input type="submit" value="Submit">
      </form>
    </div>
  </section>
</template>

<script>
import axios from 'axios';

export default {
  name: 'LoginPage',
  data() {
    return {
      urlLogin: '',
      SAMLRequest: ''
    }
  },
  mounted() {
    axios.get(`http://localhost:8080/rest/v2/sso/loginInfo`)
        .then(response => {
          this.urlLogin = response.data.urlLogin;
          this.SAMLRequest = response.data.samlrequest;
          this.$refs.form.submit();
        })
        .catch(e => {
          console.log(e)
        })
  }
}
</script>

what is the problem? do you have an error? or something else? — Mah Es, Nov 21 '21 at 09:52
@MahEs I have updated the question with error details, hope you can check it for me — namnv, Nov 21 '21 at 10:00
does your axios call returns 200 ? can you provide a log of your response? i'm not usre, but i think problem might be that your axios url is a local url. — Mah Es, Nov 21 '21 at 10:14
@MahEs axios returns 200, everything works fine if I remove this.$refs.form.submit(); and click by hand — namnv, Nov 21 '21 at 10:30

hamid-davodi · Answer 1 · 2021-11-21T18:34:18.913

I think the reason of problem that you have is the action attribute that you set in your form. I don't know about the back-end structure of your site ( it is node-js or php or ... ), but when you are using axios in your project actually you don't need to use normal way of form submitting (using :action and a submit button to submit form). You could handle it with the help of axios methods. Here is a way that I implement to submit a form (for example a register form) with a vue component:

<template>
  <!-- Sing in  Form -->
  <section>
    <div>
        <form method="post">
            <label for="usernameId">username:</label>  
            <input type="text" id="usernameId" name="username" v-model="username">

            <label for="emailId">email:</label>  
            <input type="email" id="emailId" name="email" v-model="email">

            <label for="passwordId">password:</label>  
            <input type="password" id="passwordId" name="password" v-model="password">

            <button type="button" @click="postData">Submit</button>
        </form>
    </div>
  </section>
</template>

<script>
import axios from 'axios';

export default {
  name: 'formCompo',
  data() {
    return {
      username: '',
      email: '',
      password: ''
    }
  },

  methods: {
      postData: function() {
        let postVar = {
            username: this.username,
            email: this.email,
            password: this.password
        };
        /* put your back-end url in axios.post() for example http://localhost:3200/saml-... */
        axios.post(`http://localhost:8080/stack-overflow/axios-test/datafind.php`, postVar).then((result) => {
            console.log(result);
        }).catch(err => {
            console.error(err);
        });
      }
  },

  mounted() {
    /* put the url that you want to get data from back-end in post.get() */
    axios.get(`http://localhost:8080/stack-overflow/axios-test/dataGet.php`)
        .then(response => {
          console.log(response.data);
          this.username = response.data.username;
          this.email = response.data.email;
          this.password = response.data.password;
          this.postData();
        })
        .catch(e => {
          console.log(e)
        })
        
  }
}
</script>

You could comment only the <form> tag in the above code to see that it works again without any problem. In the code above I used the postData method to post data to back-end with axios. This method could be called when the button is clicked or in the mounted() hook. If you use this method in your project you don't need to use urlLogin data but you can define conditions that when you use auto submit (in mounted hook) or using button for submitting data. If you used the script that I posted and your problem remained I guess that the problem is from CORS policy that has its own solution depends on your back-end structure. for example this question is a good solution in my opinion if you use php in your back-end.

How to auto submit form after values are set from api

1 Answers1