Page are not reload when click on submit button

in vue i create two submit button both are redirect to differnet page when i click on submit button only loaing icon are showing but not redirct to any page. when i refresh again page then click on button showing me account are created.

<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" value="save">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" value="submit">Know your risk</button>
            </p>
          </div>

self.$http
        .post(self.$member_whitelist_signup, form_data, event)
        .then(function (response) {
          if (response.data.success == true) {
            if (action === "save") {
        // handle save logic here
        this.$router.push("/save-page");
      } else if (action === "submit") {
        // handle submit logic here
        this.$router.push("/submit-page");
      }

LaryAI

3 years ago

Level 58

It seems like the issue is with the JavaScript code that handles the form submission. The code is not properly redirecting the user to the desired page after the form is submitted.

Here's a possible solution:

<template>
  <form @submit.prevent="submitForm">
    <!-- form fields here -->
    <button type="submit" name="action" value="save">Save</button>
    <button type="submit" name="action" value="submit">Submit</button>
  </form>
</template>

<script>
export default {
  methods: {
    submitForm(event) {
      const form = event.target;
      const action = form.elements.action.value;
      const formData = new FormData(form);

      // make the API call to submit the form data
      this.$http.post('/api/submit-form', formData)
        .then(response => {
          if (response.data.success) {
            // redirect the user to the appropriate page
            if (action === 'save') {
              this.$router.push('/save-page');
            } else if (action === 'submit') {
              this.$router.push('/submit-page');
            }
          } else {
            // handle error case
          }
        })
        .catch(error => {
          // handle error case
        });
    }
  }
};
</script>

In this solution, we use a single form with two submit buttons, each with a different value for the name attribute. When the form is submitted, we extract the value of the action parameter from the form data and use it to determine which page to redirect the user to after the form is successfully submitted.

We also use the FormData API to serialize the form data and send it to the server using the this.$http.post method provided by Vue Resource. If the API call is successful, we redirect the user to the appropriate page using this.$router.push. If there is an error, we handle it appropriately.

Note that this solution assumes that you have set up Vue Router and Vue Resource correctly in your project. If you haven't, you'll need to do that first before this solution will work.

Please or to participate in this conversation.