l'objet FormData ne fonctionne pas

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
if-js
Messages : 3
Enregistré le : 22 févr. 2022, 22:21

l'objet FormData ne fonctionne pas

Message par if-js » 22 févr. 2022, 22:39

Bonjour a tous, je souhaiterai traiter mon formulaire PHP en AJAX, je voudrai donc utiliser l'objet FormData pour passer le resultat de mes inputs en post dans la fonction send() de mon fichier AJAX.

Code : Tout sélectionner

window.addEventListener("load", function(event) {

    var formHotel = document.getElementById("formHotel");
    
    formHotel.addEventListener('submit', function(event){
       
        console.log(formHotel);
        var data = new FormData(formHotel);
        console.log(data);
        event.preventDefault();
        
        var xhr = new XMLHttpRequest();
        xhr.addEventListener('readystatechange', function(event){
            if(xhr.readyState==4){
                if(xhr.status=="200"){
                    var result = document.getElementById('result');
                    result.innerHTML = xhr.responseText;
                    console.log(this.response);

                }else{
                    alert("error code" + xhr.status + " : " + xhr.statusText);
                }
            }
        });
        xhr.open("POST", "controllers/form.hotel.controller.php", true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
        xhr.send(`submit=${formHotel.submit.value}&user_name=${formHotel.user_name.value}&user_mail=${formHotel.user_mail.value}&date_start=${formHotel.date_start.value}&date_end=${formHotel.date_end.value}&hotel_id=${formHotel.hotel_id.value}`);
        //xhr.send(data);
       
    });

});
Ce code est fonctionnelle mais quand je remplace le parametre de la fonction send par l'objet FormData instancié, l'AJAX ne fonctionne plus et le console log de FormData est vide...

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: l'objet FormData ne fonctionne pas

Message par webmaster » 23 févr. 2022, 11:19

Bonjour,

J'ai fait un test avec un formdata et un formulaire simplifié. La console montre bien l'envoi de données :
Capture d’écran 2022-02-23 à 11.18.21.png
Capture d’écran 2022-02-23 à 11.18.21.png (72.72 Kio) Vu 3781 fois
Les données côté PHP sont envoyées en POST, il faut donc les récupérer avec $_POST[]
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

if-js
Messages : 3
Enregistré le : 22 févr. 2022, 22:21

Re: l'objet FormData ne fonctionne pas

Message par if-js » 23 févr. 2022, 15:10

bonjour, les résultats sont avec mon code ou le votre? sinon puis-je avoir votre code SVP ?

Avatar du membre
webmaster
Administrateur du site
Messages : 483
Enregistré le : 28 févr. 2017, 15:19

Re: l'objet FormData ne fonctionne pas

Message par webmaster » 23 févr. 2022, 21:30

Voici le code complet

Je regarde l'appel AJAX dans la console javascript de Chrome, onglet Network

Code : Tout sélectionner

<form id="formHotel">
    user_name : <input name="user_name">
    user_mail : <input name="user_mail">
    <input type="submit" value="submit">
</form>


<script>

window.addEventListener("load", function(event) {

    var formHotel = document.getElementById("formHotel");
    
    formHotel.addEventListener('submit', function(event){
       
        console.log(formHotel);
        var data = new FormData(formHotel);
        console.log(data);
        event.preventDefault();
        
        var xhr = new XMLHttpRequest();
        xhr.addEventListener('readystatechange', function(event){
            if(xhr.readyState==4){
                if(xhr.status=="200"){
                    var result = document.getElementById('result');
                    result.innerHTML = xhr.responseText;
                    console.log(this.response);

                }else{
                    alert("error code" + xhr.status + " : " + xhr.statusText);
                }
            }
        });
        xhr.open("POST", "controllers/form.hotel.controller.php", true);
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
        //xhr.send(`submit=${formHotel.submit.value}&user_name=${formHotel.user_name.value}&user_mail=${formHotel.user_mail.value}&date_start=${formHotel.date_start.value}&date_end=${formHotel.date_end.value}&hotel_id=${formHotel.hotel_id.value}`);
        xhr.send(data);
       
    });

});

</script>
TJS : 20 ans et mon livre Tout JavaScript chez Dunod
https://www.toutjavascript.com/livre/index.php

if-js
Messages : 3
Enregistré le : 22 févr. 2022, 22:21

Re: l'objet FormData ne fonctionne pas

Message par if-js » 26 févr. 2022, 20:28

merci pour ton aide, tout fonctionne, faut bien que j'enlève la méthode setrequestheader en POST, par contre c'est un mystère pour moi cet objet FormData son console.log ne retourne toujours qu'un objet vide pourtant c'est bien par son biais que les data input sont véhiculés...

Répondre