loading...

PHP Vue form formData 10: input text using ajax (axios)

antelove19 profile image Falah Al Fitri Updated on ・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 />

            <hr />

            <input type="submit" value="Submit" />

        </form>

Script Vue

    <script>

        let vm = new Vue({

            el: "#myApp",

            data: {
                form: {},
                result: {}
            },

            methods: {

submit function

                submit: async function (event) {

                    event.preventDefault();


                    var formHTML = event.target; // this.$refs.formHTML

                    console.log( formHTML ); // formHTML element

Ref: Mozilla formData Object

                    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 ) {

Ref: github: ajax axios function from npm

                    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