How to prevent default, then submit default with VueJS

Question

I am submitting a form using VueJS and i need to submit two actions on the final submit, one after the other.

Either one works when running just one.

What i am trying to do, is signup a user for firebase, wait, then submit the form with the same email/password as normal and signup that user with another sign in system.

The delimiters have been changed, so just over look that.

How to do this with Jquery

   <form @submit="checkForm" @submit.prevent="register" action="#" method="post" novalidate="true" ref="form">
                <h1 class="text-center">{{ 'customer.register.title' | t }}</h1>
                  <h1 v-if="authUser">
                  Is authed in
                  </h1>
                  <h1 v-else>
                  Not auth
                  </h1>
                <div class="form-group">
                    <ul>
                        <li v-for="error in errors">
                            ${ error }
                        </li>
                    </ul>
                </div>
                <p>
                    <label for="CustomerFirstName">${ firstName }</label>
                    <input id="name" v-model="name" type="name" name="customer[first_name]" autocomplete="name"
                        autocorrect="off" autocapitalize="off">
                </p>
                <p>
                    <label for="CustomerEmail">${ loginEmailName }</label>
                    <input id="email" v-model="email" type="email" name="customer[email]" autocomplete="email"
                        autocorrect="off" autocapitalize="off">
                </p>

                <p>
                    <label for="CustomerPassword">${ loginPasswordName }</label>
                    <input id="password" v-model="password" type="password" name="customer[password]">
                </p>

                <p>
                  <button type="submit" value="Create" class="btn btn-primary">Submit</button>
                </p>
            </form>

Then the JS that works on either one but not together.

const appTwo = new Vue({
delimiters: ["${", "}"],
el: "#create_customer_vue",
data: {
  errors: ["1", "2", "3"],
  email: '',
  password: '',
  name: null,
  firstName: "First name",
  loginEmailName: emailTitle,
  loginPasswordName: passwordTitle,
  title: registerTitle,
  authUser: null
},
methods: {
  register: function() {
   firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
},
submitForm: function(){
  this.$refs.form.submit()
},
 created() {
   firebase.auth().onAuthStateChanged(user => { this.authUser = user })
},
  checkForm: function(e) {
    if (this.email && this.password) {
      return true;
    }

    this.errors = [];

    if (!this.email) {
      this.errors.push("Valid email required");
    }
    if (!this.password) {
      this.errors.push("Valid password required");
    }
    e.preventDefault();
  }
}
});

Phil · Accepted Answer · 2019-10-27 22:42:42Z

2

Just call the one submit handler then submit the form normally after the Firebase operation completes.

For example

<form @submit.prevent="register" ... >

methods: {
  checkForm () {
    if (this.email && this.password) {
      return true;
    }

    this.errors = [];

    if (!this.email) {
      this.errors.push("Valid email required");
    }
    if (!this.password) {
      this.errors.push("Valid password required");
    }
    return false
  },
  async register ($event) {
    if (this.checkForm()) {
      await firebase.auth().createUserWithEmailAndPassword(this.email, this.password)
      $event.target.submit() // or use this.$refs.form.submit() if you prefer
    }
  }
}

answered Oct 27, 2019 at 22:42

Phil

166k25 gold badges265 silver badges269 bronze badges

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

4 Comments

learncodes123 Over a year ago

Thanks for taking the time. With the parameters just leave them empty and reference this.$refs.form.submit() ?

learncodes123 Over a year ago

The parameters on the register function that is.

Phil Over a year ago

@learncodes123 if I understand your question correctly, then yes, if you're not using $event then you don't need to pass it to your method

learncodes123 Over a year ago

After a bit of changes (minimal HTML) had to change the path it would refresh to. Working! And i've learned a bit more about async await (although not fully understanding what happened there, i'll read.) I changed back to the $refs form and all working fine. Thanks!

Collectives™ on Stack Overflow

How to prevent default, then submit default with VueJS

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related