[JavaScript] Soumettre via Ajax un formulaire Symfony avec Vue-resource et un objet FormData

Publié le 23/04/2019 • Mis à jour le 23/04/2019

On a parfois besoin de soumettre manuellement un formulaire via Ajax. Pour ce faire nous devons récupérer toutes les valeurs des champs composant ce formulaire et effectuer une soumission manuelle comme si un utilisateur avait cliqué sur le bouton de validation. Voilà la manière la plus simple que j'ai trouvé d'y arriver en utilisant le composant vue-resource et un objet JavaScript FormData. Le principal avantage ici est de ne pas avoir à construire les données manuellement ni d'avoir à faire de boucles inutiles.


<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
<script>
    // Just the once will not hurt: This JavaScript snippet is not unit tested for now, but you've got the spirit!
    let vue = new Vue({
        delimiters: ['{', '}'],
        el: '#vue',
        data: {
            form: 'my-form',
            url: '{{ path('homepage') }}',
        },
        methods: {
            subscribeOnClick: function(e) {
                // @see https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData
                let form = document.getElementById(this.form);
                let formData = new FormData(form);

                // This example doesn't handle the submission response, it wasn't necessary in my case.
                // @see https://github.com/pagekit/vue-resource/blob/master/docs/recipes.md#forms
                this.$http.post(this.url, formData);

                // That's it! 😁
            }
        }
    });
</script>

 Plus sur Stackoverflow