PHP Vue form formData 50: input text textarea checkbox using ajax (axios)
Tags: php, vue, form, axios
Published: 2019-12-17 18:02:02

<hr />

<center>Happy Coding</center>

<hr />

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>

<hr />

process.php

    var_dump($_POST);

<hr />

Demo <a href="https://repl.it" >repl.it</a>

<ul>
  <li><a href="https://repl.it/@antelove19/PHP-Vue-form-formData-50" >Editor</a></li>
  <li><a href="https://PHP-Vue-form-formData-50.antelove19.repl.co" >Live</a></li>
</ul>

<hr/>

<center>Thank for reading :)</center>

<hr/>