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

farshadf's avatar

laravel vuejs form submit returns to the same page with query string

i am trying to submit a form with laravel and vuejs in a component like below :

          <form action="#" @submit.prevent="submitMobile">
            <div class="container my-5 z-depth-1">
                    <!-- Form -->
                    <form class="" action="">
                      <!-- Section heading -->
                      <div class="input-group">
                        <input class="form-control send-sms-btn" name="mobile"
                               v-validate="'required:11'" placeholder="_ _ _ _ _ _ _ _"
                               aria-label="Enter your email address"
                               aria-describedby="button-addon2">
                        <div class="input-group-append">
                          <button class="btn-theme btn btn-md btn-primary rounded-right m-0 px-3 py-2 z-depth-0 waves-effect"
                                  type="submit" id="button-addon2">submit
                          </button>
                        </div>
                     </div>
                    </form>
          </form>

and here is my vuejs :

    export default {
        props: [

        ],

        data: function () {
            return {

            }
        },

        methods: {   
          sendContactFormServer() {

            axios({
              method: 'POST',
              url: '/customer/send-sms',
              data: {
                "mobile": this.form.mobile,
              },
              headers: {
                'Content-Type': 'appllication/json',
                'Accept': 'application/json',
              }
            })
                .then(window.location.href = "/")
                .catch(error => console.log(error))
          },
          submitMobile: function() {
            this.$http.post('/customer/send-sms', this.formData).then(function(response) {
              console.log(response);
            }, function() {
              console.log('failed');
            });
          }
        }
    }

i tried 2 functions but both of them returns me to the same page with the query string of the input i have send . now i want to know how can i submit this form without refreshing the page . thanks in advance

0 likes
4 replies
tykus's avatar

You are not submitting the form with Javascript as far as I can see; there is nothing listening for the submit event on the form and delegating to the sendContactFormServer Vue method. The reason you are seeing the form inputs as query params is because your form is submitting as a GET request to the same URL. You also have one form nested inside another, which is not valid. Why are you using axios in one case, and this.$http in another?

wingly's avatar
wingly
Best Answer
Level 29

You have a form inside a form

1 like
farshadf's avatar

well i thought that @submit.prevent="submitMobile" makes the form being submited by vue . any hit how can i fix that ??

farshadf's avatar

damn sorry i didnt focus that i have messed with the html markup :( thanks in advance

Please or to participate in this conversation.