DEV Community

Falah Al Fitri
Falah Al Fitri

Posted on

PHP Vue form formData 60: input text textarea file using ajax (axios)


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>
Enter fullscreen mode Exit fullscreen mode

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

            File Upload: <input type="file" name="upload" v-model="form.upload" /><br />
            Preview: <img src="#" />
            <br />

            <hr />

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

        </form>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

add onchange event in input with file type, then display it with img tag

    <script>

        /* preview image */
        document.querySelector( "input[type='file']" ).addEventListener( "change", function () {

            var preview = document.querySelector( "img" );
            var file    = document.querySelector( "input[type='file']" ).files[0];
            var reader  = new FileReader();

            reader.addEventListener( "load", function () {
                preview.height = 100;
                preview.title  = file.name;
                preview.src    = reader.result;
            }, false );

            if (file)
            {
                reader.readAsDataURL(file);
            }

            console.log( reader );

        } );

    </script>
Enter fullscreen mode Exit fullscreen mode

process.php

$data = array(
    "post"  => $_POST,
    "files" => $_FILES
);

var_dump($data);
Enter fullscreen mode Exit fullscreen mode

Demo repl.it


Thank for reading :)

Top comments (0)