IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Faire afficher et disparaitre du texte en cochant un checkbox


Sujet :

JavaScript

  1. #1
    Membre confirmé Avatar de Rahim-US
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2009
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juillet 2009
    Messages : 151
    Par défaut Faire afficher et disparaitre du texte en cochant un checkbox
    Salut à tous;

    Bon je travaille avec XHTML 1.1 et j'ai un petit problème dans ce code si vous pouvez m'aide.
    Lorsque je coche la checkbox "Texte #01" un texte doit s'affiché dans le textarea mais lorsque je décoche cette checkbox il s'affiche encore une autre fois et ça ce répète à chaque fois.
    Ma question est comment faire pour supprimer le texte quand je décoche la checkbox.

    Voilà mon code complet:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <div id="texte">
    	<script type="text/javascript">
    		function generate(texte)
    		{ var txt="";
    		if (texte==1) {texte="\n\"Texte #01";}
    		document.getElementById('box').value=document.getElementById('box').value+texte;
    		}
    	</script>
    	<form method="POST" name="list" id="list" />
    	<input name="1" id="1" onclick="generate(1)" type="checkbox" /> Texte #01<br><br>
    	<textarea name="box" cols="70" rows="25" id="box">Votre Sélection :
    	</textarea>
    	<input name="effacer" value="Effacer" type="reset" />
    </div>

  2. #2
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Bonjour,
    1-Evites d'utiliser la même valeur pour l'attribut name et id car cela pose des problèmes avec IE; c'est aussi déconseillé de n'utiliser que des chiffres ou débuter ses valeurs par des chiffres.
    2-La balise form n'est pas auto-fermante.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    if(document.getElementById('idCheckBox').checked)
    {
      // ton traitement ici
    }
    else
    {
      document.getElementById('idTextarea').innerHTML="";
    }

  3. #3
    Modérateur

    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    12 585
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 12 585
    Par défaut
    Et j'ajoute que le code que Rahim-US nous a montré là n'est pas du XHTML 1.1. C'est du bon vieil HTML 4 non-standard.

    Ce n'est pas bien grave, parce que l'intérêt du XHTML, 1.1 de surcroît, bon, hein, il reste à voir. Mais il vaut mieux éviter d'induire ses interlocuteurs en erreur en leur donnant de fausses informations. Les gens pourraient s'imaginer que tu as bien plus de contraintes à respecter que tu n'en as vraiment.
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  4. #4
    Membre confirmé Avatar de Rahim-US
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2009
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juillet 2009
    Messages : 151
    Par défaut
    Merci andry.aime pour ta réponse, mais j'arrive pas utiliser ton code si tu peux m'expliquer un peut plus S.V.P
    Merci d'avance.
    Citation Envoyé par andry.aime Voir le message
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    if(document.getElementById('idCheckBox').checked)
    {
      // ton traitement ici
    }
    else
    {
      document.getElementById('idTextarea').innerHTML="";
    }

    Pour thelvin, je travail avec Dreamweaver CS4 et c'est lui qui m'indique que c'est du XHTML, oui j'ai fais un petit erreur c'est du XHTML1.0 et non pas 1.1
    désolé pour l'erreur j'ai pas fais attention.

  5. #5
    Modérateur

    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    12 585
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 12 585
    Par défaut
    Citation Envoyé par Rahim-US Voir le message
    Pour thelvin, je travail avec Dreamweaver CS4 et c'est lui qui m'indique que c'est du XHTML, oui j'ai fais un petit erreur c'est du XHTML1.0 et non pas 1.1
    Dans ce cas c'est Dreamweaver qui t'induit en erreur (pour changer) et ce n'est pas bien grave. Je te conseille juste de ne pas dire que tu fais du (X)HTML machin-chose. Juste du HTML, ce sera très bien.

    Et je te confirme que ce n'est pas du XHTML, ni 1.0, ni 1.1, ni 5, ni rien.
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  6. #6
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Ce code efface le contenue d'un textarea dont son id est 'dTextarea' quand tu décoches un checkbox dont sont id est 'idCheckBox' .

  7. #7
    Membre confirmé Avatar de Rahim-US
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2009
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juillet 2009
    Messages : 151
    Par défaut
    Citation Envoyé par andry.aime Voir le message
    Ce code efface le contenue d'un textarea dont son id est 'dTextarea' quand tu décoches un checkbox dont sont id est 'idCheckBox' .
    Merci andry.aime mais je n’arrive pas à l'utiliser, si tu peux me l'ajouter dans le code.

    J’ai une autre question, pour le Textarea je veux créer un bouton pour copier son contenu dans le presse-papier, comment faire ça?
    Merci

  8. #8
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Bonjour,
    As-tu au moins essayé?
    Montres nous ce que tu as faits et on te corrige; nous ne sommes pas là pour faire tes devoirs .
    pour le Textarea je veux créer un bouton pour copier son contenu dans le presse-papier, comment faire ça?.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function copier()
    {var texte=document.selection.createRange();
    texte.execCommand("Copy");
    }
    Mais je crois que FireFox désactive cette fonction par défaut; à vérifier.

  9. #9
    Membre confirmé Avatar de Rahim-US
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2009
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juillet 2009
    Messages : 151
    Par défaut
    Bonjour,
    As-tu au moins essayé?
    Montres nous ce que tu as faits et on te corrige; nous ne sommes pas là pour faire tes devoirs .
    Oui j'ai essayer et voila ce que j'ai en ajoutant ton code :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
     
    <div id="texte">
    	<script type="text/javascript">
    	if(document.getElementById('checkbox1').checked)
      {
    		function generate(texte)
    		{ var txt="";
    		if (texte==1) {texte="\n\"Texte #01";}
    		document.getElementById('box').value=document.getElementById('box').value+texte;
    		}
    	}
      else
      {
        document.getElementById('box').innerHTML="";
      }
    	</script>
    	<form method="POST" name="list" id="list" />
    	<input name="1" id="checkbox1" onclick="generate(1)" type="checkbox" /> Texte #01<br><br>
    	<textarea name="box" cols="70" rows="25" id="box">Votre Sélection :
    	</textarea>
    	<input name="effacer" value="Effacer" type="reset" />
    </div>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function copier()
    {var texte=document.selection.createRange();
    texte.execCommand("Copy");
    }
    Merci pour le code mais y-a un petit problème; un message de sécurité vien d'etre afficher sous Internet Explorer, est-ce qu'on peut le viré?
    Mais je crois que FireFox désactive cette fonction par défaut; à vérifier.
    J'ai vérifier et ça marche pas sous FireFox, est ce qu'il y-a un moyen pour remplacer le code sous FireFox?

  10. #10
    Membre confirmé Avatar de Rahim-US
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2009
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juillet 2009
    Messages : 151
    Par défaut
    Je pense que cette ligne du code pose le problème, elle double le code générer dans textarea si on cochent ou on décochent la checkbox.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    document.getElementById('box').value=document.getElementById('box').value+texte;
    comment puis-je la remplacer par un autre code.

  11. #11
    Inactif  
    Homme Profil pro
    Inscrit en
    Septembre 2003
    Messages
    570
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Septembre 2003
    Messages : 570
    Par défaut
    avant de commencer, mettre la balise <script> dans la partie <head> de ta page.
    ps: pourquoi copier dans le presse papier quand on peut utiliser une variable "global"
    quand on t 'as proposé la fonction
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
    <head>
    ...
    <script type="text/javascript">
    var globalVar;// une variable globale
    function generate()
       if(document.getElementById('checkbox1').checked){
    	if (texte==1) {texte="\n\"Texte #01";
    	document.getElementById('box').value= globalVar;
       }
      else{
            globalVar=document.getElementById('box').value;
            document.getElementById('box').value="";
      }
    }
    </script>
    </head>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <input name="checkbox1" id="checkbox1" onclick="generate()" type="checkbox" />
    ici je copie l'ancienne valeur de la textarea avant de l'effacer et je récupère le texte quand on coche la case

  12. #12
    Membre confirmé Avatar de Rahim-US
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2009
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juillet 2009
    Messages : 151
    Par défaut
    Merci beaucoup, mais toujours un problème, la ça marche pas quand je coche la checkbox pas de texte dans le textarea

  13. #13
    Inactif  
    Homme Profil pro
    Inscrit en
    Septembre 2003
    Messages
    570
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Septembre 2003
    Messages : 570
    Par défaut
    mes sincères excuses, j'ai laissé une ligne de code en trop :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    <script type="text/javascript">
    var globalVar;// une variable globale
    function generate()
       if(document.getElementById('checkbox1').checked){
    	document.getElementById('box').value= globalVar;
       }
      else{
            globalVar=document.getElementById('box').value;
            document.getElementById('box').value="";
      }
    }
    </script>

  14. #14
    Membre confirmé Avatar de Rahim-US
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2009
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juillet 2009
    Messages : 151
    Par défaut
    Citation Envoyé par nsanabi Voir le message
    mes sincères excuses, j'ai laissé une ligne de code en trop :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
     
    <script type="text/javascript">
    var globalVar;// une variable globale
    function generate()
       if(document.getElementById('checkbox1').checked){
    	document.getElementById('box').value= globalVar;
       }
      else{
            globalVar=document.getElementById('box').value;
            document.getElementById('box').value="";
      }
    }
    </script>
    Je te remercie nsanabi infiniment pour test réponses, mais ça marche toujours pas, je sais pas ou est le problème .
    est-c" que ça a marcher avec toi ???

  15. #15
    Expert éminent

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Par défaut
    Bonjour,

    Juste en passant:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var globalVar;// une variable globale
    
    function generate()
    {
       if(document.getElementById('checkbox1').checked){
    	document.getElementById('box').value= globalVar;
       }
      else{
            globalVar=document.getElementById('box').value;
            document.getElementById('box').value="";
      }
    }

  16. #16
    Inactif  
    Homme Profil pro
    Inscrit en
    Septembre 2003
    Messages
    570
    Détails du profil
    Informations personnelles :
    Sexe : Homme

    Informations forums :
    Inscription : Septembre 2003
    Messages : 570
    Par défaut
    c vrai une accolade qui manque merci la vermine

  17. #17
    Membre confirmé Avatar de Rahim-US
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2009
    Messages
    151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Algérie

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Juillet 2009
    Messages : 151
    Par défaut
    Merci beaucoup pour l'aide.

Discussions similaires

  1. [FAQ] Les formulaires (partie 2) : Comment désactiver une zone de texte en cochant une checkbox ?
    Par Auteur dans le forum Contributions JavaScript / AJAX
    Réponses: 6
    Dernier message: 17/11/2013, 11h59
  2. Faire apparaitre et disparaitre un texte
    Par Aeltith dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 18/03/2012, 10h35
  3. faire apparaitre et disparaitre du texte
    Par leien dans le forum Général JavaScript
    Réponses: 9
    Dernier message: 11/07/2007, 10h07
  4. désactivation d'une zone de texte en cochant une checkBox
    Par mjihanne dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 25/05/2006, 16h33
  5. Faire afficher progressivement du texte
    Par simone.51 dans le forum Général JavaScript
    Réponses: 5
    Dernier message: 26/07/2005, 11h28

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo