Hi so I'm using formspree along with ajax to submit a form through the client side of my webpage but I have an error when firing a function inside the onreadystatechange function of the xmlhttprequest i'm sending to submit data to formspree. PS: I used an invalid formspree address so it only fires the error function
here is my snippet:
new Vue({
el: '#app',
data: {
msg: "",
name: null,
pass: null
},
methods: {
error(error){
this.msg = "error:"+error
},
success(){
this.msg = "success"
},
send(){
let form = $('#contact-form')[0]
var data = new FormData(form);
this.ajax(form.method, form.action, data, this.success(), this.error());
if(this.ajax){
this.name = this.pass = null
}
else
{
//other
}
},
ajax(method, url, data, success, error) {
var xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.setRequestHeader("Accept", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState !== XMLHttpRequest.DONE) return;
if (xhr.status === 200) {
success(xhr.response, xhr.responseType);//is not a fucntion
} else {
error(xhr.status, xhr.response, xhr.responseType);//is not a fucntion here
}
};
xhr.send(data);
},
}
})input{display: block;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="app"><form id="contact-form" method="POST" action="https://formspree.io/mfaeqny" @submit.prevent="send"><input type="text" v-model="name" name="name" placeholder="name"><input type="password" v-model="pass" name="pass" placeholder="pass"><button type="submit">submit</button><p>{{ msg }}</p></form></div>