DEV Community

Falah Al Fitri
Falah Al Fitri

Posted on

2

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

            Programming Language (single):
            <select name="language" v-model="form.language" >
                <option value="c" >C</option>
                <option value="c++" >C++</option>
                <option value="java" >Java</option>
                <option value="javascript" selected >Javascript</option>
                <option value="php" >PHP</option>
            </select>
            <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 :)

Sentry image

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay