DEV Community

Falah Al Fitri
Falah Al Fitri

Posted on

2

PHP Vue form formData 20: input text textarea 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 />

            <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

process.php

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

Demo repl.it


Thank for reading :)

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more