Affichage champs selon le choix du bouton
Résolu
steph
-
badibad -
badibad -
Bonjour,
je voudrais afficher des champs selon le choix du bouton radio, j'ai trouvé cette fonction sur le net:
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
function met(btn,champ)
{
if (btn.checked)
{
document.getElementById(champ).style.display="inline";
}
else {
document.getElementById(champ).style.display="none";
}
}
</script>
</HEAD>
<BODY>
<input type="radio" name="tem" value="oui" id="chkb_10"
onclick="met(this,'texte_10');" > <label for="chkb_10">Contrôle de "texte_10"</label>
<input type="text"
style="display:none"
id="texte_10" value="Contenu de texte_10"><br />
<input type="radio" id="chkb_20" value="non" name="tem"
onclick="met(this,'texte_20');" > <label for="chkb_20">Contrôle de "texte_20"</label>
<input type="text"
style="display:none"
id="texte_20" value="Contenu de texte_20"><br />
</BODY>
</HTML>
Le probléme c'est que quand je change de bouton, le texte reste afficher, qu'est ce que je dois rajouter pour que ça marche??
merci d'avance pour votre aide.
je voudrais afficher des champs selon le choix du bouton radio, j'ai trouvé cette fonction sur le net:
<HTML>
<HEAD>
<TITLE></TITLE>
<script type="text/javascript">
function met(btn,champ)
{
if (btn.checked)
{
document.getElementById(champ).style.display="inline";
}
else {
document.getElementById(champ).style.display="none";
}
}
</script>
</HEAD>
<BODY>
<input type="radio" name="tem" value="oui" id="chkb_10"
onclick="met(this,'texte_10');" > <label for="chkb_10">Contrôle de "texte_10"</label>
<input type="text"
style="display:none"
id="texte_10" value="Contenu de texte_10"><br />
<input type="radio" id="chkb_20" value="non" name="tem"
onclick="met(this,'texte_20');" > <label for="chkb_20">Contrôle de "texte_20"</label>
<input type="text"
style="display:none"
id="texte_20" value="Contenu de texte_20"><br />
</BODY>
</HTML>
Le probléme c'est que quand je change de bouton, le texte reste afficher, qu'est ce que je dois rajouter pour que ça marche??
merci d'avance pour votre aide.
A voir également:
- Affichage champs selon le choix du bouton
- Liste déroulante de choix excel - Guide
- Affichage double ecran - Guide
- Diagnostic bouton photo - Accueil - Outils
- Bouton reinitialisation pc - Guide
- Bouton shift pc - Forum Jeux vidéo
9 réponses
Fonction js (javascript) qui marche qui permet d'afficher/cacher une partie d'un formulaire différent à partir d'un type=radio (ici y'en a seulement 2)
2 choix possibles donc type=radio (oui ou non), Si il clique sur oui alors sa
lui envoie un formulaire sur des infos client, si clic sur non alors sa lui
envoie des infos pour les nons clients
Ces instructions sont couplées avec du PHP
HTML/PHP
echo '<label>Oui</label><input type="radio" name="client" id="ouiCli" value="oui"
onclick="choixClient(this,\'formCli\', \'formNonCli\');" />';
echo '<label>Non</label><input type="radio" name="client" id="nonCli" value="non"
onclick="choixClient(this, \'formCli\',\'formNonCli\');" />';
javascript
btn correspond au bouton coche (oui ou non ici)
champ1 correspend a mon DIV qui englobe les formulaire que je veux voir (ici
formulaire pour le client)
champ1 correspend a mon DIV qui englobe les formulaire que je veux voir (ici
formulaire pour le NON client)
function choixClient(btn,champ1,champ2)
{
if (btn.id == "ouiCli"){
afficher(champ1,true);
afficher(champ2,false);
}
else if (btn.id == "nonCli"){
afficher(champ2,true);
afficher(champ1,false);
}
}
Cette fonction affiche ou non le DIV par rapport a l'id
ex: <div id="formCli">
function afficher (div, affiche) {
if (affiche){
document.getElementById(div).style.display="block";
}
else {
document.getElementById(div).style.display="none";
}
}
2 choix possibles donc type=radio (oui ou non), Si il clique sur oui alors sa
lui envoie un formulaire sur des infos client, si clic sur non alors sa lui
envoie des infos pour les nons clients
Ces instructions sont couplées avec du PHP
HTML/PHP
echo '<label>Oui</label><input type="radio" name="client" id="ouiCli" value="oui"
onclick="choixClient(this,\'formCli\', \'formNonCli\');" />';
echo '<label>Non</label><input type="radio" name="client" id="nonCli" value="non"
onclick="choixClient(this, \'formCli\',\'formNonCli\');" />';
javascript
btn correspond au bouton coche (oui ou non ici)
champ1 correspend a mon DIV qui englobe les formulaire que je veux voir (ici
formulaire pour le client)
champ1 correspend a mon DIV qui englobe les formulaire que je veux voir (ici
formulaire pour le NON client)
function choixClient(btn,champ1,champ2)
{
if (btn.id == "ouiCli"){
afficher(champ1,true);
afficher(champ2,false);
}
else if (btn.id == "nonCli"){
afficher(champ2,true);
afficher(champ1,false);
}
}
Cette fonction affiche ou non le DIV par rapport a l'id
ex: <div id="formCli">
function afficher (div, affiche) {
if (affiche){
document.getElementById(div).style.display="block";
}
else {
document.getElementById(div).style.display="none";
}
}
Bonjour,
je vais rajouter meme ke je pense ke cé trop tard de repondre mais pour d'autre personne j'ai rajouter ds le code une autre fonction enlver() pour enlever les champs lorsque en décoche le boutton radio voila cé simple rien n'est complique a+
<HTML>
<HEAD>
<TITLE>
</TITLE>
<script type="text/javascript">
function enlver(btn,champ)
{
if (btn.unchecked)
{
document.getElementById(champ).style.display="inline";
}
else {
document.getElementById(champ).style.display="none";
}
}
function met(btn,champ)
{
if (btn.checked)
{
document.getElementById(champ).style.display="inline";
}
else {
document.getElementById(champ).style.display="none";
}
}
</script>
</HEAD>
<BODY>
<input type="radio" name="tem" value="oui" id="chkb_10"onclick="met(this,'texte_10');" Onchange="enlver(this,'texte_10');">
<label for="chkb_10">Contrôle de "texte_10"</label>
<input type="text" style="display:none" name="texte_10" id="texte_10" value="Contenu de texte_10"><br />
<input type="radio" id="chkb_20" value="non" name="tem"onclick="met(this,'texte_20');" Onchange="enlver(this,'texte_20');">
<label for="chkb_20">Contrôle de "texte_20"</label>
<input type="text" style="display:none" name="texte_20" id="texte_20" value="Contenu de texte_20"><br />
</BODY>
</HTML>
je vais rajouter meme ke je pense ke cé trop tard de repondre mais pour d'autre personne j'ai rajouter ds le code une autre fonction enlver() pour enlever les champs lorsque en décoche le boutton radio voila cé simple rien n'est complique a+
<HTML>
<HEAD>
<TITLE>
</TITLE>
<script type="text/javascript">
function enlver(btn,champ)
{
if (btn.unchecked)
{
document.getElementById(champ).style.display="inline";
}
else {
document.getElementById(champ).style.display="none";
}
}
function met(btn,champ)
{
if (btn.checked)
{
document.getElementById(champ).style.display="inline";
}
else {
document.getElementById(champ).style.display="none";
}
}
</script>
</HEAD>
<BODY>
<input type="radio" name="tem" value="oui" id="chkb_10"onclick="met(this,'texte_10');" Onchange="enlver(this,'texte_10');">
<label for="chkb_10">Contrôle de "texte_10"</label>
<input type="text" style="display:none" name="texte_10" id="texte_10" value="Contenu de texte_10"><br />
<input type="radio" id="chkb_20" value="non" name="tem"onclick="met(this,'texte_20');" Onchange="enlver(this,'texte_20');">
<label for="chkb_20">Contrôle de "texte_20"</label>
<input type="text" style="display:none" name="texte_20" id="texte_20" value="Contenu de texte_20"><br />
</BODY>
</HTML>
Bonjour ,
j'ai le meme probleme sauf que moi ce ne sont pas des boutons radio mais une liste déroulante sur laquelle on devra faire une sélection et afficher les resultats en fonction de cette sélection
j'ai le meme probleme sauf que moi ce ne sont pas des boutons radio mais une liste déroulante sur laquelle on devra faire une sélection et afficher les resultats en fonction de cette sélection
A mon avis, il te faut rappeler la fonction "met" sur click des autres boutons, etdemander dans ce cas de cacher les champs indésirables...
j'espère que ca aide...
j'espère que ca aide...
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Le code donné ci-dessus fait bien ton affaire. Tout ce qu'il te faut modifier, c'est le test : au lieu de tester si un bouton est coché ou pas, tu testes la valeur de ta combo list et tu décides de ce que tu affiches (ou pas)...
En espérant que ca apporte un peu plus de lumière...
En espérant que ca apporte un peu plus de lumière...
Bonjour,
Le Javascript fonctionne super bien (je ne maitrise pas le PHP).
Y aurait-il moyen de faire fonctionner ce style super pratique sur FireFox ????
Ca serait dommage de rester bloquer sur ce "détail de coimpatibilité !
Merci pour votre aide
Le Javascript fonctionne super bien (je ne maitrise pas le PHP).
Y aurait-il moyen de faire fonctionner ce style super pratique sur FireFox ????
Ca serait dommage de rester bloquer sur ce "détail de coimpatibilité !
Merci pour votre aide
Bonjour à tous
Je suis débutant et je cherche à adapter votre script à mon code php. pourriez vous m'aider
Voici mon code
J'ai fait plusieurs essais mais sans succès
Merci à tous
Je suis débutant et je cherche à adapter votre script à mon code php. pourriez vous m'aider
Voici mon code
$selection = array('id' => $this->code,
'module' => $this->title,
'fields' => array(array('title' => MODULE_PAYMENT_CC_TEXT_CREDIT_CARD_OWNER,
'field' => tep_draw_input_field('cc_owner', $order->billing['firstname'] . ' ' . $order->billing['lastname'])),
array('title' => MODULE_PAYMENT_CC_TEXT_MENS,
'field' => tep_draw_pull_down_menu('cc_mens',$montants_array, $mens_selected)),
array('title' => MODULE_PAYMENT_CC_TEXT_CREDIT_CARD_NUMBER,
'field' => tep_draw_input_field('cc_number')),
array('title' => MODULE_PAYMENT_CC_TEXT_CREDIT_CARD_EXPIRES,
'field' => tep_draw_pull_down_menu('cc_expires_month', $expires_month) . ' ' . tep_draw_pull_down_menu('cc_expires_year', $expires_year))));
return $selection;
}
J'ai fait plusieurs essais mais sans succès
Merci à tous