Affichage champ sur clic bouton radio

par **Kimble** » 12 févr. 2007, 19:17

Bon me revoilou ! j'ai avancé un petit peu...
Mes radios boutons et listes déroulantes s'affichent bien et se masquent bien. Le truc que je n'arrive pas pas à faire c'est ceci :
J'aimerais avoir la possibilité de pouvoir afficher une liste dans le choix "tuiles" et aussi une liste (sans masquer celle du choix "tuiles") dans le choix crépi ! Et là, je n'y arrive pas..
Voilà le code complet :

<html>
<head>
 <script language="Javascript">
// ==================
//      Activations - Désactivations
// ==================
function GereControle(Controleur, Controle)
{
var objControleur = document.getElementById(Controleur);
var objControle = document.getElementById('a'+Controle);
var nbre =6; //ou 6 correspond au nombre de choix...
if(objControle.style.display == 'none')
{
        for (var i = 1; i<=nbre; i++) {document.getElementById('a'+i).style.display = 'none';
}
objControle.style.display='block';
 }                                                                  
}
 </script>
</head>
<body>
<?php 
			include("connexion.php");
			include("fonctions_ventes.php");?>		
			<br />
			<br />	
<div align="center">
  <table border=1 width="850">
    <form id="formulaire1" method="post" action="<? echo $action ?>">
		      <tr>
   		        <td>
			      <br />
   		          <div align="center">Date des choix :
                  <?php
				  if (isset($result['date_choix']) AND $result['date_choix'] != "")
					  $date_en_cours = $result['date_choix'];
				  else
					  $date_en_cours = date('Ymd',time());
			  // on affiche les select jour mois année
				  form_date($date_en_cours);?>              
			      </div>
			      <br />
		        </td>
		        <td>
			      <br />
			      <div align="center">Choisissez votre client :			     
          <?php liste_deroulante($select8,"vente_v2","client",$result['id_vente']); ?>   		
			      </div>
			      <br />
		  	    </td>
		      </tr>
		      <tr>
    		    <td colspan=1 rowspan=1 width=50% height=33%><div align="center">
          TUILES <br /> 
		  			<?php //choix du type de tuiles ?>    
	  			    <input type="radio" id="radio_10" name="tuile" value="romane" onClick="GereControle('radio_10', '1');"/>
      		    <label for="radio_10"> Romane</label>                
				    <input type="radio" id="radio_20" name="tuile" value="beton" onClick="GereControle('radio_20', '2' );"/>
      		    <label for="radio_20">B&eacute;ton  </label>	  
				    <input type="radio" id="radio_30" name="tuile" value="DC12" onClick="GereControle('radio_30', '3' );"/>
	 		    <label for="radio_30">DC12</label>
			    <br />
					<?php //choix des couleurs de tuiles ?>
			    <div id="a1" style="display:none">
            	    <?php liste_deroulante($select1,"romane","romane",$result['idromane']); ?>
        	    </div>
			    <div id="a2" style="display:none">
        		    <?php liste_deroulante($select2,"beton","beton",$result['idbeton']); ?>
			    </div>
			    <div id="a3" style="display:none">
       			     <?php liste_deroulante($select3,"DC12","DC12",$result['idDC12']); ?>        
			    </div>
    		    </div>
			    </td>
    		    <td colspan=1 rowspan=1 width=50% height=33%><div align="center">
          CREPIS  <br />
		  			<?php //choix du type de crépi ?>   
    			    <input type="radio" id="radio_40" name="crepi" value="grains_fins" onClick="GereControle('radio_40', '4');"/>    		
      		    <label for="radio_40"> Grains Fins </label>                
				    <input type="radio" id="radio_50" name="crepi" value="ecrase" onClick="GereControle('radio_50', '5' );"/>
      		    <label for="radio_50">Ecras&eacute;</label>	  
				    <input type="radio" id="radio_60" name="crepi" value="gratte" onClick="GereControle('radio_60', '6' );"/>
	 		    <label for="radio_60">Gratt&eacute;</label>
			    <br />
					<?php //choix des couleurs de crépi ?>
			    <div id="a4" style="display:none">		
            	    <?php liste_deroulante($select4,"grains_fins","grains_fins",$result['idgrains_fins']); ?>
        	    </div>
			    <div id="a5" style="display:none">
        		    <?php liste_deroulante($select5,"ecrase","ecrase",$result['idecrase']); ?>
			    </div>
			    <div id="a6" style="display:none">
       			    <?php liste_deroulante($select6,"gratte","gratte",$result['idgratte']); ?>        
			    </div>
    		    </div>
			    </td>
		      </tr>
		      <tr>
    		    <td colspan=2 rowspan=1 width=100% height=33%><div align="center">
        		    <input type="submit" name="Submit" value="Suivant">
				    <input type="button" name="bouton" value="Effacer les champs" onclick='parent.location="javascript:location.reload()"'>
    		    </div>
			    </td>
		      </tr></form>
  </table>
