use two submit button in vue js

I have one program where user fill details and below i put one is submit button and another one is know your risk. Now i want when a user click on know your risk account are also created and user go to another page. Submit button are working perfectly. I try many methods but not working. How can i do this.

<form
          @submit.prevent="member_whitelist_signup"
          class="login100-form validate-form"
        >
  <div
              class="wrap-login100-form-btn"
              style="z-index: 0"
              
            >

              <div class="login100-form-bgbtn"></div>
              <button class="login100-form-btn">Submit</button>
            </div>
          </div>
          

          <CongratsModel v-show="showModal" @close-modal="showModal = false" />
          <div class="container-login100-form-btn m-t-10 m-b-10">
            <p
              
              class="know_your_risk_label text-secondary"
            >
              <button class="login100-form-btn know-risk-text">Know your risk</button>
            </p>
          </div>

I put same class on know your rish button but not working

self.$http
        .post(self.$member_whitelist_signup, form_data)
        .then(function (response) {
          if (response.data.success == true) {
            if (self.know_your_risk_value == 0) {
              self.user_msg = "Member details updated successfully.";
              localStorage.setItem("new_user", "true");
              self.login_user();
              // self.$router.push({ path: '/member/member-questionnaire' });

            } else {
              // self.showModal=true
              window.location.href = window.location.origin + "/questionnaire";

            }
          } else {
            if (response.data.data == null) {
              self.error_msg = response.data.message;
            } else {
              let first_error_key = Object.keys(response.data.data)[0];
              self.error_msg = response.data.data[first_error_key][0];
            }
          }

          self.devloader = false;
        })
        .catch(function (error) {
          console.warn(error);
        });

LaryAI

3 years ago

Level 58

To achieve this, you can add a click event listener to the "Know your risk" button and call a method that will submit the form and redirect the user to the desired page. Here's an example implementation:

<template>
  <form @submit.prevent="submitForm" class="login100-form validate-form">
    <!-- form fields here -->
    <div class="wrap-login100-form-btn">
      <div class="login100-form-bgbtn"></div>
      <button type="submit" class="login100-form-btn">Submit</button>
    </div>
    <div class="container-login100-form-btn m-t-10 m-b-10">
      <p class="know_your_risk_label text-secondary">
        <button type="button" class="login100-form-btn know-risk-text" @click="knowYourRisk">Know your risk</button>
      </p>
    </div>
  </form>
</template>

<script>
export default {
  methods: {
    submitForm() {
      // handle form submission here
    },
    knowYourRisk() {
      // submit the form
      this.$http.post(this.$member_whitelist_signup, form_data).then(response => {
        if (response.data.success == true) {
          // redirect to the desired page
          window.location.href = window.location.origin + "/questionnaire";
        } else {
          // handle error
        }
      });
    }
  }
};
</script>

In this example, we added a click event listener to the "Know your risk" button and called a method called knowYourRisk. Inside this method, we submitted the form using this.$http.post and redirected the user to the desired page using window.location.href. Note that we used type="button" for the "Know your risk" button to prevent it from submitting the form.

Please or to participate in this conversation.