Add external script in head tag.
First for vue, and second for axios ajax.
<head>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
</head>
In body, add div tag with id="myApp" for virtual DOM Vue
<div id="myApp" >
<!-- v-on:submit.prevent -->
<form method="post" action="process.php" @submit="submit" ref="formHTML" >
Firstname: <input type="text" name="firstname" v-model="form.firstname" />
<br />
Lastname: <input type="text" name="lastname" v-model="form.lastname" />
<br />
Description: <textarea name="description" v-model="form.description" rows="10" cols="50" ></textarea>
<br />
Hobby (single): <input type="checkbox" name="hobby" v-model="form.hobby" /> Studying
<br />
<hr />
<input type="submit" value="Submit" />
</form>
Script Vue
<script>
let vm = new Vue({
el: "#myApp",
data: {
form: {},
result: {}
},
methods: {
submit: async function (event) {
event.preventDefault();
var formHTML = event.target; // this.$refs.formHTML
console.log( formHTML ); // formHTML element
// https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
var formData = new FormData( formHTML );
console.log( formData );
// https://github.com/axios/axios
/* AJAX request */
this.ajax( formHTML, formData ); // ajax( form, data, destination = null )
},
ajax: async function ( form, data, destination = null ) {
await axios( {
method: form.method,
url: form.action,
data: data,
config: {
headers: { "Content-Type": "multipart/form-data" }
}
} )
/* handle success */
.then( result => {
this.result = result.data;
console.log(result);
console.log(result.data);
} )
/* handle error */
.catch( error => {
console.error(error)
} );
}
}
});
</script>
process.php
var_dump($_POST);
Demo repl.it
Top comments (0)