1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

Probleme pour masquer mon champs texte [Résolu]

Signaler
-
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
 -
Bonjour,
j'ai eu un code sur le net qui me permet de cacher ou faire apparaitre un champs texte mais il se trouve que le code se comporte pas comme je veux.
je voudrais que le champ reste caché et que c'est quand je coche le bouton qu'il apparait . le code que j'ai fait le contraire .

voici mon code : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script language="Javascript">
// ==================
//	Activations - Désactivations
// ==================
function GereControle(Controleur, Controle, Masquer) {
var objControleur = document.getElementById(Controleur);
var objControle = document.getElementById(Controle);
	if (Masquer=='1')
		objControle.style.visibility=(objControleur.checked==true)?'visible':'hidden';
	else
		objControle.disabled=(objControleur.checked==true)?false:true;
	return true;
}
</script>
</head>

<body>

<table width="568" border="0">
        <tr>
          <td width="65">Assure</td>
          <td width="70"><input type="radio" id="radio_10" name="radios_0" onClick="GereControle('radio_10', 'liste_10', '1');" CHECKED> <label for="radio_10">Oui</label></td>
          <td width="419"><input type="radio" id="radio_20" name="radios_0" onClick="GereControle('radio_10', 'liste_10', '1');"> <label for="radio_20">Non</label></td>
        </tr>
      </table>
<div id="liste_10">


<div style="position: absolute; top: 100px; left: 14px; height: 347px;">
  <table width="1003" height="203" border="0" align="center" bgcolor="#FFFFFF">
    <tr>
      <td colspan="4"></td>
    </tr>
    <tr>
      <td width="210"><span class="Style13">Nom assurance</span></td>
      <td colspan="3"><input name="nom_assurance" type="text"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/></td>
    </tr>
    <tr>
      <td><span class="Style13">Nom Société</span></td>
      <td colspan="3"><input name="nom_societe" type="text" size="50"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/></td>
    </tr>
    <tr>
      <td><span class="Style13">Nom de l'assuré</span></td>
      <td colspan="3"><input name="nom_assure" type="text"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/></td>
    </tr>
    <tr>
      <td><span class="Style13">Numéro de carte d'assurance:</span></td>
      <td colspan="3"><input name="num_carte" type="text"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/></td>
    </tr>
    <tr>
      <td><span class="Style13">Plafond</span></td>
      <td width="168"><span class="Style7">
        <input name="plafond" type="text"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/>
      </span></td>
      <td width="89"> </td>
      <td width="382"> </td>
    </tr>
    <tr>
      <td>Taux de couverture:</td>
      <td colspan="3"><span class="Style7">
        <select name="taux"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'>
          <option>0</option>
          <option>1</option>
          <option>2</option>

        </select>
      %</span></td>
    </tr>
    <tr>
      <td><span class="Style13">Tiers payant: </span></td>
      <td colspan="2"><input name="tiers" type="text"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/></td>
      <td> </td>
    </tr>
    </table>
</div></div>
</body>
</html>
Afficher la suite

6 réponses

Réponse 1 / 6
Messages postés
31099
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
20 janvier 2021
 342
Encore une fois. ..ton souci porte sur du javascript et non du php.......
je déplace au bon endroit.
Réponse 2 / 6
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
 116
bonjour

niveau codage c'st pas beau sinon tu doit testé l'id du radio d'ou le probleme et aussi au niveau du html des input a l'appel de la fonction en parametre tu met a chaque fois le meme id 

function GereControle(Controleur, Controle) {

document.getElementById(Controle).style.visibility=(Controleur=='radio_10')?'visible':'hidden';

}


<table width="568" border="0">
        <tr>
          <td width="65">Assure</td>
          <td width="70"><input type="radio" id="radio_10" name="radios_0" onClick="GereControle('radio_10', 'liste_10');" CHECKED> <label for="radio_10">Oui</label></td>
          <td width="419"><input type="radio" id="radio_20" name="radios_0" onClick="GereControle('radio_20', 'liste_10');"> <label for="radio_20">Non</label></td>
        </tr>
      </table>





rien ne sert de courir il faut partir a point.
cours Forest cours !
Réponse 3 / 6
Messages postés
498
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
1 mars 2020
 1
je ne comprend pas bien la reponse de @æKasma .
j'ai trouve un code qui parait plus simple mais c'est la même chose . voici mon code : 

<table width="568" border="0">
        <tr>
          <td width="80">Assure ?</td>
          <td width="58"><label><input type="radio" name="choix" value="1" /></label></td>
          <td width="58">Oui</td>
          <td width="54"><label><input type="radio" name="choix" value="0" /></label></td>
          <td width="296">Non</td>
        </tr>
    </table>


