Fonction qui ne s'exécute pas (Disable/Enable textbox) [Résolu]

10/01/2011, 15h37

Bonjour à toutes et tous,

Tout d'abord, bonne année à vous

Et comme d'habitude je vous expose en premier lieu ma situation.

Donc j'ai un formulaire avec plusieurs input de type text et des select.

Voici un morceau du formulaire:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<tr> <!-- Fictif -->
	<td class="txtL">Fictif</td>
	<td>
		<select id="fictif" name="f_fictif" onchange="check_fictif_matricule(this.value);">
			<option value="0">Non</option>
			<option value="1">Oui</option>
		</select>
	</td>
	<td id="hfictif" class="hidden">Ce champ est obligatoire</td>
</tr>
<tr> <!-- Matricule -->
	<td class="txtL">Matricule</td>
	<td><input id="matricule" type="text" name='f_matricule' maxlength="32" size="35"/></td>
	<td id="hmatricule" class="hidden">Ce champ est obligatoire</td>
</tr>

Je souhaite faire en sorte que lorsque l'utilisateur choisit l'option "OUI" dans le select "Fictif", le input "Matricule" deviennent "disable", autrement dit qu'il soit désactivé. Et dans le cas où, l'option choisit est "NON" que le input deviennent "enable".

J'ai donc créé une petite fonction JS mais je suis sans résultat pour le moment, il ne se passe rien.

Voici la fonction JS que j'ai mis en place.

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function check_fictif_matricule(value)
{
	if ( value == 1 )document.form_ajouter_agent.f_matricule.disabled = true;
	else document.form_ajouter_agent.f_matricule.disabled = false;
}

Mon formulaire s'appelle: form_ajouter_agent
Mon script est bien renseigné dans mon <head> HTML.
Ma fonction est appelée à l'évènement onchange sur le select.

Quelques choses doit m'échapper ou alors je m'y prend mal pour récupérer la valeur de mon select et donc je ne peux pas parvenir à changer l'état disabled/enabled de mon input.

Que me conseilleriez-vous? Y a t il une autre solution?

Merci par avance à ceux qui me liront et peut-être répondrons.

Encore bonne année tout le monde

10/01/2011, 18h02

Re-bonjour(soir),

Bon j'ai effectué plusieurs tests sur mon script et sur l'évènement 'onchange' du select.

J'en arrive à la conclusion que l'évènement onchange ne se produit pas. J'ai essayé avec onselect également aucun évènement ne se produit.

Y a t il un évènement qui peut être géré en JS lorsque la valeur sectionnée d'un <SELECT ...> change?

Je sèche complètement sur la question et même mon ami google ne parvient pas à m'aider sur ce coup là.

Je m'en remet totalement à vous maintenant.

11/01/2011, 10h38

Bonjour tout le monde.

Je constate que personne n'est en mesure de m'aider

Hier j'ai trouvé une source HTML+JS qui fait ce que je souhaite faire avec une checkbox.

J'ai copié et adapté le code tout en gardant la checkbox. Sur le source original tout fonctionne correctement mais dans mon source rien ne marche.

Toute mes fonctions JS fonctionne bien sauf celle ci.

J'ai mis des "alert" dans les différentes parties du code pour vérifier que la fonction est bien appelée. Et ce n'est plus le cas! Je n'arrive pas à savoir pourquoi.

Citation:

Envoyé par Note de l'auteur du source qui suit

Vous trouverezici plusieurs fonctions qui vont vous permettre de :

Activer/désactiver un champ en cliquant sur une case à cocher
Choisir le nombre de champs activés (les champs sont activés du 1er jusqu'à celui en face du bouton radio inclus)
Recopier un champ dans un autre quand une case est cochée

A savoir que seulement le premier point m'intéresse, Activer/Désactiver un champ en cliquant sur une case à cocher

Code La source HTML+JS qui fonctionne bien :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<script type='text/javascript'>
 
function t(num)
{
	for (var i = 1; i <= 5; i++) {
		disableInput(("t" + i), (i > num));
	}
}
 
function copieInput(idInputSource, idInputResult, idCheckBox)
{
	var inputS = document.getElementById(idInputSource);
	var inputR = document.getElementById(idInputResult);
	var checkbox = document.getElementById(idCheckBox);
 
	if (checkbox.checked == false) {
		disableInput(idInputResult, false);
	} else {
		disableInput(idInputResult, true);
		inputR.value = inputS.value;
	}
}
 
function disableInput(idInput, valeur)
{
	var input = document.getElementById(idInput);
	input.disabled = valeur;
 
	if (valeur) {
		input.style.background = "#CCC";
		BSajoute(idInput);
	} else {
		input.style.background = "#FFF";
		BSsuppr(idInput);
	}
}
 
function BSajoute(idInput)
{
	for (var i = 0; i < tableauBS.length; i++) {
		if (tableauBS[i] == idInput) {
			return;
		}
	}
	tableauBS.push(idInput);
}
 
function BSsuppr(idInput)
{
	for (var i = 0; i < tableauBS.length; i++) {
		if (tableauBS[i] == idInput) {
			alert(idInput + " supprimé à la position " + i + "\n" +tableauBS);
			tableauBS.splice(i, 1);
			return;
		}
	}
}
 
/**
* A appeler dans le onsubmit du form pour que
* les champs puissent transmettre leurs valeurs
*/
 
function activeBeforeSubmit()
{
	while (tableauBS.length > 0) {
		var idInput = tableauBS.pop();
 
		var input = document.getElementById(idInput);
		input.disabled = false;
	}
}
</script>
 
 
 
<fieldset>
<legend>Activer/désactiver un champ en cliquant sur une case à cocher</legend>
<input name="active" id="idactive" onclick="disableInput('ida', this.checked);" type="checkbox" />
<input name="a" id="ida" type="text" />
</fieldset>
<fieldset>
<legend>Choisir le nombre de champs activés
(les champs sont activés du 1er jusqu'à celui en face du bouton radio inclus)</legend>
<table>
<tbody>
<tr>
              <td><input name="to" value="1" onclick="t(1);" type="radio"></td>
              <td><input name="t1" id="t1" value="aaaaa" type="text"></td>
            </tr>
            <tr>
              <td><input name="to" value="2" onclick="t(2);" type="radio"></td>
              <td><input name="t2" id="t2" value="bbbbb" type="text"></td>
            </tr>
            <tr>
              <td><input name="to" value="3" onclick="t(3);" checked="checked" type="radio"></td>
 
              <td><input name="t3" id="t3" value="ccccc" type="text"></td>
            </tr>
            <tr>
              <td><input name="to" value="4" onclick="t(4);" type="radio"></td>
              <td><input disabled="disabled" name="t4" id="t4" value="ddddd" type="text"></td>
            </tr>
            <tr>
              <td><input name="to" value="5" onclick="t(5);" type="radio"></td>
              <td><input disabled="disabled" name="t5" id="t5" value="eeeee" type="text"></td>
            </tr>
          </tbody>
</table>
</fieldset>
<fieldset>
<legend>Recopier dans le champ de droite quand la case est cochée</legend>
<input name="s7" id="s7" onkeyup="copieInput('s7', 'r7', 'copie');" type="text" />
<input id="copie" onclick="copieInput('s7', 'r7', 'copie');" type="checkbox" />
<input name="r7" id="r7" type="text" />
</fieldset>

L'absence de commentaire dans ce code n'en facilite pas la compréhension surtout au sujet des fonctions BSajoute et BSsuppr, ainsi que de la variable tableauBS. Je n'ai pas réussi à déterminer de quoi il s'agissait.

Bref en reprenant une partie de ce code j'ai codé ceci:

Fichier: check_forms.js

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function check_fictif(value)
{
	alert(value);
	document.getElementById("matricule").disabled = value;
	alert("Après getElementById");
	if (value)
	{
		document.getElementById("matricule").style.background = "#CCC";
		alert("dans value = true");
	}
	else
	{
		document.getElementById("matricule").style.background = "#FFF";
		alert("dans value = false");
	}
}

Fichier: agent.php

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<?php
	/* Démarrer la session - Vérification que l'utilisateur est connecté pour afficher cette page - Connexion à MySQL */
?>
<!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" lang="en" xml:lang="en">
	<head>
		<title>PSI Sécurité - Liste des agents</title>
		<link rel="stylesheet" media="screen" type="text/css" title="PSI" href="./style/stylepsi.css" />
		<script src="./scripts/graphic_view.js" type="text/javascript" language="JavaScript"></script>
		<script src="./scripts/check_forms.js" type="text/javascript" language="JavaScript"></script> <!-- APPEL DE MON FICHIER .JS QUI CONTIENT function check_fictif() -->
	</head>
 
	<body>
		<?php include("./menu.php"); ?>
		<br />
		<div id="content">
			<div id="navMain">
				<?php include("./nav.php"); ?>
				<br />
				<a href="./index.php">Accueil</a> > Liste des agents
			</div>
			<br />
			<div id="gestionTab" class="visible"> <!-- LISTE DES AGENTS //// un bout de JS permet de cacher ce bloc (gestionTab) et d'afficher le suivant (addForm) (et inversement bien entendu) -->
				<!-- Différentes requêtes pour MySQL sont faites pour créer et remplir un tableau contenant les informations sur les agents -->
			</div>
 
			<div id="addForm" class="hidden"> <!-- AJOUTER UN AGENT -->
				<div class="btn_mini_tool" onclick="return view_gestionTab();"><img src="./picture/add_agent.png" alt="Ajouter un agent"/> Retour</div> <!-- Cacher le bloc addForm et afficher le bloc gestionTab -->
				<br />
				<div>
				<h2>Ajouter un agent</h2>
				<form name='form_ajouter_agent' method='post' action='./gestionAgent.php'> <!-- Formulaire d'ajout d'un agent --> 
					<table>
						<tr> <!-- Nom -->
							<td class="txtL">Nom</td>
							<td><input id="nom" type="text" name='f_nom' maxlength="32" size="35"/></td>
							<td id="hnom" class="hidden">Ce champ est obligatoire</td>
						</tr>
						<tr> <!-- Prenom -->
							<td class="txtL">Prénom</td>
							<td><input id="prenom" type="text" name='f_prenom' maxlength="32" size="35"/></td>
							<td id="hprenom" class="hidden">Ce champ est obligatoire</td>
						</tr>
						<tr> <!-- Fictif --> <!-- MA FONCTION JS QUI NE FONCTIONNE PAS ICI -->
							<td class="txtL">Fictif</td> 
							<td>
								<input name="f_fictif" id="fictif" type="checkbox" onclick="check_fictif(this.checked);" /> 
							</td>
							<td id="hfictif" class="hidden">Ce champ est obligatoire</td>
						</tr>
						<tr> <!-- Matricule --> <!-- LE TEXTBOX QUE JE VEUX ACTIVER/DESACTIVER -->
							<td class="txtL">Matricule</td> 
							<td><input id="matricule" type="text" name='f_matricule' maxlength="32" size="35" /></td>
							<td id="hmatricule" class="hidden">Ce champ est obligatoire</td>
						</tr>
						<tr> <!-- Categorie -->
							<td class="txtL">Catégorie</td>
							<td>
								<select id="categorie" name="f_categorie[]">
									<?php 
										/* Recuperation des categories */
										$querry0 = "SELECT * FROM t_categories ORDER BY ca_id";
										$return0 = mysql_query($querry0) or die(mysql_error());
										while ($data0 = mysql_fetch_array($return0))
										{
											$rqt_id_categorie = $data0['ca_id'];
											$rqt_nom_categorie = $data0['ca_nom'];
 
											echo '<option value="' . $rqt_id_categorie . '">' . $rqt_nom_categorie . '</option>';
										}
									?>
								</select>
							</td>
							<td id="hcategorie" class="hidden">Ce champ est obligatoire</td>
						</tr>
						<tr> <!-- Region -->
							<td class="txtL">Région</td>
							<td>
								<select id="region" name="f_region">
									<?php
										/* Recuperation des regions */
										$querry1 = "SELECT * FROM t_regions ORDER BY re_id";
										$return1 = mysql_query($querry1) or die(mysql_error());
										while ($data1 = mysql_fetch_array($return1))
										{
											$rqt_id_region = $data1['re_id'];
											$rqt_nom_region = $data1['re_nom'];
											echo '<option value="' . $rqt_id_region . '">' . $rqt_nom_region . '</option>';
										}
									?>
								</select>
							</td>
							<td id="hregion" class="hidden">Ce champ est obligatoire</td>
						</tr>
						<tr> <!-- Actif -->
							<td class="txtL">Actif</td>
							<td>
								<input name="f_actif" id="actif" type="checkbox" />
							</td>
							<td id="hactif" class="hidden">Ce champ est obligatoire</td>
						</tr>
					</table>
					<br />
					<input id="button" type="submit" value="Ajouter"/><br /><!--  onclick='return check_form_ajouter_agent();'   -->
				</form>
				</div>
			</div>
 
		</div>
	</body>
</html>
<?php
	/* Fermeture de la connexion à la base */
	mysql_close($idConn);
?>

J'ai enlever les parties de code qui prennent trop de place mais j'en ai laissé un bon morceau quand même dans le cas ou mon erreur serait ailleurs.

Voilà si quelqu'un peut prendre le temps d'y jeter un coup d'oeil ça serait vraiment sympa.

11/01/2011, 12h27

Bon je tiens a remercier: sayari.dev qui m'a rappeler qu'il fallait faire gaffe a la syntaxe

Donc plusieurs petites choses:

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function check_fictif(value valueCheckbox)
{
	document.getElementById("matricule").disabled = value valueCheckbox;
	if (value valueCheckbox)
	{
		document.getElementById("matricule").style.background = "#CCC";
	}
	else
	{
		document.getElementById("matricule").style.background = "#FFF";
	}
}

Et n'oubliez pas de vérifier la syntaxe de vaut fonction précédente si vous avez toujours un problème.

Moi j'avais un if() (sans condition) forcement ça marche moins bien d'un coup.

Donc voilà un problème ~~à la con~~ de résolu.

10/01/2011, 18h02	#2
skandhal Invité(e) Messages : n/a Détails du profil Informations forums : Messages : n/a Points : 0	Re-bonjour(soir), Bon j'ai effectué plusieurs tests sur mon script et sur l'évènement 'onchange' du select. J'en arrive à la conclusion que l'évènement onchange ne se produit pas. J'ai essayé avec onselect également aucun évènement ne se produit. Y a t il un évènement qui peut être géré en JS lorsque la valeur sectionnée d'un <SELECT ...> change? Je sèche complètement sur la question et même mon ami google ne parvient pas à m'aider sur ce coup là. Je m'en remet totalement à vous maintenant.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email