Bonjour la famille, je vous contacte car j'ai un soucis pour envoyer les données de mon formulaire avec ajax , ils ne sont tout simplement pas envoyé alors que j'arrive a communiquer avec la page censé traiter les données...

voici mon formulaire
        <form class="form">
                <select name="place">
                    <option value="1">P1</option>
                    <option value="2">P2</option>

                </select>

                <select name="categorie">

                    <option value=200> 200</option>
                    <option value=500> 500 </option>

                </select>

                        <div class="buttons">
                                <button class="btn" name = "choix" type="submit" value="valider" id="envoyer">Valider</button>
                        </div>  

        </form>

        <div class="contenu"></div> //la div qui affiche le contenu de la page qui exécute les requêtes

<script>
const formEl=document.querySelector('.form');

formEl.addEventListener('submit', event=>{
    event.preventDefault();// pour éviter de quitter la page courante
    const formData=new FormData(formEl);
    const data =new URLSearchParams(formData);//ces deux lignes me permettent d'enregistrer les informations saisies par l'utilisateur, 
    // et sa marche bien lorsque je fais un  console.log(formData.get('categorie'));
    //je retrouve bien les informations
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById("contenu").innerHTML =
        xhr.responseText;
      }
    };//jusqu'ici tout va bien , grace aux lignes au dessus 
    // mais à partir d'ici rien ne fonctionne les données ne sont jamais envoyées
    xhr.open("POST", "tickets", true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send("place="+formData.get('place'),
    "catégorie="+formData.get('categorie'),
    "choix="+formData.get('choix')
);

})

</script>

1 réponse


Hello, je pense que le problème est ici :

xhr.send("place="+formData.get('place'),
"catégorie="+formData.get('categorie'),
"choix="+formData.get('choix')

Ton xhr.send() ne peut prendre qu'un seul paramètre et il te faut donc tout concaténer. Tu peux t'inspirer de ce fil :
https://www.developpez.net/forums/d1836331/javascript/ajax/passer-plusieurs-variables-xhr-send-methode-post/

En espérant que ça résolve le problème !