11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Reqête AJAx pour envoyer la valeur d'un textarea

Bonjour,

Je pense ne plus voir mon erreur tellement cela fait longtemps que je suis dessus. Je vais tenter de vous expliquer mon soucis. Voilà, cela me paraissait simple au départ : envoyer la valeur d'un textarea en ajax (vers une page php qui traite la chaîne de caractères via une regex) puis retourner le résultat dans un div. Et bien voilà, je récupère la valeur du textarea....ça c'est bon, mais comme l'impression que ma page php ne la reçoit pas....mystère.
Voici mon code :
<label for="texte">Votre message :</label><br /><br />
    <textarea id="texte" name="text" ></textarea><br /><br />
    <input type="button" value="Envoyer" id="btnSub" />
    <div id="result"></div>



let text = document.getElementById('text'),
    result = document.getElementById('result'),
    btnSub = document.getElementById('btnSub');

  btnSub.addEventListener('click', () => {
    let xhr = new XMLHttpRequest();
    let val = 'x=' + encodeURIComponent(text.value);

    xhr.onreadystatechange = function () {
      if (xhr.status === 200 && xhr.readyState === 4) {
        result.innerHTML = xhr.responseText;
      } else {
        result.innerHTML = 'Erreur : ' + xhr.status + ' ' + xhr.statusText;
      }

      xhr.open('POST', 'page.php', true);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.send(val);


<?php
  if (isset($_POST['x']) && !empty($_POST['x'])) {
[...]
    echo '<p>' . $_POST['x'] . '</p><br /><hr />';
  } else {
    echo 'Problème !';
  }
  ?>
En mode "post" les données doivent être envoyées dans un objet FormData.
Essaie (pas testé)

let text = document.getElementById('text'),
result = document.getElementById('result'),
btnSub = document.getElementById('btnSub');

btnSub.addEventListener('click', () => {
let xhr = new XMLHttpRequest();
// let val = 'x=' + encodeURIComponent(text.value);
let formData = new FormData();
formData.append("x", text.value);
xhr.onreadystatechange = function () {
	if (xhr.status === 200 && xhr.readyState === 4) {
	result.innerHTML = xhr.responseText;
	} else {
	result.innerHTML = 'Erreur : ' + xhr.status + ' ' + xhr.statusText;
}

xhr.open('POST', 'page.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// xhr.send(val);
xhr.send(FormData);
PapyJP a écrit :
En mode "post" les données doivent être envoyées dans un objet FormData.
Essaie (pas testé)


Merci pour ta réponse PapyJP, malheureusement même avec l'objet FormData rien ne se passe... encore plus mystérieux ...
Bonsoir,
Y a un truc qui va pas.
L'id du textarea c'est "texte" avec un e et le getElementById se fait sur "text"
bonsoir Dev-Web-06,

Désolé, c'est une faute de frappe, mon getElementById est bien "texte"...et cela ne fonctionne pas...
Il me semble qu'il manque une accolade

xhr.onreadystatechange = function () {
if (xhr.status === 200 && xhr.readyState === 4) {
result.innerHTML = xhr.responseText;
} else {
result.innerHTML = 'Erreur : ' + xhr.status + ' ' + xhr.statusText;
}
} // ICI Il faut refermer le bloc sinon il ne peut pas envoyer la requête sur l'évenement onreadystatechange
Dev-Web-06 a écrit :
Il me semble qu'il manque une accolade


J'ai bien regardé une fois de plus, dis moi si tu vois quelque chose, mais je n'ai pas l'impression qu'il manque une accolade (c'est fort possible que je ne vois plus rien Smiley cligne )

 let text = document.getElementById('texte'),
    result = document.getElementById('result'),
    btnSub = document.getElementById('btnSub');

  btnSub.addEventListener('click', () => {
    let xhr = new XMLHttpRequest();
    let val = 'x=' + encodeURIComponent(text.value);

    xhr.onreadystatechange = function () {
      if (xhr.status === 200 && xhr.readyState === 4) {
        result.innerHTML = xhr.responseText;
      } else {
        result.innerHTML = 'Erreur : ' + xhr.status + ' ' + xhr.statusText;
      }

      xhr.open('POST', 'page.php', true);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.send(val);
    }
  });

Modifié par Shupps (11 Jun 2020 - 22:50)
Oui il manque une accolade. Je t'ai montré où.

Là tu attends la réponse à la requête mais tu ne l'envoies pas.

Tu dois mettre l'accolade pour refermer la fonction anonyme du onreadystatechange avant le xhr.open.

Ou alors remonte l'accolade qui est après le xhr.send
Modifié par Dev-Web-06 (12 Jun 2020 - 10:03)
Merci encore Dev-Web-06, désolé pour ma réponse tardive. Effectivement l'accolade était mal placée !
Sujet clos
Aller à