Page 1 sur 1

l'objet FormData ne fonctionne pas

Posté : 22 févr. 2022, 22:39
par if-js
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...

Re: l'objet FormData ne fonctionne pas

Posté : 23 févr. 2022, 11:19
par webmaster
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 5415 fois
Les données côté PHP sont envoyées en POST, il faut donc les récupérer avec $_POST[]

Re: l'objet FormData ne fonctionne pas

Posté : 23 févr. 2022, 15:10
par if-js
bonjour, les résultats sont avec mon code ou le votre? sinon puis-je avoir votre code SVP ?

Re: l'objet FormData ne fonctionne pas

Posté : 23 févr. 2022, 21:30
par webmaster
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>

Re: l'objet FormData ne fonctionne pas

Posté : 26 févr. 2022, 20:28
par if-js
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...