Use two submit button in form with different redirect but when click they go to same url

Use two submit button in form with different redirect but when click they go to same url. i also add a true and false value but they redirect to same url .

<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" type="submit" v-model="saveClicked" value="true">Submit</button>
            </div>
          </div>

          
          <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 text-black" type="submit" v-model="saveClicked" value="false" name="risk">Know your risk</button>
            </p>
          </div>

var vm = this;

  self.$http
    .post(self.$member_whitelist_signup, form_data)
    .then(function (response) {
      if (response.data.success == true) {
         if (vm.saveClicked) {
          
          vm.$router.replace({ path: '/member/member-questionnaire' });

        } else {
          // self.showModal=true
           vm.$router.replace('/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

One possible solution is to use JavaScript to differentiate between the two submit buttons and redirect to the appropriate URL based on the button clicked. Here's an example:

<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" type="submit" name="submitType" value="submit">Submit</button>
  </div>
</div>

<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 text-black" type="submit" name="submitType" value="knowYourRisk">Know your risk</button>
  </p>
</div>

In this example, we've added a name attribute to both submit buttons with a value of submitType. When the form is submitted, the value of the clicked button will be sent along with the form data.

Then, in the JavaScript code, we can check the value of submitType and redirect to the appropriate URL:

var form = document.querySelector('form');
form.addEventListener('submit', function(event) {
  event.preventDefault(); // prevent the form from submitting normally

  var submitType = event.submitter.value; // get the value of the clicked button

  if (submitType === 'submit') {
    window.location.href = '/member/member-questionnaire';
  } else if (submitType === 'knowYourRisk') {
    window.location.href = '/questionnaire';
  }
});

This code listens for the submit event on the form, gets the value of the clicked button using event.submitter.value, and redirects to the appropriate URL based on the value. Note that we're using window.location.href to redirect the page.

Of course, you'll need to adjust the URLs to match your specific application.

Please or to participate in this conversation.