script JS qui affiche une zone de texte en fonction d'un select

script JS qui affiche une zone de texte en fonction d'un select - HTML/CSS - Programmation

Marsh Posté le 21-02-2006 à 15:31:10    

bijour tout le monde,
 
voila j'ai un champ text qui est par defaut disabled, et en fonction des chois du select je voudrais le rendre actif..
 
j'ai fait ca:

Code :
  1. <select id="menu" name="menuPays" tabindex="5">
  2.       <option value="France" selected="selected">France</option>
  3.    <option value="Dom-Tom">Dom-Tom</option>
  4.    <option value="Belgique">Belgique</option>
  5.    <option value="Suisse">Suisse</option>
  6.    <option value="Autre" onclick="document.getElementById('Autre').disabled=false">Autre...</option>
  7.   </select>
  8.  <input type="text" disabled="disabled" name="autrePays" id="Autre" class="autrePays"  />


 
mais ca ne fonctionne pas...
quelqu'un aurait une petite idée???
 
merci d'avance


Message édité par bedomon le 21-02-2006 à 16:43:34
Reply

Marsh Posté le 21-02-2006 à 15:31:10   

Reply

Marsh Posté le 21-02-2006 à 15:40:14    

un peu de recherche ne te fera pas de mal, on nous a posé cette question 2 fois la semaine dernière
 
http://forum.hardware.fr/hardwaref [...] 4439-1.htm
http://forum.hardware.fr/hardwaref [...] 4892-1.htm

Reply

Marsh Posté le 21-02-2006 à 16:03:19    

merci gatsu,
 javais fai un recherche juste avec select et j'ai vu c'est deux post mais j'avai pas fais attention au contenu je croyai que celui de loothof parlais de popup qu ne fonctionnais pas, j'ai bien relu et ca marche,

Reply

Marsh Posté le 21-02-2006 à 16:41:51    

en fait ca ne marche pas tout a fais comme je voudrais,  
quand je selectionne une des mes options de mon select cela m'affcihe bine ma zone de texte, mais quand je reviens sur un autre choix du select la zone de texte reste visible, ja'i donc essayer de faire ca avec un petit script JS mais ca ne fonctionne pas tres bien a vrai dire:

Code :
  1. <select id="menu" name="menuPays" tabindex="5">
  2.       <option value="France" selected="selected">France</option>
  3.    <option value="Dom-Tom">Dom-Tom</option>
  4.    <option value="Belgique">Belgique</option>
  5.    <option value="Suisse">Suisse</option>
  6.    <option value="Autre" >Autre...</option>
  7.   </select>
  8.   <script language="javascript" type="text/javascript">
  9.    if document.getElementById('menu').selectedIndex='4' {
  10.     document.getElementById('Autre').style.visibility='visible';
  11.    else
  12.     document.getElementById('Autre').style.visibility='hidden';}
  13.   </script>
  14.  <input type="text" name="autrePays" id="Autre" class="autrePays" tabindex="6"/>


 
quelqu'un aurait il une idée ???
 
meci d'avance

Reply

Marsh Posté le 22-02-2006 à 11:55:38    

j'ai encore fai des modifications pour afficher mon petit champ texte mais elle n'as pas l'air tres efficace
 

Code :
  1. <select id="menu" name="menuPays" tabindex="5" onchange="document.getElementById('AutrePays').style.visibility = (this.options[this.selectedIndex].value=='autre'? 'visible');">
  2.       <option value="france" selected="selected">France</option>
  3.    <option value="dom-tom">Dom-Tom</option>
  4.    <option value="belgique">Belgique</option>
  5.    <option value="suisse">Suisse</option>
  6.    <option value="autre" >Autre...</option>
  7.   </select>


 
je me sers bien du onchange mais c'est ce qu'il y a derrier qui ne marche pô... :??:

Reply

Marsh Posté le 22-02-2006 à 12:12:36    

ben C que tu ne sais pas encore coder lol

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <script type="text/javascript">
  7. function check(selectedobject) {
  8.  var objetId = selectedobject.value;
  10.  var choice = document.getElementById("choice" );
  11.  var leschoix = choice.getElementsByTagName("DIV" );
  13.  for (var i=0; i<leschoix.length;i++) {
  14.   if (leschoix[i].className.indexOf("choice" )!=-1) {
  15.    leschoix[i].style.display= (leschoix[i].id.toLowerCase()==objetId.toLowerCase()) ? "block" : "none";
  16.   }
  17.  }
  18. }
  20. </script>
  21. </head>
  23. <body>
  24. <form>
  25. <select onchange="check(this)">
  26. <option>Choisissez</option>
  27. <option value="bloc1">bloc1</option>
  28. <option value="bloc2">bloc2</option>
  29. <option value="bloc3">bloc3</option>
  30. </select>
  31. <fieldset id="choice">
  32. <div class="choice" id="bloc1" style="color:blue">
  33. Sourycette<div>un div encore dedans pour la demo</div>
  34. </div>
  35. <div class="choice" id="bloc2" style="color:red">
  36. Est une chaudasse<div>un div encore</div><span>un span aussi pour la demo</span>
  37. </div>
  38. <div class="choice" id="bloc3" style="color:yellow">
  39. Sourycette la chaudasse du ass
  40. </div>
  41. </fieldset>
  42. </form>
  44. </body>
  45. </html>


 
j'aurai pu faire encore plus simple, genre eviter un class="choice" et donc du JS en moins, mais c'est pour permettre un maximum de possibilités
 
 
HEU TOUCHE PAS à CE CODE C'EST PAS CE QUE TU AS DEMANDE, ATTEND DEUX SECONDES :o


Message édité par gatsu35 le 22-02-2006 à 12:14:00
Reply

Marsh Posté le 22-02-2006 à 12:18:27    

voila :  

Code :
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <head>
  5. <title></title>
  6. <script type="text/javascript">
  7. function check(selectedobject) {
  8.  var payschoisis = selectedobject.value;
  10.  var inputpays = document.getElementById("paysautre" );
  11.  inputpays.style.visibility = (payschoisis == "AutrePays" ) ? "visible" : "hidden";
  13. }
  15. </script>
  16. </head>
  18. <body>
  19. <form>
  20. <select onchange="check(this)">
  21. <option>Choisissez</option>
  22. <option value="france">France</option>
  23. <option value="Russie">Russie</option>
  24. <option value="Belgique">Belgique</option>
  25. <option value="AutrePays">Autre Pays</option>
  26. </select>
  27. <input type="text" name="paysautre" id="paysautre" style="visibility:hidden">
  28. </form>
  30. </body>
  31. </html>

Reply

Marsh Posté le 22-02-2006 à 12:19:53    

en une seule ligne :o
 

Code :
  1. <form>
  2. <select onchange="document.getElementById('paysautre').style.visibility = (this.value == 'AutrePays') ? 'visible' : 'hidden';
  3. ">
  4. <option>Choisissez</option>
  5. <option value="france">France</option>
  6. <option value="Russie">Russie</option>
  7. <option value="Belgique">Belgique</option>
  8. <option value="AutrePays">Autre Pays</option>
  9. </select>
  10. <input type="text" name="paysautre" id="paysautre" style="visibility:hidden">
  11. </form>

Reply

Marsh Posté le 22-02-2006 à 12:24:10    

Et vu comment tu utilise l'operateur conditionnel ? tu auras du mal lol
 
c'est :  
 
valeurretournee = (condition1==condition2) ? valeursivrai : valeursifaux;

Reply

Sujets relatifs:

Leave a Replay

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