[Javascript] Modifier du texte en cliquant une checkbox

Modifier du texte en cliquant une checkbox [Javascript] - HTML/CSS - Programmation

Marsh Posté le 24-05-2005 à 10:36:18    

Bonjour
 
Voila, j'ai un formulaire tout bete dont l'affichage des labels (intitulé du champs) pourrait changer en fonction du choix que l'on selectionnerait avant de remplir le chamsp (changement direct en temps réel)
 
 
Radio choix 1 (si on selectionne ca, lafficahge plus bas sera l'intitulé 1)
Radio choix 2 (si on selectionne ca, lafficahge plus bas sera l'intitulé 2)
 
Intitulé 1 (ou intitulé 2) :  input box  
 
Suis je assez clair et surtout est ce possible?
 
Je vous remercie beaucoup (désolé google n'a pas été tres éloquent)
 :bounce:

Reply

Marsh Posté le 24-05-2005 à 10:36:18   

Reply

Marsh Posté le 24-05-2005 à 10:39:13    

t'es pas tres clair mais ça me semble binen possible ne javascript... (type onClick ou qqch dans ce gout là)

Reply

Marsh Posté le 24-05-2005 à 10:43:16    

oui c possible :
<input type = "radio" name="choix1" value="truc" onClick="changerIntitule()">
 
et ta fonction changerIntitule teste quel radio est sélectionné, et fait un  
moninputtext.Value = "mavaleurquejeveuxymettredansmoninput";

Reply

Marsh Posté le 24-05-2005 à 10:44:40    

regarde du coté de l'evenement onclick et en js tu modifies le libellé en faisant attention aux differentes restrictions habituelles.

Reply

Marsh Posté le 24-05-2005 à 10:45:36    

voila mon code :
 

Code :
  1. <h6><input type="radio" name="specialist_hopital" value="1" />Medecin libéral   
  2.      <input type="radio" name="specialist_hopital" value="2" />Service Hospitalier</h6><br />         //selon ce qu'on choisi la, laffichage des intitulé (en dessous) doit changer
  3. Nom medecin //ou nom service hospitalier  
  4. <input type="text" name="nom_medecin_spe_ou_service_hosp" /><br /><br />
  5. tel mdedecin //ou tel hospital          
  6. <input type="text" name="telephone_medecin_spe_ou_service_hosp" /><br /><br />
  7. ville mdecin //ou nom hospital    
  8. <input type="text" name="ville_medecin_spe_ou_service_hosp" /><br /><br />


 
Or les intitulé c'est du texte brut.. il faut sans doute le mettre dans une variable pour pouvoir le changer.. et apres l'afficher en javascript (document.write?), mais je vois pas trop comment faire :(


Message édité par bixibu le 24-05-2005 à 10:46:03
Reply

Marsh Posté le 24-05-2005 à 10:49:08    

Merci de vos reponses ;)
 
Denz, ta solution voudrait dire que mon intitulé se trouverait dans une case text (input text) ? mais ca je ne le veut pas, je veut du text tout simple, pas contenu dans une textbox (ou alors j'ai mal compris)

Reply

Marsh Posté le 24-05-2005 à 11:07:40    

soit tu passes par du innerHTML avec un parsing de fou à faire sur ton text, soit tu encapsules ton texte dans un tag label auquel tu mets un id bien choisi et tu y accedes ainsi

Reply

Marsh Posté le 24-05-2005 à 11:13:58    

oki merci beaucoup je vais faire une balise label alors, je pense que c'est le plus simple..
 
Je vous dit si ca marche dans quelques minutes ;)
 
merci

Reply

Marsh Posté le 24-05-2005 à 11:29:35    

Bon j'ai un autre probleme..
 
Vu que j'ai 2 radios qui ont le meme attribut "name" (normal pour avoir un choix uniques), comment tester le radio qui a été coché? comment differencier les 2 boutons radio dans le code javascript? (cf le code quelques posts au dessus)
 
merci encore

Reply

Marsh Posté le 24-05-2005 à 11:41:46    

Tu vérifies la valeur qui est dans l'élément portant le nom de tes radios.


---------------
http://www.alsacreations.com , http://www.openweb.eu.org. Mon CV : http://cv.roane-irkana.net/. Exemple à ne surtout pas suivre : www.worldinternet.be
Reply

Marsh Posté le 24-05-2005 à 11:41:46   

Reply

Marsh Posté le 24-05-2005 à 13:08:52    

yop
 
Bon j'ai fait ma function (le debut juste pour tester) ca donne ca :
 

Code :
  1. function change_aff() {
  2.    if((document.getElementById('radio_nom').value = 1) && (document.getElementById('radio_nom').checked)) {
  3.     document.getElementById('nom').value = "blabla";
  4.     }
  5.   }


avec le formulaire :

Code :
  1. <label id="nom">Type du medecin spécialiste</label>


et un peu plus loin :

Code :
  1. <input type="radio" name="specialist_hopital" id="radio_nom" value="1" onclick="change_aff()"/>Medecin libéral
  2.    <input type="radio" name="specialist_hopital" value="2" />Service Hospitalier


 
et ca ne marche, rien ne se passe quand je clique sur les radios.. quelque chose ma echappée?

Reply

Marsh Posté le 24-05-2005 à 13:11:12    

essaye de remplacer 'onclick' par onClick déjà (on c jamais) et sinon essaye d'autres évènements, comme onChange ou onSelect.

Reply

Marsh Posté le 24-05-2005 à 13:31:20    

rien ne marche :(

Reply

Marsh Posté le 24-05-2005 à 14:54:30    


<script type="text/javascript">
function Change(object){
 document.getElementsByName("ChampARemplir" )[0].value =  object.value;
}
 
</script>
 
 
 
 
<form>
<input type="text" name="ChampARemplir"><br>
 <input type="radio" id="Medecin1" name="Medecin" onchange="Change(this)" onclick="Change(this)" value="Medecin number 1"><label for="Medecin1">Medecin number 1</label><br>
 <input type="radio" id="Medecin2" name="Medecin" onchange="Change(this)" onclick="Change(this)" value="Le médecin de la famille"><label for="Medecin2">Le médecin de la famille</label><br>
 <input type="radio" id="Medecin3" name="Medecin" onchange="Change(this)" onclick="Change(this)" value="Le médecin du ministère"><label for="Medecin3">Le médecin du ministère</label>
<br>
</form>

Reply

Marsh Posté le 24-05-2005 à 15:16:23    

Salut ;)
 
Merci pour ce code, que je connais a peu pres
 
Le probleme, par contre c'est que pour le text changeant, je ne veut pas passer par une textbox(un input type="text" ) mais j'aimerais carrement changer l'affichage de text direct (du text noir sur blanc sans boite de texte autour)
 
Est ce possible? j'y suis dessus depuis ce matin, je m'arrache les cheveux

Reply

Marsh Posté le 24-05-2005 à 15:19:04    

un peu comme dans un tag label ?  

Reply

Marsh Posté le 24-05-2005 à 15:20:08    

gatsusat a écrit :

<script type="text/javascript">
 
 
<form>
<input type="text" name="ChampARemplir"><br>
 <input type="radio" id="Medecin1" name="Medecin" onchange="Change(this)" onclick="Change(this)" value="Medecin number 1"><label for="Medecin1">Medecin number 1</label><br>
 <input type="radio" id="Medecin2" name="Medecin" onchange="Change(this)" onclick="Change(this)" value="Le médecin de la famille"><label for="Medecin2">Le médecin de la famille</label><br>
 <input type="radio" id="Medecin3" name="Medecin" onchange="Change(this)" onclick="Change(this)" value="Le médecin du ministère"><label for="Medecin3">Le médecin du ministère</label>
<br>
</form>


 
un peu comme il a indiqué dans son exemple et comme je t'ai dit au debut de ton topic ?

Reply

Marsh Posté le 24-05-2005 à 16:06:26    

voila ce que je veut :
 
http://bixibo.free.fr/test/test.php
 
Et quand je clique sur les radios, ca changerais le libellé des champs (sur la gauche la):
 
"Nom du médecin spécialiste" vers "nom du service"
"telephone" vers "telephone service"
"Ville" vers "Nom de l'hopital"
 
ps:vous pouvez voir tout le code en faisant clic droit, afficher la source sur ma page.. (jy ai viré mes fonction javascript qui ne marchent pas)
 
Merci

Reply

Marsh Posté le 24-05-2005 à 16:10:44    

ps:heu sur ma pge la, ya un probleme, les champs de saisie devrait etre en face des intitulés :(
 
edit:like that :
http://bixibo.free.fr/test/pfiou.jpg


Message édité par bixibu le 24-05-2005 à 16:15:08
Reply

Marsh Posté le 24-05-2005 à 16:14:12    

et qu'est ce qui t'empeches de mettre un label

Code :
  1. <label id="blabla">Nom du médecin spécialiste</label>
  2. <label id="blibli">telephone</label>


un id sur chacun des radio et sur ton onclick /onselect / onBLALALALAL
faire un truc genre  

Code :
  1. var cont = document.getElementById('blabla').innerHTML;
  2. if ( cont == "un truc" ) {
  3. document.getElementById('blabla').innerHTML = "autre chose" ;
  4. }

 
ou un machin qui s'en approche


Message édité par fred_p le 24-05-2005 à 16:15:20
Reply

Marsh Posté le 24-05-2005 à 16:33:11    

j'en ai marre !
 
il me dit qu'il ya un "objet attendu"!
 
qu'est ce qui ne vas pas dans mon code? :
 

Code :
  1. <SCRIPT LANGUAGE="text/javascript">
  2.  function change_aff(){
  3.   var cont = document.getElementById('nom').innerHTML;
  4.   if ( cont == "Type du medecin spécialiste" ) {
  5.   document.getElementById('nom').innerHTML = "blabla" ;
  6.   }
  7.  }
  8. </script>
  9. </head>
  10. <body>
  11.  <div class="conteneurF">
  12.  <div class="bloc4">
  13.      
  14.   <h3>Renseignements complémentaires</h3>
  15.   <label id="nom">Type du medecin spécialiste</label><br /><br />
  16.   Nom du médecin spécialiste<br /><br />
  17.   Ville<br /><br />
  18.   Téléphone
  19.  </div>
  20.     <div class="bloc5">
  21.    <h6><input type="radio" name="specialist_hopital" id="radio_nom" value="1" onchange="change_aff()" onClick="change_aff()"/>Medecin libéral
  22.    <input type="radio" name="specialist_hopital" value="2" />Service Hospitalier</h6><br />
  23.    <input type="text" name="nom_medecin_spe_ou_service_hosp" /><br /><br />
  24.    <input type="text" name="telephone_medecin_spe_ou_service_hosp" /><br /><br />
  25.    <input type="text" name="ville_medecin_spe_ou_service_hosp" /><br /><br />
  26.  </div>  <!-- fin div bloc3 -->
  27.  </div>


Message édité par bixibu le 24-05-2005 à 16:34:45
Reply

Marsh Posté le 24-05-2005 à 17:02:14    

ben parce que ton code est tout pourri et que tu ne prend même pas le temps de comprendre.
 
faut dire on explike pas non plus
J'ai trop la flème d'expliker, voila le corrigé
 


<html>
<head>
 <title></title>
</head>
 
<SCRIPT type="text/javascript">  
   function change_aff(object){  
  document.getElementById("nomMedecin" ).innerHTML =  object.value;  
 }  
 </script>  
    </head>  
    <body>  
        <div class="conteneurF">  
        <div class="bloc4">  
           
            <h3>Renseignements complémentaires</h3>  
            <label id="nomMedecin">Type du medecin spécialiste</label><br /><br />  
            Nom du médecin spécialiste<br /><br />  
            Ville<br /><br />  
            Téléphone  
        </div>  
         
        <div class="bloc5">  
                <h6><input type="radio" name="specialist_hopital" id="HospType1" value="Medecin libéral" onchange="change_aff(this)" onClick="change_aff(this)" />
       <label for="HospType1">Medecin libéral</label>
                <input type="radio" name="specialist_hopital" id="HospType2" value="Service Hospitalier" onchange="change_aff(this)" onClick="change_aff(this)" />
       <label for="HospType2">Service Hospitalier</label></h6><br />  
                 
                <input type="text" name="nom_medecin_spe_ou_service_hosp" /><br /><br />  
                <input type="text" name="telephone_medecin_spe_ou_service_hosp" /><br /><br />  
                <input type="text" name="ville_medecin_spe_ou_service_hosp" /><br /><br />  
                 
                 
        </div>  <!-- fin div bloc3 -->  
        </div>
 
</body>
</html>

Reply

Marsh Posté le 25-05-2005 à 09:14:18    

Okay ca marche nikel.. merci beaucoup!
 
Effectivement, j'ai completement zapé l'histoire du <label for="">
 
Merci beaucoup a tous

Reply

Marsh Posté le 25-05-2005 à 12:31:59    

ben en clair :  
 
<input type="checkbox" id="toto">
<label for="toto">clic sur toto</label>
 
Quand tu cliques sur le texte ca coche la checkbox.
en clair le label est associé au checkbox. nul javascript ou magie barbare ici.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

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