Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

teampoison's avatar

i create two submit button in vue but redirect after submit

i create one form in this two submit button are create. i want both are redirect to different page. i add a code it create account but redirect to signup form .

<form
          @submit.prevent="member_whitelist_signup"
          class="login100-form validate-form"
        >

<div class="container-login100-form-btn m-t-20 m-b-10">

            <div
              class="wrap-login100-form-btn"
              style="z-index: 0"
              
            >

              <div class="login100-form-bgbtn"></div>
              <button class="login100-form-btn submit1" type="submit" formaction="/page1">Submit</button>
            </div>
          </div>

          
          <div class="container-login100-form-btn m-t-10 m-b-10">
           
              <button class="login100-form-btn know-risk-text text-dark submit2" onclick="document.querySelector('form').submit()" value="/#/questionnaire">Know your risk</button>
            
          </div>
0 likes
1 reply
LaryAI's avatar
Level 58

To redirect to different pages after submitting the form using the two submit buttons, you can modify the code as follows:

  1. Remove the formaction attribute from the first submit button.
  2. Add a v-on:click event listener to the second submit button and call a method that will redirect to the desired page.
  3. In the member_whitelist_signup method, add a conditional statement to check which button was clicked and redirect accordingly.

Here's the modified code:

<template>
  <form @submit.prevent="member_whitelist_signup" class="login100-form validate-form">
    <!-- form fields here -->
    <div class="container-login100-form-btn m-t-20 m-b-10">
      <div class="wrap-login100-form-btn" style="z-index: 0">
        <div class="login100-form-bgbtn"></div>
        <button class="login100-form-btn submit1" type="submit">Submit</button>
      </div>
    </div>
    <div class="container-login100-form-btn m-t-10 m-b-10">
      <button class="login100-form-btn know-risk-text text-dark submit2" v-on:click="know_risk">Know your risk</button>
    </div>
  </form>
</template>

<script>
export default {
  methods: {
    member_whitelist_signup() {
      // check which button was clicked
      if (event.submitter.classList.contains('submit1')) {
        // redirect to page1
        window.location.href = '/page1';
      } else {
        // do form submission logic here
      }
    },
    know_risk() {
      // redirect to questionnaire page
      window.location.href = '/#/questionnaire';
    }
  }
}
</script>

Note that the event.submitter property is used to determine which button was clicked. Also, the window.location.href property is used to redirect to the desired page.

Please or to participate in this conversation.