Faire apparaitre champ

Résolu/Fermé

jordxn Messages postés 356 Date d'inscription jeudi 15 avril 2010 Statut Membre Dernière intervention 26 avril 2015 - 18 avril 2013 à 21:11
Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 - 19 avril 2013 à 15:30

Bonjour,

J'ai réussi a faire apparaître un champ email si l'utilisateur a coché le bouton oui et s'il coche non, aucun champ apparaît.

Sauf que quand je clique oui le champ apparaît et qu'après je clique non , le champs a coté de oui ne disparaît pas...
2eme soucis: j'aimerais rajouter un bouton "ajouter un autre email qui fasse apparaître un nouveau input , merci bcp !

<label for="partager" id="partager_label">Partager la tache</label>
<input type="radio" name="tem" value="oui" id="ooui" onclick="met(this,'oui','non');" ><label for="ooui">Oui</label> <input type="text" style="display:none" id="oui" value="Email"><br />
<input type="radio" name="tem" value="non" id="nnon" onclick="met(this,'non','oui');" ><label for="nnon">Non</label> <br />

javascript :
function met(btn,champ1)
{
if (btn.checked)
{
document.getElementById(champ1).style.display="inline";
}
}

A voir également:

3 réponses

Réponse 1 / 3

Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
19 avril 2013 à 14:30

Nouveau code :

<label for="partager" id="partager_label">Partager la tache</label>

<input type="radio" name="tem" value="oui" id="ooui" onclick="met(this, 'emailInput1');" >
<label for="ooui">Oui</label>

<input type="text" style="display:none" id="emailInput1" value="Email">
<br />

<input type="radio" name="tem" value="non" id="nnon" onclick="met(this, 'emailInput1');" >
<label for="nnon">Non</label>
<br />


<script type="text/javascript">
function met(btn, emailInputId){
     if (btn.checked && btn.value == "oui"){
          document.getElementById(emailInputId).style.display="inline";
     } else {
          if (btn.checked && btn.value == "non"){
               document.getElementById(emailInputId).style.display="none";
          } else {
               // Cas particulier qu'on ne gère pas
          }
     }
}
</script>

jordxn Messages postés 356 Date d'inscription jeudi 15 avril 2010 Statut Membre Dernière intervention 26 avril 2015 1
19 avril 2013 à 14:37

Merci beaucoup , sa marche très bien.
Dernière petite question : Si je veux rajouter un bouton "ajouter un autre email qui fasse apparaître un nouveau input, sa marche pareil ?

Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
19 avril 2013 à 14:44

Tu n'as pas besoin de recopier le code Javascript ; il te suffit de reprendre le code HTML, de le coller, et de modifier les trois occurrence de "emailInput1" en les remplaçant par un autre nom ; par exemple "emailInput2".

Et ainsi de suite si tu veux en mettre d'autres.

jordxn Messages postés 356 Date d'inscription jeudi 15 avril 2010 Statut Membre Dernière intervention 26 avril 2015 1
19 avril 2013 à 14:59

Merci, j'ai essayé :

<label for="partager" id="partager_label">Partager la tache</label>

<input type="radio" name="tem" value="oui" id="ooui" onclick="met(this, 'emailInput1');" >
<label for="ooui">Oui</label>

<input type="text" style="display:none" id="emailInput1" value="Email">
<input type="button" style="display:none" id="emailInput1" value="Ajouter un autre email">
<input type="text" style="display:none" id="emailInput2" value="Email">
<br />

<input type="radio" name="tem" value="non" id="nnon" onclick="met(this, 'emailInput1');" >
<label for="nnon">Non</label>
<br />

J'aurais aimé que le bouton Ajouter un autre email apparaisse en même que le premier champ email c'est pour cela que j'ai mis le même id et qu'ensuite si l'utilisateur clique sur le bouton , l'autre champ email apparaisse...

Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
19 avril 2013 à 15:00

