Script Ajax Show avec select

Script Ajax Show avec select - HTML/CSS - Programmation

Marsh Posté le 26-05-2008 à 13:52:14    

Je sais pas si je post au bon endroit mais bon ...
Voici le script en question qui me pose problème : (en rouge ce que j'ai rajouté pour le POST)

Code :
  1. <script language="javascript">
  2. function request(url,cadre)
  3. {
  4. var XHR = null;
  5. var l1 = f.elements["liste_associations"];
  6. var index = l1.selectedIndex;
  8. if(window.XMLHttpRequest) // Firefox
  9.  XHR = new XMLHttpRequest();
  10. else if(window.ActiveXObject) // Internet Explorer
  11.  XHR = new ActiveXObject("Microsoft.XMLHTTP" );
  12. else
  13. { // XMLHttpRequest non supporté par le navigateur
  14.  alert("Votre navigateur ne supporte pas les objets XMLHttpRequest !" );
  15.  return;
  16. }
  17. // envoie de la requête, methode POST et de l'url
  18. XHR.open("POST",url, true);
  20. // on guette les changements d'état de l'objet
  21. XHR.onreadystatechange = function attente()
  22. {
  23.  // l'état est à 4, requête reçu !
  24.  if(XHR.readyState == 4)
  25.  {
  26.   // ecriture de la réponse
  27.   document.getElementById(cadre).innerHTML = XHR.responseText;
  28.  }
  29. }
  30. XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded" );
  31. var data = "valeur=" + l1.options[index].value;
  32. XHR.send(data); // le travail est terminé
  33. return;
  34. }
  35. </script>


 
Ici c'est mon select par lequel j'appel grâce à onchange mon script, il marchait très bien avec mon script en méthode GET seulement il m'est nécessaire de passer en méthode POST pour récupérer la valeur de mon select.

Code :
  1. <form name="selection_assoc" id="selection_assoc">
  2. <p>
  3.  <select name="liste_associations" size="1" onchange="request('form_sport.php?assoc=". $_POST['valeur'] ."", form_sport);return(false)">
  4.   <option value="">Type d'association</option>
  5.   <option value="assoc_sportive">Association sportive</option>
  6.   <option value="assoc_x">Association x</option>
  7.   <option value="assoc_y">Association y</option>
  8.   <option value="assoc_z">Association z</option>
  9.  </select>
  10. </p>
  11. </form>


 

Code :
  1. <div name="form_sport" id="form_sport">
  2. // J'affiche ici (après traitement à la page form_sport.php) le résultat dans ma div...
  3. </div>


 
Les trois morceaux de code sont contenu dans la page formulaire.php et le traitement suivant est dans la page form_sport.php :
 

Code :
  1. <?php
  2. $assoc = $_GET['assoc'];
  3. if($assoc == "0" )
  4. {
  5. exit;
  6. }
  7. if($assoc == "assoc_sportive" )
  8. {
  9. echo "<fieldset>";
  10. echo "<legend>Informations particuli&egrave;res :</legend>";
  11. echo "<table>";
  12. echo "<tr>";
  13. echo "<td>Sport loisir <input type=\"radio\" name=\"sport\" value=\"loisir\" id=\"loisir\"></td>";
  14. echo "<td>Sport comp&eacute;titif <input type=\"radio\" name=\"sport\" value=\"competitif\"id=\"competitif\"></td>";
  15. echo "</tr>";
  16. echo "<tr>";
  17. echo "<td><label for=\"ddjs\">Agr&eacute;ment DDJS :</label></td>";
  18. echo "<td><input type=\"text\" name=\"ddjs\"id=\"ddjs\" maxlength=10></td>";
  19. echo "</tr>";
  20. echo "</table>";
  21. echo "</fieldset>";
  22. }
  23. if($assoc == "assoc_x" )
  24. {
  25. echo "toto";
  26. }
  27. if($assoc == "assoc_y" )
  28. {
  29. }
  30. if($assoc == "assoc_z" )
  31. {
  32. }
  33. ?>


 
Merci à toute aide !


Message édité par wifsimster le 29-05-2008 à 10:10:42

---------------
-- Turns your mind towards BeTa --
Reply

Marsh Posté le 26-05-2008 à 13:52:14   

Reply

Marsh Posté le 27-05-2008 à 16:00:32    

Reply

Marsh Posté le 27-05-2008 à 16:04:56    

request('form_sport.php?assoc=". $_POST['valeur'] ."", form_sport);return(false)
 
tu mélange du javascript et du php ?  
ne devrai tu pas plutot avoir nu truc du genre  
 
request('form_sport.php?assoc='+this.option[this.selectedIndex].value, form_sport);


---------------

Reply

Marsh Posté le 27-05-2008 à 21:38:03    

Pas faux >_< mais la n'est pas mon problème :s
this.option à la valeur null


Message édité par wifsimster le 28-05-2008 à 17:14:54

---------------
-- Turns your mind towards BeTa --
Reply

Marsh Posté le 28-05-2008 à 17:17:11    

Pti' Up !


---------------
-- Turns your mind towards BeTa --
Reply

Marsh Posté le 28-05-2008 à 17:30:56    

je suis sur qu'en cherchant un peu tu pourrai trouver l'erreur dans mon code tapé à l'arrache  
 
c'est juste une erreur de typo


---------------

Reply

Marsh Posté le 29-05-2008 à 09:18:37    

le "s" à option unsure  :sarcastic:


Message édité par wifsimster le 29-05-2008 à 09:19:03

---------------
-- Turns your mind towards BeTa --
Reply

Marsh Posté le 29-05-2008 à 09:51:54    

et ben voila :d
faut aussi chercher un peu par soi meme ( et puis google t'aurai donné la solution direct )


Message édité par flo850 le 29-05-2008 à 09:52:21

---------------

Reply

Marsh Posté le 29-05-2008 à 09:59:16    

C'est google xD
D'ailleurs je viens de rectifier une autre erreur mais je n'ai toujours aucun résultat -.-"
 

Code :
  1. var l1 = document.forms["selection_assoc"].elements["liste_associations"];


 
J'ai fais des alerts un peu partout sur mon script sans rien passer en paramètre et tout est bon !
Mais lorsque j'essaye en passant mon url et mon cadre, rien =/
 
En fait il me faudrait une explication sur ce que renvoie le data.
 

Code :
  1. var data = "assoc=" + l1.options[index].value;
  2. XHR.send(data); // le travail est terminé


 
Je sais que la variable contient "assoc=mavaleur" mais je ne vois pas l'allure qu'elle possède sur ma page form_sport.php lors du post ?  :??:


Message édité par wifsimster le 29-05-2008 à 10:14:10

---------------
-- Turns your mind towards BeTa --
Reply

Marsh Posté le 29-05-2008 à 10:35:49    

Bon je commence à me rapprocher je pense, maintenant j'arrive à rentrer la dedans :

 
Code :
  1. // l'état est à 4, requête reçu !
  2. if(XHR.readyState == 4)
  3. {
  4. // ecriture de la réponse
  5. document.getElementById(cadre).innerHTML = XHR.responseText;
  6. }
 

Seulement il me dit que : 'document.getElementById(...)' à la valeur Null...


Message édité par wifsimster le 29-05-2008 à 10:38:15

---------------
-- Turns your mind towards BeTa --
Reply

Marsh Posté le 29-05-2008 à 10:35:49   

Reply

Marsh Posté le 29-05-2008 à 11:02:22    

utilsie 'cadre' au lieu de cadre  
 
la tu parle de valeur  de la variable cadre, pas forcement définie


---------------

Reply

Marsh Posté le 29-05-2008 à 11:40:47    

Ca ne change rien =/


---------------
-- Turns your mind towards BeTa --
Reply

Marsh Posté le 29-05-2008 à 11:41:22    

et il existe le div 'cadre' ?


---------------

Reply

Marsh Posté le 29-05-2008 à 14:05:15    

Le div 'cadre' est mon div 'modif_sport' donc oui il existe :s


---------------
-- Turns your mind towards BeTa --
Reply

Marsh Posté le 29-05-2008 à 14:06:51    

document.getElementById('modif_sport') te donne quoi ?


---------------

Reply

Marsh Posté le 29-05-2008 à 14:17:19    

Mon problème est exactement le même avec 'modif_sport'.
Et si je l'affiche avec un alert il me renvoi également 'null'
 
Voilà un mise à jour du script parce que ça commence à être le fouilli là x)
 

Code :
  1. function request(url,cadre)
  2. {
  3. var XHR = null;
  4. var l1 = document.forms["selection_assoc"].elements["liste_associations"];
  5. var index = l1.selectedIndex;
  7. if(window.XMLHttpRequest) // Firefox
  8.  XHR = new XMLHttpRequest();
  9. else if(window.ActiveXObject) // Internet Explorer
  10.  XHR = new ActiveXObject("Microsoft.XMLHTTP" );
  11. else
  12. {
  13.  // XMLHttpRequest non supporté par le navigateur
  14.  alert("Votre navigateur ne supporte pas les objets XMLHttpRequest !" );
  15.  return;
  16. }
  18. // envoie de la requête, methode POST et de l'url
  19. XHR.open("POST",url, true);
  21. // on guette les changements d'état de l'objet
  22. XHR.onreadystatechange = function attente()
  23. {
  24.  // l'état est à 4, requête reçu !
  25.  if(XHR.readyState == 4)
  26.  {
  27.   // ecriture de la réponse
  28.   document.getElementById('modif_sport').innerHTML = XHR.responseText;
  29.  }
  30. }
  31. XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded" );
  32. var data = "assoc=" + l1.options[index].value;
  33. XHR.send(data);  // le travail est terminé
  34. return;
  35. }


 
Mon select :

Code :
  1. <form name="selection_assoc" id="selection_assoc">
  2.   <p>
  3.    <select name="liste_associations" size="1" onchange="request(form_sport.php, form_sport);">
  4.     <option value="">Type d'association</option>
  5.     <option value="assoc_sportive">Association sportive</option>
  6.     <option value="assoc_x">Association x</option>
  7.     <option value="assoc_y">Association y</option>
  8.     <option value="assoc_z">Association z</option>
  9.    </select>
  10.   </p>
  11.  </form>


Message édité par wifsimster le 29-05-2008 à 14:20:34

---------------
-- Turns your mind towards BeTa --
Reply

Marsh Posté le 30-05-2008 à 14:38:21    

Uhm ....une idée .


---------------
-- Turns your mind towards BeTa --
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed