How to show success message in vue js after inserting the date into database

Question

I have a perfectly working form I can insert data into database using axios after form validation. I am just struggling to show a success message after inserting the data into the database. how to hide the form and display a succcess message in the same section after sending the data into the database??

here's my perfectly working code

<template>
  <b-container>
    <div class="update-info">
      <div class="feature-text myinv-title">
        <h5 class="title title-sm">Update your information</h5>
      </div>
    <div>
      <form @submit.prevent="submit">
        <p v-if="errors.length">
          <b>Please fill in all the fields</b>
          <ul>
            <li v-for="error in errors" class="alert alert-danger">{{ error }}</li>
          </ul>
        </p>

         <div class="form-row">
           <div class="form-group col-md-3">
             <label for="trx number">TRX No</label>
             <input
               type="text"
               name="trx Number"
               v-model="newUser.trx"
               class="form-control trx-address-nooverflow"
               placeholder="Copy paste your TRX no"
             />
             <b-form-text id="input-formatter-help">
              <a class="text-success">Your TRX address: {{trxNo}}</a>
             </b-form-text>
           </div>
           <div class="form-group col-md-3">
             <label for="name">Name</label>
             <input
               type="text"
               name="name"
               v-model="newUser.name"
               class="form-control"
               placeholder="Enter you name"
             />
           </div>
           <div class="form-group col-md-3">
             <label for="email">Email</label>
             <input
               type="text"
               name="email"
               v-model="newUser.email"
               class="form-control"
               placeholder="Enter valid email address"
             />
           </div>
           <div class="form-group col-md-3">
             <label for="country">Country</label>
             <country-select
               id="Country"
               v-model="newUser.country"
               :country="newUser.country"
               topCountry="US"
               class="form-control"
             />
           </div>
           <div class="form-group col-md-3">
             <label for="mobile">Mobile No</label>
             <input
               id="mobile"
               class="form-control"
               v-model="newUser.mobile_no"
               type="text"
               placeholder="Enter your mobile no."
             />
             <b-form-text id="input-formatter-help">
              Please enter valid phone number
             </b-form-text>
           </div>

           <div class="form-group col-md-3">
             <div class="top-30">
               <input type="submit" class="btn btn-btn btn-grad btn-submit" />
             </div>
           </div>
         </div>
        </form>
    </div>

    </div>
  </b-container>
</template>

here's my vue js code

<script>
import axios from 'axios'

export default{
  data(){
    return{
      errorMessage: "",
      successMessage: "",
      text: "success",
      errors: [],
      users: [],
      newUser: {trx: "", name: "", country: "", email: "", mobile_no: ""}
    }
  },
  computed: {
    trxNo: function() {
      return this.$store.state.myAddress;
    }
  },
  mounted: function(){
    this.getAllUsers();
  },
  methods:{
    getAllUsers: function(){
      axios.get('https://onex.tronpayer.com/api/update-info-form.php?action=read', { crossdomain: true })
      .then((response) => {
        if(response.data.error){
          this.errorMessage = response.data.message;
        }else{
          this.users = response.data.users;
        }
        });
    },

    submit(){
      this.checkForm()
      if(!this.errors.length) {

      var formData = this.toFormData(this.newUser);
      axios.post('https://onex.tronpayer.com/api/update-info-form.php?action=update', formData, { crossdomain: true })
      .then((response) => {
        this.newUser = {trx: "", name: "", country: "", email: "", mobile_no: ""};
        if(response.data.error){
          this.errorMessage = response.data.message;
        }else{
          this.getAllUsers();
        }
        });
      }
    },

    toFormData: function(obj){
      var form_data = new FormData();
      for(var key in obj){
        form_data.append(key, obj[key]);
      }
      return form_data;
    },
    clearMessage: function(){
      this.errorMessage = "";
      this.successMessage = "";
    },
    //validation
    checkForm: function (e) {
      this.errors = [];

      if (!this.newUser.trx) {
        this.errors.push("Trx Number Required.");
      }
      if (!this.newUser.name) {
        this.errors.push("Name Required.");
      }
      if (!this.newUser.country) {
        this.errors.push("Country Required.");
      }
      if (!this.newUser.email) {
        this.errors.push('Email Required.');
      } else if (!this.validEmail(this.newUser.email)) {
        this.errors.push('Valid Email Address Required.');
      }
      if (!this.newUser.mobile_no) {
        this.errors.push("Mobile Number Required.");
      }

      if (!this.errors.length) {
        return true;
      }

    },

    validEmail: function (email) {
      var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
    }
  }
}
</script>

Solution

You can use the v-if conditional rendering for disabling the form and showing the message. https://vuejs.org/v2/guide/conditional.html

Just create a variable like savingSuccessful: false and set it to true when your ajax request was successful.

Use it now in your form like

 <form @submit.prevent="submit" v-if="!savingSuccessful">

This means your form will be displayed until your variable is true.

For a success-message you can create something like this:

<div class="success" v-if="savingSuccessful"> 
    {{ this.text }} 
</div>

Your message will be rendered when the variable is true.

Here a JSFiddle: https://jsfiddle.net/MichelleFuchs/nydruxzw/2/

Comments

[nizantz]

You could use the vuetify snackbar to show custom success message on successful add (else block of your post response) or error message on error

[Kevz]

Wonderful answer but sadly, the JSFiddle link is not working. But this helps a lot thank you!