Rechercher : dans
Par :

Gestion evenement JavaScript

Dernière réponse le 21 mai 2008 à 23:07:05 Absinthe, le 21 mai 2008 à 22:10:20 
 Signaler ce message aux modérateurs

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 ?
Configuration: Windows XP
Internet Explorer 7.0

Meilleures réponses pour « Gestion evenement JavaScript » dans :
Javascript - Les événements Voir Qu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est...
Javascript - Manipulation des contrôles clavier VoirManipulation des contrôles clavier Cette astuce a pour but de vous faire découvrir la (ou du moins une) manière de contrôler les évènements clavier en javascript. Cela vous permettra de contrôler/attribuer les/des comportements particuliers à...
[Multimédia] Gestion multimédia VoirLogiciels de gestion multimédia Par gestion multimédia, comprenons : l'affichage des images sous formes de vignettes, la gestion d'albums de photos, la lecture de fichiers audio, la visualisation de vidéos, éventuellement des possibilités...
Gestionnaire de périphériques VoirCet article a pour but de vous aider à manipuler le gestionnaire des périphériques... :-) Vous pouvez utiliser le Gestionnaire de périphériques pour mettre à jour les pilotes (ou les logiciels) des périphériques matériels, modifier les paramètres...
Javascript - L'objet Date VoirLes particularités de l'objet Date L'objet Date permet de travailler avec toutes les variables qui concernent les dates et la gestion du temps. Il s'agit d'un objet inclus de façon native dans Javascript, et que l'on peut toujours utiliser. La...
Méthodologie de gestion de projet VoirLa gestion de projet - La nécessité d'une méthodologie claire On appelle « gestion de projet » (éventuellement « conduite de projet ») l'organisation méthodologique mise en œuvre pour faire en sorte que l'ouvrage réalisé par le maître...
Javascript - Implantation du code VoirA quel emplacement insérer le Javascript dans votre page HTML Il existe plusieurs façons d'inclure du JavaScript dans une page HTML : Grâce à la balise En mettant le code dans un fichier Grâce aux événements Dans la balise...

1

pepe cyril, le 21 mai 2008 à 22:33:15

Il suffit de prendre ton élément est de le "dégriser" avec la propriété disabled:

ton_formulaire.Master.disabled=false;

Répondre à pepe cyril

2

Absinthe, le 21 mai 2008 à 22:40:49

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) ??

Répondre à Absinthe

3

BoOst, le 21 mai 2008 à 22:47:02

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 !

Répondre à BoOst

4

BoOst, le 21 mai 2008 à 22:50:08

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.

Répondre à BoOst

5

BoOst, le 21 mai 2008 à 22:58:24

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

Répondre à BoOst

6

Absinthe, le 21 mai 2008 à 23:02:45

C'est bon, ca tourne sans probleme, merci BoOst ;)

Répondre à Absinthe

7

 BoOst, le 21 mai 2008 à 23:07:05

Cool

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

Répondre à BoOst
Collection CommentÇaMarche.net