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?
Nov 9, 2020
4
Level 3
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
Please or to participate in this conversation.