</div>
</body>
</html>

Une astuce ? Merci.

par **Chakra Spirit** » 05 févr. 2007, 15:19

Salut,

Je pense qu'il est important de préciser que ça doit être fonctionnel sans Javascript et puis, pour que ce soit agréable pour tout le monde, mieux vaut passer par DOM parce que celui qui n'a pas CSS activé va avoir un problème.

Dans ce cas, au niveau du xhtml, on fait un formulaire avec deux boutons radio et un bouton submit pour transmettre ce choix. A la transmission des données (le choix), on remplace les boutons radio par une div comprenant le champ souhaité accompagné de son label ainsi que la suite du formulaire.

C'est ici la méthode php, celle qui est indispensable. Elle impose qu'on régènère la page, ce qui fait que le formulaire complet est constitué après plusieurs soumissions.

Pour la partie Javascript (via DOM), il faut toujours disposer des deux boutons radio dans le xhtml mais le formulaire n'a pas à être transmis pour générer les champs. A la sélection d'un des deux boutons radio, on doit supprimer le nouveau conteneur s'il existe déjà puis générer ce conteneur div en l'insérant sous les boutons radio. En fonction du bouton radio choisi, on y insère le champ voulu accompagné de son label puis on génère la suite du formulaire.

par **mere-teresa** » 05 févr. 2007, 15:07

Ah ta question est mieux posée quand tu demandes une idée ou un début de piste !

L'idée est si je coche choixA, j'ai le champA (type text) qui s'affiche, si je coche choixB, j'ai le champB qui s'affiche.
choixA et choixB étant des boutons radios, ils ont la propriété checked à true quand ils sont sélectionnés (voir les explications de ToutJavascript.com), à ce moment, on peut décider que quand l'utilisateur clique sur le bouton radio, on lance une fonction qui vérifie si le bouton est checked = true ou pas.

Ensuite, en ce cas, on affiche le champA ou le champB, à ce moment, il y a deux méthodes :

1) Jouer sur l'affichage CSS
Et là, encore deux possibilités :
- passer le display à block (au lieu de none)
- passer la visibilité à visible (au lieu de hidden)

Mais il faut que champA et champB soient déjà écrits tous les deux sur la page pour utiliser cette technique du masquer/afficher.

2) ajouter dans l'arbre DOM l'élément input
champA au clic sur choixA par exemple, avec les fonctions du DOM (appendChild(), setAttribute(), etc.)
Et là, je te conseille d'avoir un div avec un id, ce sera plus facile pour lui ajouter des noeuds enfants et tout le reste avec l'API DOM.

PS: je ne dis jamais bonjour sur les forums, puisque nous ne sommes pas tous à la même heure.

par **Kimble** » 05 févr. 2007, 14:13

Bonjour,
Pourquoi tant d'agressivité ? même pas un bonjour !

Mal dormi peut-être ? Mais ce n'est pas grave...C'est dans l'air du temps maintenant que les gens se conduisent de la sorte.
Pour revenir au sujet initial, si j'ai posté ce bout de script c'était pour donner une idée de ce que j'aimerais faire et je demandais simplement une idée ou un début de piste .

par **mere-teresa** » 05 févr. 2007, 13:06

Modération :
PHPFrance n'est pas un site de distribution de scripts gratuits,
ni de débuggage de scripts téléchargés et utilisés sans compréhension.

Merci de prendre le temps de lire les règlements.

par **Kimble** » 04 févr. 2007, 11:26

Bonjour,
J'ai fait des recherches, mais pas trouvé ce que je voulais...
J'ai 2 boutons radio et j'aimerais qu'au clic sur l'un ou l'autre s'affiche un champ différent...Je m'explique :
si je clic sur le bouton radio A, ça m'affiche un champ. Si je clic sur le bouton radio B, ça m'affiche un champ
en effacant le champ du bouton A

Compliqué non ? J'ai trouvé ceci
chez editeurjavascript.com mais ce n'est pas tout à fait ça...

Code : Tout sélectionner

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</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>
<input type="radio" id="radio_10" name="radios_0" onClick="GereControle('radio_10', 'liste_10', '1');" CHECKED>&nbsp;<label for="radio_10">Active de "liste_10"</label>
<br />
<input type="radio" id="radio_20" name="radios_0" onClick="GereControle('radio_10', 'liste_10', '1');">&nbsp;<label for="radio_20">Désactive de "liste_10"</label>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<select id="liste_10">
	<option value="1">Ligne 1</option>
	<option value="2">Ligne 2</option>
	<option value="3">Ligne 3</option>
</select>

</body>

Je dois dire que je suis une truffe en Javascript ! alors merci d'avance

Affichage champ sur clic bouton radio

Répondre

Étendre la vue Revue du sujet : Affichage champ sur clic bouton radio

Affichage champ sur clic bouton radio