Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
JavaScript Forum programmation JavaScript. Lire : Cours JavaScript, FAQ JavaScript, Toutes les FAQ JavaScript et Sources JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
Vieux 04/12/2009, 10h29   #1
Membre actif
 
Avatar de arthuro45
 
Arthur Salomon
Inscription : juillet 2009
Messages : 581
Détails du profil
Informations personnelles :
Nom : Arthur Salomon
Localisation : France, Essonne (Île de France)

Informations forums :
Inscription : juillet 2009
Messages : 581
Points : 199
Points : 199
Par défaut Checkbox : Récupérer valeur si pas coché

Bonjour,

cette fonction fonctionne quand je coche la case, mais quand je décoche rien ne se passe. Je veux griser un bouton en fonction de l'état du checkbox.

Code :
1
2
3
4
5
6
7
8
function apparait()
{
 if (document.form1.choix.checked){
	document.getElementById('valid_select').disabled=true;
	}else{
	document.getElementById('valid_select').disabled=false;
	}
}
Merci
arthuro45 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/12/2009, 10h32   #2
Responsable Modération
 
Homme
Inscription : janvier 2007
Messages : 9 034
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2007
Messages : 9 034
Points : 14 564
Points : 14 564
Bonjour,
il faudrait voir le code HTML associé, avec l'appel de la fonction ...

A+
E.Bzz est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/12/2009, 11h13   #3
Rédacteur/Modérateur
 
Avatar de andry.aime
 
Homme Andry Aimé
Inscription : septembre 2007
Messages : 4 766
Détails du profil
Informations personnelles :
Nom : Homme Andry Aimé
Localisation : Ile Maurice

Informations forums :
Inscription : septembre 2007
Messages : 4 766
Points : 6 718
Points : 6 718
Bonjour,
+1E.Bzz
Mais tu peux simplifier ton code.
Code :
1
2
3
4
function apparait()
{
  document.getElementById('valid_select').disabled=document.form1.choix.checked;
}
andry.aime est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/12/2009, 11h49   #4
Membre actif
 
Avatar de arthuro45
 
Arthur Salomon
Inscription : juillet 2009
Messages : 581
Détails du profil
Informations personnelles :
Nom : Arthur Salomon
Localisation : France, Essonne (Île de France)

Informations forums :
Inscription : juillet 2009
Messages : 581
Points : 199
Points : 199
Citation:
Mais tu peux simplifier ton code.

Code :
function apparait()
{
document.getElementById('valid_select').disabled=document.form1.choix.checked;
}
Mais ça ne grise pas le bouton quand je décoche.

Le code HTML est un tableau je vous met une partie simplifiée :

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
<head>
</head>
<body>
<button type="submit" name="valid_select" id="valid_select" disabled="disabled">Valider la sélection</button>
<table id="tableau">
<thead>
<tr>
<th><input type="checkbox" name="all" id="all" onclick="selectall(document.form1.all,document.form1.choix)"><br>Tous</th>
<th>tab1</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choix" id="choix" value="1" onclick="apparait()"></td>
<td>donnee</td>
</tr>
</tbody>
</table>
</body>
</html>
arthuro45 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/12/2009, 12h01   #5
Responsable Modération
 
Homme
Inscription : janvier 2007
Messages : 9 034
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2007
Messages : 9 034
Points : 14 564
Points : 14 564
Citation:
Envoyé par arthuro45 Voir le message
Mais ça ne grise pas le bouton quand je décoche.
Simplifier un code est différent de corriger une erreur.
La suggestion d'Andry reste donc tout à fait valable

Citation:
Envoyé par arthuro45 Voir le message
Le code HTML est un tableau je vous met une partie simplifiée
Sauf dans les cas extrêmes, mieux vaut ne pas simplifier
Ici par exemple, tu te retrouves avec un type="submit" qui n'est pas dans un form (pour nous, car je suppose que le form existe bien, mais on ne peut t'aider que sur le code que tu nous montres).
Au passage, la balise <button> est dépréciée et ne peut de toutes façons pas être de type="submit" => à remplacer par un input type="submit"!

Donc, le code complet serait préférable ...

A+
E.Bzz est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/12/2009, 12h57   #6
Membre actif
 
Avatar de arthuro45
 
Arthur Salomon
Inscription : juillet 2009
Messages : 581
Détails du profil
Informations personnelles :
Nom : Arthur Salomon
Localisation : France, Essonne (Île de France)

Informations forums :
Inscription : juillet 2009
Messages : 581
Points : 199
Points : 199
Le code comprend du PHP, requêtes ect... pas essentiel pour le test, donc j'ai ajouté les fonctions Javascript dans le head pour l'essai et cela donne un petit tableau exploitable :

Code :
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
<html>
<head>
<script language="JavaScript">
function selectall(cas,choix){
  //test si on a plusieur ligne
  if(choix.length>0){
    if (cas.checked){
      for (var i=0; i<choix.length;i++){
        choix[i].checked=true //On coche tous
      }
	document.getElementById('valid_select').disabled=false;  
    }
    else{
      for (var i=0; i<choix.length;i++){
        choix[i].checked=false //On décoche tous
      }
	document.getElementById('valid_select').disabled=true;
    }
  }	
} 
 
function apparait()
{
 if (document.form1.choix.checked){
	document.getElementById('valid_select').disabled=true;
	}else{
	document.getElementById('valid_select').disabled=false;
	}
}   
</script>
</head>
<body>
<?php 
$self = $_SERVER['PHP_SELF'];
echo "<form method='POST' action='$self' name='form1' id='form1'>\n"; ?>
<button type="submit" name="valid_select" id="valid_select" disabled="disabled">Valider la sélection</button>
<table border="1" id="tableau">
<thead>
<tr>
<th><input type="checkbox" name="all" id="all" onclick="selectall(document.form1.all,document.form1.choix)"><br>Tous</th>
<th>col1</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="choix" id="choix" value="1" onclick="apparait()"></td>
<td>donnee1</td>
</tr>
<tr>
<td><input type="checkbox" name="choix" id="choix" value="1" onclick="apparait()"></td>
<td>donnee2</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
arthuro45 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/12/2009, 13h12   #7
Rédacteur/Modérateur
 
Avatar de andry.aime
 
Homme Andry Aimé
Inscription : septembre 2007
Messages : 4 766
Détails du profil
Informations personnelles :
Nom : Homme Andry Aimé
Localisation : Ile Maurice

Informations forums :
Inscription : septembre 2007
Messages : 4 766
Points : 6 718
Points : 6 718
Le code HTML généré mais pas le php
Citation:
<button type="submit" name="valid_select" id="valid_select" disabled="disabled">Valider la sélection</button>
à remplacer par
Code :
<input type="submit" name="valid_select" id="valid_select" disabled="disabled" value="Valider la sélection"/>
Comme l'a dit E.Bzz.
Citation:
<td><input type="checkbox" name="choix" id="choix" value="1" onclick="apparait()"></td>
<td>donnee1</td>
</tr>
<tr>
<td><input type="checkbox" name="choix" id="choix" value="1" onclick="apparait()"></td>
Un id doit être unique dans un document.
andry.aime est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/12/2009, 13h42   #8
Membre actif
 
Avatar de arthuro45
 
Arthur Salomon
Inscription : juillet 2009
Messages : 581
Détails du profil
Informations personnelles :
Nom : Arthur Salomon
Localisation : France, Essonne (Île de France)

Informations forums :
Inscription : juillet 2009
Messages : 581
Points : 199
Points : 199
Citation:
Un id doit être unique dans un document.
Je pense que le problème vient de là. Les checkbox sont générés par un while en fonction du nombre d'entrées dans ma table, donc ils ont forcément le même id. Comment contourner ce problème ?

Le code avec le PHP :

Code :
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
<html>
<head>
<script language="JavaScript">
function selectall(cas,choix){
  //test si on a plusieur ligne
  if(choix.length>0){
    if (cas.checked){
      for (var i=0; i<choix.length;i++){
        choix[i].checked=true //On coche tous
      }
	document.getElementById('valid_select').disabled=false;  
    }
    else{
      for (var i=0; i<choix.length;i++){
        choix[i].checked=false //On décoche tous
      }
	document.getElementById('valid_select').disabled=true;
    }
  }	
} 
 
function apparait()
{
 if (document.form1.choix.checked){
	document.getElementById('valid_select').disabled=false;
	}else{
	document.getElementById('valid_select').disabled=true;
	}
}   
</script>
</head>
<body>
<?php echo "<form method='POST' action='$self' name='form1' id='form1'>\n"; ?>
<input type="submit" name="valid_select" id="valid_select" disabled="disabled" value="Valider la sélection"/>
<table border="1" id="tableau">
<thead>
<tr>
<th><input type="checkbox" name="all" id="all" onclick="selectall(document.form1.all,document.form1.choix)"><br>Tous</th>
<th>col1</th>
</tr>
</thead>
<?php
$requete = mysql_query("select champ from table");
while($row = mysql_fetch_array($requete)){
?>	
<tbody>
<tr>
<td><input type="checkbox" name="choix" id="choix" value="1" onclick="apparait()"></td>
<td><?php echo $row['champ']; ?></td>
</tr>
</tbody>
<?php } ?>
</table>
</form>
</body>
</html>
arthuro45 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/12/2009, 13h44   #9
Responsable Développement Web

 
Avatar de Bovino
 
Homme Didier Mouronval
Développeur Web
Inscription : juin 2008
Messages : 12 834
Détails du profil
Informations personnelles :
Nom : Homme Didier Mouronval
Âge : 41
Localisation : France, Gironde (Aquitaine)

Informations professionnelles :
Activité : Développeur Web
Secteur : High Tech - Éditeur de logiciels

Informations forums :
Inscription : juin 2008
Messages : 12 834
Points : 29 886
Points : 29 886
Citation:
Envoyé par arthuro45 Voir le message
Comment contourner ce problème ?
En incrémentant un compteur dans le while pour le coller à l'id par exemple...
__________________
Pas de question technique par MP !
Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi !
Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
Mon livre sur jQuery
Bovino est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/12/2009, 14h25   #10
Membre actif
 
Avatar de arthuro45
 
Arthur Salomon
Inscription : juillet 2009
Messages : 581
Détails du profil
Informations personnelles :
Nom : Arthur Salomon
Localisation : France, Essonne (Île de France)

Informations forums :
Inscription : juillet 2009
Messages : 581
Points : 199
Points : 199
Citation:
En incrémentant un compteur dans le while pour le coller à l'id par exemple...
Bonne idée mais comment insérer ça dans le while, il y a déjà une condition?
arthuro45 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/12/2009, 14h27   #11
Responsable Modération
 
Homme
Inscription : janvier 2007
Messages : 9 034
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2007
Messages : 9 034
Points : 14 564
Points : 14 564
Citation:
Envoyé par arthuro45 Voir le message
Bonne idée mais comment insérer ça dans le while, il y a déjà une condition?
Peu importent les conditions et le contenu actuel du while() : ce compteur ne modifie pas le fonctionnement de la boucle.
Tu initialise ton compteur avant la boucle,
puis à chaque "tour", tu concatènes ce compteur à la partie fixe de l'id,
puis tu l'incrémentes pour le passage suivant.

Le reste du while() demeure identique ...

A+
E.Bzz est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/12/2009, 14h39   #12
Membre actif
 
Avatar de arthuro45
 
Arthur Salomon
Inscription : juillet 2009
Messages : 581
Détails du profil
Informations personnelles :
Nom : Arthur Salomon
Localisation : France, Essonne (Île de France)

Informations forums :
Inscription : juillet 2009
Messages : 581
Points : 199
Points : 199
Ok maintenant j'ai bien un id différent pour chaque entrée sur mes checkbox, mais je ne peux plus récupérer leur valeurs pour savoir si elles sont cochées ou pas.

Code :
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
<html>
<head>
<script language="JavaScript">
function selectall(cas,choix){
  //test si on a plusieur ligne
  if(choix.length>0){
    if (cas.checked){
      for (var i=0; i<choix.length;i++){
        choix[i].checked=true //On coche tous
      }
	document.getElementById('valid_select').disabled=false;  
    }
    else{
      for (var i=0; i<choix.length;i++){
        choix[i].checked=false //On décoche tous
      }
	document.getElementById('valid_select').disabled=true;
    }
  }	
} 
 
function apparait()
{
 if (document.form1.choix.checked){
	document.getElementById('valid_select').disabled=false;
	}else{
	document.getElementById('valid_select').disabled=true;
	}
}   
</script>
</head>
<body>
<?php echo "<form method='POST' action='$self' name='form1' id='form1'>\n"; ?>
<input type="submit" name="valid_select" id="valid_select" disabled="disabled" value="Valider la sélection"/>
<table border="1" id="tableau">
<thead>
<tr>
<th><input type="checkbox" name="all" id="all" onclick="selectall(document.form1.all,document.form1.choix)"><br>Tous</th>
<th>col1</th>
</tr>
</thead>
<?php
$requete = mysql_query("select id,champ from table");
$i = 1;
while($row = mysql_fetch_array($requete)){
$compteur = $i++;
?>	
<tbody>
<tr>
<td><td class='check'><input type="checkbox" name="<?php echo $compteur; ?>" id="<?php echo $compteur; ?>" value="<?php echo $row['id']; ?>" onclick="apparait()"></td></td>
<td><?php echo $row['champ']; ?></td>
</tr>
</tbody>
<?php } ?>
</table>
</form>
</body>
</html>
arthuro45 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/12/2009, 14h51   #13
Responsable Modération
 
Homme
Inscription : janvier 2007
Messages : 9 034
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2007
Messages : 9 034
Points : 14 564
Points : 14 564
Citation:
Envoyé par arthuro45 Voir le message
Ok maintenant j'ai bien un id différent pour chaque entrée sur mes checkbox, mais je ne peux plus récupérer leur valeurs pour savoir si elles sont cochées ou pas.
Relis bien ce qui t'a été dit : personne n'a parlé des name : un name n'a pas à être unique dans la page ...
Il ne s'agissait que des ID.
Par ailleurs, tu devrait conserver une partie fixe à tes id et la concaténer au compteur.

A+
E.Bzz est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/12/2009, 15h08   #14
Membre actif
 
Avatar de arthuro45
 
Arthur Salomon
Inscription : juillet 2009
Messages : 581
Détails du profil
Informations personnelles :
Nom : Arthur Salomon
Localisation : France, Essonne (Île de France)

Informations forums :
Inscription : juillet 2009
Messages : 581
Points : 199
Points : 199
Ok j'ai fais les modifications :

Code :
1
2
3
4
5
6
7
8
9
<?php
$requete = mysql_query("select id,champ from table");
$i = 1;
while($row = mysql_fetch_array($requete)){
$compteur = "choix".$i++;
?>	
<tbody>
<tr>
<td><td class='check'><input type="checkbox" name="choix" id="<?php echo $compteur; ?>" value="<?php echo $row['id']; ?>" onclick="apparait()"></td></td>
Mais comment récupérer les valeurs des checkbox dans les fonctions ?
arthuro45 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/12/2009, 15h51   #15
Responsable Modération
 
Homme
Inscription : janvier 2007
Messages : 9 034
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2007
Messages : 9 034
Points : 14 564
Points : 14 564
Citation:
Envoyé par arthuro45 Voir le message
Mais comment récupérer les valeurs des checkbox dans les fonctions ?
Ben pareil qu'avant justement : dans selectall() en parcourant ton tableau choix[]

D'ailleurs, ça permet de mettre le doigt sur le problème à l'origine de cette discussion : dans la fonction apparait() tu utilisais
Code :
document.form1.choix.checked
alors que ça aurait dû être de la forme
Code :
document.form1.choix[i].checked
puisqu'avec des name communs, il s'agit d'un tableau d'éléments

Pour éviter d'avoir à gérer un indice de tableau dans cette fonction, je te suggère de modifier ta fonction (en reprenant la suggestion d'Andry, puisque tu n'as pas l'air convaincu ) :
Code :
1
2
3
4
function apparait(obj)
{
document.getElementById('valid_select').disabled=obj.checked;
}
et donc l'appel, dans chaque checkbox :
Code :
onclick="apparait(this);"
EDIT : au fait : non tu n'as pas fait toutes les modifications. Tu n'as pas intégrer de partie fixe en début de tes id ...

A+
E.Bzz est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 04/12/2009, 15h54   #16
Responsable Modération
 
Homme
Inscription : janvier 2007
Messages : 9 034
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2007
Messages : 9 034
Points : 14 564
Points : 14 564
... et c'est quoi ces
Code :
<td><td>......</td></td>


J'espère que ce n'est qu'un problème de copier/coller

A+
E.Bzz est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 07/12/2009, 10h49   #17
Membre actif
 
Avatar de arthuro45
 
Arthur Salomon
Inscription : juillet 2009
Messages : 581
Détails du profil
Informations personnelles :
Nom : Arthur Salomon
Localisation : France, Essonne (Île de France)

Informations forums :
Inscription : juillet 2009
Messages : 581
Points : 199
Points : 199
Citation:
... et c'est quoi ces
Code :
<td><td>......</td></td>
oups, c'est une erreur (corrigée).

Citation:
EDIT : au fait : non tu n'as pas fait toutes les modifications. Tu n'as pas intégrer de partie fixe en début de tes id ...
Si si j'ai concaténé :

Code :
$compteur = "choix".$i++;
EDIT :
Citation:
Pour éviter d'avoir à gérer un indice de tableau dans cette fonction, je te suggère de modifier ta fonction (en reprenant la suggestion d'Andry, puisque tu n'as pas l'air convaincu ) :
Code :
function apparait(obj)
{
document.getElementById('valid_select').disabled=obj.checked;
}
Cette fonction donne le résultat inverse : quand je coche ça disable.

Je connaissais pas cette cette syntaxe : disabled=obj.checked
Comment fais-t'on pour récupérer la value ?

Le but ultime est de récupérer la ou les value(s) des checkbox sélectionnées, d'ouvrir un popup pour modifier les entrées affichées dans la popup.

Dernière modification par arthuro45 ; 07/12/2009 à 11h02.
arthuro45 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 07/12/2009, 14h17   #18
Responsable Modération
 
Homme
Inscription : janvier 2007
Messages : 9 034
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Isère (Rhône Alpes)

Informations forums :
Inscription : janvier 2007
Messages : 9 034
Points : 14 564
Points : 14 564
Citation:
Envoyé par arthuro45 Voir le message
Cette fonction donne le résultat inverse : quand je coche ça disable.
Code :
1
2
3
4
function apparait(obj)
{
document.getElementById('valid_select').disabled=!obj.checked;
}
Citation:
Envoyé par arthuro45 Voir le message
Je connaissais pas cette cette syntaxe : disabled=obj.checked
Comment fais-t'on pour récupérer la value ?
Un peu d'imagination ....

A+
E.Bzz est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 08/12/2009, 12h39   #19
Membre actif
 
Avatar de arthuro45
 
Arthur Salomon
Inscription : juillet 2009
Messages : 581
Détails du profil
Informations personnelles :
Nom : Arthur Salomon
Localisation : France, Essonne (Île de France)

Informations forums :
Inscription : juillet 2009
Messages : 581
Points : 199
Points : 199
Merci pour votre aide.

J'ai fini par boucler sur les checkbox pour ne griser le bouton qu'a la condition que toutes les cases soient non cochées, avec mon niveau :

Code :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function apparait(choix)
{
var total="";
for(var i=0; i < document.form1.choix.length; i++){
	if(document.form1.choix[i].checked){
		total +=document.form1.choix[i].value + "\n"
		}
	}
	if(total==""){
		document.getElementById('valid_select').disabled=true; 
	}else{
		document.getElementById('valid_select').disabled=false;
	}
}
Il me reste à écrire la fonction permettant de récupérer les valeurs des cases cochées et d'ouvrir un popup, je vais le faire en ajax.
arthuro45 est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité Cette discussion est résolue.
Outils de la discussion



Fuseau horaire GMT +1. Il est actuellement 18h28.


 
 
 
 
Partenaires

Hébergement Web