Fonction Js change couleur sur champ formulai

Fermé
RomantikA Messages postés 27 Date d'inscription lundi 26 mai 2008 Statut Membre Dernière intervention 30 avril 2012 - Modifié par RomantikA le 30/04/2012 à 18:58
RomantikA Messages postés 27 Date d'inscription lundi 26 mai 2008 Statut Membre Dernière intervention 30 avril 2012 - 30 avril 2012 à 18:59
Bonjour à tous,

Comme le titre du message l'indique un peut, je me casse la tête sur une fonction javacript qui change la couleur de mes champs de formulaire lorsque l'utilisateur clique sur un lient en particulier... style pour lui indiquer sur quel champ il se trouve...

comme vous pourrez donc le voir avec le code, lorsque l'user clique sur le premier champs, celui-ci s'affiche en rouge;lorsque l'user clique sur le champs n°2, le champs n°1 reviens en gris et le n°2 devient rouge. Lorsque l'user clique sur la zone du champs n°3 (les boutons radio), cette zone deviens rouge et le champs 2 redevient gris.

Jusque là tout va bien... mais lorsque l'user click sur un champ suivant, ou reclique sur un des champs précédent, la zone des boutons radio (le DIV id="champ3") devient gris.. alors que le problème est que je voudrais qu'il redevienne transparent.. Voila où est mon soucis.
Je sais que ce ne doit pas être compliqué, mais ça fait 2 jours que j'essaie des trucs dans tous les sens et que je cherche envin sur Google...

alors voici le code avec un formulaire simplifié pour l'exemple.:

<script type="text/javascript">  
          function Couleur (id)  
          {  
          this.couleur = 'RED';  
          this.id=id;  
          if (typeof this.highlighted=='undefined' || this.highlighted=='')  
          {  
          document.getElementById(this.id).style.background = this.couleur;  
          this.highlighted=this.id;  
          }  
          else  
          {  
          if (this.id!=this.highlighted)  
          {  
          document.getElementById(this.id).style.background = this.couleur;  
          document.getElementById(this.highlighted).style.background = '#949494';  
          this.highlighted = this.id;  
          }  
          }  
          }  
</script>  



<html>
          Nom: <input id="champs1" name="champ1" type="text" value="" onclick="Couleur(this.id)" style="border-width:1px; background-color:#EAE2E2; font-size:14px;"/> <br /> 

          Prénom: <input id="champs2" name="champ2" type="text" value="" onclick="Couleur(this.id)" style="border-width:1px; background-color:#EAE2E2; font-size:14px;"/><br /><br /> 


          vous souhaiter participer? 
 
          <div id="champ3" onclick="Couleur(this.id)" > 
          oui <input name="champ3" type="radio" value="Oui" />  
          non <input name="champ3" type="radio" value="Non"/> 
          </div>
</html


Le but en fait, serait que l'utilisateur puisse savoir sur quel champ il se trouve, selon qu'il se déplace avec la souris ou avec la touche tab...
pour cela j'ai une sorte de fonction comme ceci sur chaque champs:

<textarea <?php if(isset($class5)) echo 'class="'.$class5.'"';?> name="message_correspondant" id="message_correspondant" cols="55" rows="5" class="champQuestionnaire_message" 
  onclick="Couleur(this.id)" onBlur="this.style.background='#FFE683'" style="color:#FF3300; font-size:14px;" onkeyup="this.style.background='#FFFFFF'; this.value=this.value.charAt(0).toUpperCase()+this.value.substr(1).toLowerCase();"><?php 
        if (isset($_POST["message_correspondant"])) { 
        // le message a été saisi --> le réafficher 
        echo htmlspecialchars($_POST["message_correspondant"],ENT_QUOTES); 
        } 
        ?>
</textarea>



du bidouillage quoi (sans parler du php pour la vérification de saisie et le forçage majuscule) et je trouve ça laid mais bon.... :/

Donc si quelqu'un a une solution s'il vous plait, je vous en remercie par avance.

Cordialement,

A voir également:

1 réponse

RomantikA Messages postés 27 Date d'inscription lundi 26 mai 2008 Statut Membre Dernière intervention 30 avril 2012 1
30 avril 2012 à 18:59
Cela n'est peut être pas possible alors? :s
0