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>