Gestion evenement JavaScript [Résolu/Fermé]

- - Dernière réponse :  BoOst - 21 mai 2008 à 23:07
Bonjour,

je suis actuellement en stage, et j'ai un petit soucis : j'ai un formulaire assez volumineux, contenant une foulée de radios, checkbox et autres listes. Le probleme, c'est que certains de ces controles ne sont disponible que si l'on coche tel ou tel checkbox, ou si l'on choisit telle ou telle valeur dans une liste.

En, clair, voici un exemple :

<fieldset class="fs_exterieur">
    <table>
        <tbody><tr>
            <td><input type="radio" name="Type_raccordement" value="PitagoraSystem">Raccordement Pitagora</td>
            <td><input type="radio" name="Type_raccordement_3" value="Master">Maitre</td>
        </tr>
        <tr>
            <td><input type="radio" name="Type_raccordement" value="StandartSystem">Raccordement standard</td>
            <td><input type="radio" name="Type_raccordement_3" value="SlaveWithoutButtons">Esclave sans appels palier</td>
        </tr>
        <tr>
            <td><input type="radio" name="Type_raccordement_2" value="Simplex">Simplex</td>
            <td><input type="radio" name="Type_raccordement_3" value="SlaveWithButtons">Esclave avec appels palier</td>
        </tr>
        <tr>
            <td><input type="radio" name="Type_raccordement_2" value="Duplex">Duplex</td>
            <td></td>
        </tr>
    </tbody></table>
</fieldset>


Concernant les radios "Master", "SlaveWithoutButtons", "SlaveWithButtons", ils ne sont disponibles que si le bouton "Duplex" est coché, sinon ils sont grisés. Comment faire ?
Afficher la suite 

7 réponses

Messages postés
43
Date d'inscription
lundi 28 juillet 2003
Statut
Membre
Dernière intervention
18 juin 2009
1
0
Merci
Il suffit de prendre ton élément est de le "dégriser" avec la propriété disabled:

ton_formulaire.Master.disabled=false;
0
Merci
Merci; je suppose quand dans ce cas la, j'ai besoin d'inclure un name ou un id dans ma balise form pour pouvoir l'identifier plus tard (a la place de "ton_formulaire" dans ton code) ??
0
Merci
salut, oui c'est bien ça.

voila ce que ca donne :

<html>

<head>

<!-- Début des Fonctions JAVASCRIPT -->
<script>

// ************************
// ***  Fonction groupe 3  ***
// ************************
function cacher_groupe3( statut ) {
	// boucle sur le groupe de boutons 'Type_raccordement_3'
	var radios = document.forms[0].Type_raccordement_3;
	for(var i=0; i<radios.length;i++ ) {
		// désactive ou active le radio-bouton en fonction du statut
		document.forms[0].Type_raccordement_3[i].disabled = (statut ? true : false);
	} 

	// affiche ou cache les champs labels en fonction du statut
	document.getElementById('txt1').style.display = (statut ? 'none' : '');
	document.getElementById('txt2').style.display = (statut ? 'none' : '');
	document.getElementById('txt3').style.display = (statut ? 'none' : '');
	
}

</script>
<!-- Fin des Fonctions JAVASCRIPT -->

</head>

<body onload="cacher_groupe3(true)">
<form name="myform">
<fieldset class="fs_exterieur">
    <table>
        <tbody><tr>
            <td><input type="radio" name="Type_raccordement" value="PitagoraSystem">Raccordement Pitagora</td>
            <td><input type="radio" name="Type_raccordement_3" value="Master"><label id="txt1">Maitre</label></td>
        </tr>
        <tr>
            <td><input type="radio" name="Type_raccordement" value="StandartSystem">Raccordement standard</td>
            <td><input type="radio" name="Type_raccordement_3" value="SlaveWithoutButtons"><label id="txt2">Esclave sans appels palier</label></td>
        </tr>
        <tr>
            <td><input type="radio" name="Type_raccordement_2" value="Simplex" onclick="cacher_groupe3(true)">Simplex</td>
            <td><input type="radio" name="Type_raccordement_3" value="SlaveWithButtons"><label id="txt3">Esclave avec appels palier</label></td>
        </tr>
        <tr>
            <td><input type="radio" name="Type_raccordement_2" value="Duplex" onclick="cacher_groupe3(false)">Duplex</td>
            <td></td>
        </tr>
    </tbody></table>
</fieldset>
</form>

</body>
<html>


explication :
l'evenement "onclick" appelle la fonction avec en argument 'true' (cacher) ou 'false' (afficher).
en l'occurence je n'utilise pas d'id pour les radios, j'identifie le groupe de radio boutons avec
var radios = document.forms[0].Type_raccordement_3;

puis je fait une boucle sur le contenu, ca evite d'utilisier des id.
en revanche pour cache aussi les textes a cotés, on est obligé, c'est pour cela que j'ai rajouté des 'labels'.

si tu a besoin de plus d'explications hésite pas !
0
Merci
ah oui :

-le
<body onload="cacher_groupe3(true)">
est pour cacher le groupe dés le depart du formulaire

-le
forms[0]
evite d'avoir a donner un nom a ta balise form, ca prend le premier formulaire du document. mais autant mettre un 'name' c'est mieux ca servira a un moment ou a un autre.
0
Merci
en gros tu a deux moyens de modifier les proprietes d'un objet en javascript.

exemple avec le formulaire nommé 'monformulaire' et le champ ' monchamp' qui est un champ texte classique :


soit tu accède par le formulaire en utilisant les proprietes 'name' comme ceci :
document.monformulaire.monchamp.value


soit tu met un id a 'monchamp', et tu y accéde directement ou qu'il soit placés dans ta page :
document.getElementById('id_de_monchamp').value
0
Merci
C'est bon, ca tourne sans probleme, merci BoOst ;)
0
Merci
cool

le javascript c'est tres puissant mais aussi tres chiant, c'est pas evident au debut..
bon courage !