</div>
<div id="hidden">
<form id="form1" name="form1" method="post" action="">
<table width="497" height="203" border="0" align="left" bgcolor="#FFFFFF">
    <tr>
      <td colspan="2"></td>
    </tr>
    <tr>
      <td width="110"><span class="Style13">Nom assurance</span></td>
      <td><input name="nom_assurance" type="text"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/></td>
    </tr>
    <tr>
      <td><span class="Style13">Nom Société</span></td>
      <td><input name="nom_societe" type="text" size="50"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; width:150px'/></td>
    </tr>
    <tr>
      <td><span class="Style13">Nom de l'assuré</span></td>
      <td><input name="nom_assure" type="text"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/></td>
    </tr>
    <tr>
      <td><span class="Style13">Numéro de carte d'assurance:</span></td>
      <td><input name="num_carte" type="text"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/></td>
    </tr>
    <tr>
      <td><span class="Style13">Plafond</span></td>
      <td width="194"><span class="Style7">
        <input name="plafond" type="text"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/>
      </span></td>
      </tr>
    <tr>
      <td>Taux de couverture:</td>
      <td>
        <select name="taux"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; width:100px'>
          <option>0</option>
          <option>1</option>
          <option>2</option>
        </select>
      %</td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
    </tr>
    <tr>
      <td colspan="2"><span class="Style13"> </span>
        <table width="391" border="0">
          <tr>
            <td>Tiers payant:</td>
            <td><input type="radio" name="tiers" value="1" id="ok_0" /></td>
            <td>Part assurance</td>
            </tr>
          <tr>
            <td> </td>
            <td><input type="radio" name="tiers" value="0" id="ok_1" /></td>
            <td>Part Patient</td>
          </tr>
          </table></td>
      </tr>
    </table>
</div>
</form> 


<script type="text/javascript">
var oui = document.form1.choix[0];
var non = document.form1.choix[1];
oui.onclick = function() {
document.getElementById("hidden").style.display = "block"
};
non.onclick = function() {
document.getElementById("hidden").style.display = "none"
};
</script>
Réponse 4 / 6
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
 116
tu doit remplacer la fonction par celle que j'ai mise de meme pour le html

essai avec le code ci dessous et j'ai remplacé visibility par display 


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script language="Javascript">
// ==================
// Activations - D?ctivations
// ==================
function GereControle(Controleur, Controle) {

document.getElementById(Controle).style.display=(Controleur=='radio_10')?'block':'none';

}
</script>
</head>

<body>

<table width="568" border="0">
        <tr>
          <td width="65">Assure</td>
          <td width="70"><input type="radio" id="radio_10" name="radios_0" onClick="GereControle('radio_10', 'liste_10');" CHECKED> <label for="radio_10">Oui</label></td>
          <td width="419"><input type="radio" id="radio_20" name="radios_0" onClick="GereControle('radio_20', 'liste_10');"> <label for="radio_20">Non</label></td>
        </tr>
      </table>
<div id="liste_10">


<div style="position: absolute; top: 100px; left: 14px; height: 347px;">
  <table width="1003" height="203" border="0" align="center" bgcolor="#FFFFFF">
    <tr>
      <td colspan="4"></td>
    </tr>
    <tr>
      <td width="210"><span class="Style13">Nom assurance</span></td>
      <td colspan="3"><input name="nom_assurance" type="text"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/></td>
    </tr>
    <tr>
      <td><span class="Style13">Nom Soci?</span></td>
      <td colspan="3"><input name="nom_societe" type="text" size="50"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/></td>
    </tr>
    <tr>
      <td><span class="Style13">Nom de l'assur?span></td>
      <td colspan="3"><input name="nom_assure" type="text"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/></td>
    </tr>
    <tr>
      <td><span class="Style13">Num? de carte d'assurance:</span></td>
      <td colspan="3"><input name="num_carte" type="text"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/></td>
    </tr>
    <tr>
      <td><span class="Style13">Plafond</span></td>
      <td width="168"><span class="Style7">
        <input name="plafond" type="text"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/>
      </span></td>
      <td width="89"> </td>
      <td width="382"> </td>
    </tr>
    <tr>
      <td>Taux de couverture:</td>
      <td colspan="3"><span class="Style7">
        <select name="taux"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'>
          <option>0</option>
          <option>1</option>
          <option>2</option>

        </select>
      %</span></td>
    </tr>
    <tr>
      <td><span class="Style13">Tiers payant: </span></td>
      <td colspan="2"><input name="tiers" type="text"  style='background-color: #99CC00; color: #FFFFFF; font-weight: bold; border-width: 1px; font-size:12pt'/></td>
      <td> </td>
    </tr>
    </table>
</div></div>
</body>
</html>

pas besoin de plus ?
rien ne sert de courir il faut partir a point.
cours Forest cours !
Réponse 5 / 6
Messages postés
498
Date d'inscription
lundi 24 août 2009
Statut
Membre
Dernière intervention
1 mars 2020
 1
bonsoir je viens de tester votre solution mais je retombe sur le même résultat qu'auparavant.

lorsque j accède a la page le formulaire s'affiche directement or moi je veux que tant qu'on ne coche pas oui ça ne doit pas s'afficher .
Réponse 6 / 6
Messages postés
1782
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
14 janvier 2021
 116
il faut mettre le div qui contient le formulaire en display none pour qu'il ne soit pas affiché au chargement de la page 

<div id="liste_10" style="display:none">


et ne met pas met pas le bouton oui en checked c'est inutile 

<td width="70"><input type="radio" id="radio_10" name="radios_0" onClick="GereControle('radio_10', 'liste_10');"> <label for="radio_10">Oui</label></td>


rien ne sert de courir il faut partir a point.
cours Forest cours !
Répondre Posez votre question