Ah mais les autres e-mails n'ont pas de radiobutton oui/non ??

Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
19 avril 2013 à 15:02

Combien tu veux ajouter d'e-mail au juste ?

Réponse 2 / 3

Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
18 avril 2013 à 22:10

Hello,

Avant de s'occuper de l'ajout, il faut déjà purifier ton code qui contient beaucoup d'incohérence.

1/ Pourquoi utiliser des radiobutton alors qu'un checkbox serait suffisante ?

2/ Ta fonction Javascript "met()" prend 2 paramètres mais quand tes boutons l'appellent (dans les onClick) tu en envoies trois ; le dernier est donc inutile.

3/ Ta fonction met() appelle un élément donc l'ID est "champ1" ; j'aimerais bien voir son code HTML également.

jordxn Messages postés 356 Date d'inscription jeudi 15 avril 2010 Statut Membre Dernière intervention 26 avril 2015 1
18 avril 2013 à 22:21

Bonjour, pour tout dire, je ne savais pas comment faire alors j'ai trouver un code tout fait sur internet dont j'ai essayer de modifier certaine chose mais j'ai pas su modifier tout...

Je n'ai que sa comme code....

Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
18 avril 2013 à 22:51

Tu devrais te plonger un chouïa dans l'apprentissage au moins du HTML !

jordxn Messages postés 356 Date d'inscription jeudi 15 avril 2010 Statut Membre Dernière intervention 26 avril 2015 1
18 avril 2013 à 23:03

J'ai terminer mon site web , donc je maitrise assez bien le html ,
C'est plutot les fonctions etc que j'ai du mal.

Donc en quoi je pourrais l'améliorer ?

Réponse 3 / 3

jordxn Messages postés 356 Date d'inscription jeudi 15 avril 2010 Statut Membre Dernière intervention 26 avril 2015 1
19 avril 2013 à 14:12

En quoi je pourrais l'améliorer svp :
Sachant que je trouve cela plus joli avec des buttons radios sur mon site :

<label for="partager" id="partager_label">Partager la tache</label>
<input type="radio" name="tem" value="oui" id="ooui" onclick="met(this,'oui');" ><label for="ooui">Oui</label> <input type="text" style="display:none" id="oui" value="Email"><br />
<input type="radio" name="tem" value="non" id="nnon" onclick="met(this,'non');" ><label for="nnon">Non</label> <br />

javascript :
function met(btn,oui)
{
if (btn.checked)
{
document.getElementById(oui).style.display="inline";
}
}

Merci

Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
19 avril 2013 à 14:14

Rappelle moi quel comportement tu recherches ?

jordxn Messages postés 356 Date d'inscription jeudi 15 avril 2010 Statut Membre Dernière intervention 26 avril 2015 1
Modifié par jordxn le 19/04/2013 à 14:16

Quand je clique sur oui , le champ input apparait, c'est le cas grace a la fonction
mais j'aimerais le faire disparaitre si l'utilisateur clique sur oui puis change d'avis et cliques sur non car la il reste le champs email...

Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
19 avril 2013 à 14:19

Alors on a besoin de voir le code du champ email !!

jordxn Messages postés 356 Date d'inscription jeudi 15 avril 2010 Statut Membre Dernière intervention 26 avril 2015 1
19 avril 2013 à 14:21

Il est présent ci-dessus...

<input type="text" style="display:none" id="oui" value="Email"><br />

Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 846
Modifié par Mihawk le 19/04/2013 à 14:24

Ah pardon, il va falloir que tu apprennes à structurer ton code !

<label for="partager" id="partager_label">Partager la tache</label> 

<input type="radio" name="tem" value="oui" id="ooui" onclick="met(this,'oui');" > 
<label for="ooui">Oui</label> 

<input type="text" style="display:none" id="oui" value="Email">
<br /> 

<input type="radio" name="tem" value="non" id="nnon" onclick="met(this,'non');" > 
<label for="nnon">Non</label> 

<br />

Discussions similaires