IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Fonction qui ne s'exécute pas (Disable/Enable textbox)


Sujet :

JavaScript

  1. #1
    skandhal
    Invité(e)
    Par défaut Fonction qui ne s'exécute pas (Disable/Enable textbox)
    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
    Dernière modification par skandhal ; 11/01/2011 à 10h55. Motif: Changement de titre

  2. #2
    skandhal
    Invité(e)
    Par défaut
    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.

  3. #3
    skandhal
    Invité(e)
    Par défaut
    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.


  4. #4
    skandhal
    Invité(e)
    Par défaut
    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.

Discussions similaires

  1. Fonction qui ne s'exécute pas
    Par DripKi_13 dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 25/09/2014, 21h51
  2. Fonction qui ne s'exécute pas - Grand débutant !
    Par Lobstagg dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 24/04/2014, 11h17
  3. [MySQL] Fonction php stockée dans ma DB qui ne s'exécute pas
    Par steiner62 dans le forum PHP & Base de données
    Réponses: 22
    Dernier message: 30/10/2008, 15h05
  4. Fonction Javascript qui ne s'exécute pas
    Par bubuche007 dans le forum Général JavaScript
    Réponses: 15
    Dernier message: 25/01/2007, 11h17
  5. [MySQL] requete sql qui ne s'exécute pas
    Par anto48_4 dans le forum PHP & Base de données
    Réponses: 15
    Dernier message: 16/03/2006, 09h12

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo