loading...

PHP Vue form formData 30: input text textarea radio using ajax (axios)

antelove19 profile image Falah Al Fitri ・2 min read

Happy Coding

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 />

            Gender:
            <input type="radio" name="gender" value="male" v-model="form.gender" checked /> Male
            <input type="radio" name="gender" value="female" v-model="form.gender" /> Female
            <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


Thank for reading :)

Posted on by:

Discussion

markdown guide