Gestion d'un checkbox pour griser ou non un bouton javascript/php

**LiliValerie** · 30/01/2013, 21h13

Bonjour,
Je souhaite rajouter un bouton type="checkbox" qui me permet de rendre actif ou non un bouton envoyer. Ma difficulté est que je génère une liste contenu de ma page à partir d'une base sql, je ne sais pas comment gérer la gestion individuelle des boutons. Comment puis-je gérer l'id "submite" pour chaque ligne ?
Voici mon code pour la page avec mon script javascript :
Merci pour votre aide

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function affiche_bouton() 
{ 
var isChecked=false;
for (i=0; i<document.getElementsByTagName("input").length; i++)
if (document.getElementsByTagName("input")[i].type=="checkbox")
if (document.getElementsByTagName("input")[i].checked)
isChecked=true;
if (isChecked)
{
document.getElementById('submite').disabled='';
} else {
document.getElementById('submite').disabled='disabled';
}
}

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
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
<div id="content">
 
          <div id="contenu">
 
            <h1 align="center" style="color: #155A97;font-size: 16px;font-family: Arial, Helvetica, sans-serif;border:1px solid #AFD3F3;background-color:#FFFFFF;">Liste</h1>
 
 
            <p style="color: #155A97;font-size: 12px;font-family: Arial, Helvetica, sans-serif;border:0px solid #AFD3F3;background-color:#FFFFFF;">&nbsp;</p>
            <table width="950" border="0" cellspacing="2" cellpadding="2" align="left" style="font-family:Arial; font-size:12px; color:#155a97;padding: 2px;border:1px solid #AFD3F3;background-color:#FFFFFF;" valign=top>
 
                <tr>
                    <th colspan="3" bgcolor="#FAFCFE" ><div align="left">
                      <div align="left" style="color: #9732B2;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:5px;padding-bottom:0px;padding-top:0px;">x</div>
                    </div>                    </th>
                    <th width="5" rowspan="2" bgcolor="#ffffff" style="color: #ffffff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:0px;padding-bottom:0px;padding-top:0px;">&nbsp;</th>
                </tr>
                <tr>
                  <th width="116" bgcolor="#9732B2" style="color: #ffffff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:5px;padding-bottom:0px;padding-top:0px;"><div align="left">CODE </div></th>
                  <th width="326" bgcolor="#9732B2" style="color: #ffffff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:5px;padding-bottom:0px;padding-top:0px;"><div align="left">Titre de l'emailing</div></th>
                  <th width="83" bgcolor="#9732B2" style="color: #ffffff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:5px;padding-bottom:0px;padding-top:0px;">Envoyer</th>
              </tr>
 
 
 
 
 
 
 
 
 
                <?php
                    
                    include('connect.php');
                    
                    $req = mysql_query("SELECT * FROM emailing WHERE `code_emailing` LIKE '%F/E%' ORDER BY date_envoi");
                    while ($data = mysql_fetch_assoc($req)) :
                ?>
 
                <tr>
                    <td valign=top style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#F4E7F8;"><?php echo $data['code_emailing']; ?></td>
                    <td valign=top style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#F4E7F8;"><?php echo $data['titre']; ?></td>
                    <td style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#FAFCFE;" valign=top>
                    <input type="checkbox" name="checkbox" id="checkbox" onClick="affiche_bouton()" />
                    <a onClick="return confirm('Souhaitez-vous vraiment lancer envoi des mails ?');" href="envoiEmail.php?page=<?php echo $data['id']; ?>" >
 <input type="submit" name="button" value="ENVOI" id="submite" disabled="disabled" style="font-family:Arial; font-size:12px; padding: 2px;"/></a>                    </td>
 
                    <td style="font-family:Arial; font-size:12px; color:#155a97;padding: 0px;border-bottom:0px solid #AFD3F3;background-color:#Ffffff;" valign=top>&nbsp;</td>
                </tr>
 
                <?php endwhile; ?>
            </table>
 
 
 
          </div>
        </div>

**andry.aime** · 31/01/2013, 06h58

Bonjour,

En javascript, l'attribut disabled prend une valeur de type booléenne.

A+.

**LiliValerie** · 31/01/2013, 08h38

Bonjour andry.aime,
Comment je peux faire étant donné que ma liste remonte dynamiquement avec des boutons disabled différents ?
Je ne sais pas comment organiser le code.

**andry.aime** · 31/01/2013, 08h43

Envoyé par LiliValerie

Comment je peux faire étant donné que ma liste remonte dynamiquement avec des boutons disabled différents ?
Je ne sais pas comment organiser le code.

Tu peux expliquer ?
Et montre nous le code HTML généré mais pas le code php.

A+.

**Bovino** · 31/01/2013, 08h45

Ton code est mal fait.
Un id doit être unique dans la page.

**LiliValerie** · 31/01/2013, 09h15

En fait, il faut que je récupère mes checkbox cochés dans une boucle.
J'ai essayé de refaire ça comme code mais la mes boutons restent tous incactifs...

Code :

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
<script type="text/javascript">
function affiche_bouton() 
{ 
var isChecked=false;
for (i=0; i<document.getElementsByTagName("input").length; i++)
if (document.getElementsByTagName("input")[i].type=="checkbox")
if (document.getElementsByTagName("input")[i].checked)
isChecked=true;
if (isChecked)
{
document.getElementById('submite').disabled='';
} else {
document.getElementById('submite').disabled='disabled';
}
}
</script>

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
<div id="content">
 
	<div id="contenu">
 
	<table width="950" border="0" cellspacing="2" cellpadding="2" align="left" style="font-family:Arial; font-size:12px; color:#155a97;padding: 2px;border:1px solid #AFD3F3;background-color:#FFFFFF;" valign=top>
		<tr>
			<th colspan="4" bgcolor="#FAFCFE" ><div align="left">
			  <div align="left" style="color: #9732B2;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:5px;padding-bottom:0px;padding-top:0px;">Ixxxx</div>
			</div>					</th>
			<th width="5" rowspan="2" bgcolor="#ffffff" style="color: #ffffff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:0px;padding-bottom:0px;padding-top:0px;">&nbsp;</th>
	    </tr>
		<tr>
		  <th width="116" bgcolor="#9732B2" style="color: #ffffff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:5px;padding-bottom:0px;padding-top:0px;"><div align="left">CODE </div></th>
		  <th width="326" bgcolor="#9732B2" style="color: #ffffff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:5px;padding-bottom:0px;padding-top:0px;"><div align="left">Titre de l'emailing</div></th>
		  <th width="87" bgcolor="#9732B2" style="color: #ffffff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:5px;padding-bottom:0px;padding-top:0px;"><div align="left">Date d'envoi</div></th>
		  <th width="83" bgcolor="#9732B2" style="color: #ffffff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:5px;padding-bottom:0px;padding-top:0px;">Envoyer</th>
	  </tr>
 
		<?php
 
			include('connect.php');
 
			$maChaine=""; 
			for($i=0; $i<sizeof($_POST['choixModule']);$i++)
			{
			$maChaine .= '/'.$_POST['choixModule'][$i]; 
			}
			$_SESSION['choixModule'] = $maChaine; 
			echo $_SESSION['choixModule'];
 
			$req = mysql_query("SELECT * FROM emailing WHERE `code_emailing` LIKE '%F/E%' ORDER BY date_envoi");
			while ($data = mysql_fetch_assoc($req)) :
		?>
 
		<tr>
			<td valign=top style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#F4E7F8;"><?php echo $data['code_emailing']; ?></td>
			<td valign=top style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#F4E7F8;"><?php echo $data['titre']; ?></td>
			<td style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#F4E7F8;" valign=top><div align="left"><?php echo $data['date_envoi']; ?></div></td>
 
			<td style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#FAFCFE;" valign=top>
			<!--<input type="checkbox" name="checkbox" id="checkbox" onClick="affiche_bouton()" />!-->
 
			<input type="checkbox" name="choixModule[]" value="<?php echo $row['checkenvoi'];?>" >
 
			<!--<input type="checkbox" name="check[]"  value="1" onClick="affiche_bouton()" >!-->
 
			<a onClick="return confirm('Souhaitez-vous vraiment lancer envoi des mails ?');" href="envoiEmail.php?page=<?php echo $data['id']; ?>" >
 <input type="submit" name="button" value="ENVOI" id="submite" disabled="disabled" style="font-family:Arial; font-size:12px; padding: 2px;"/></a>					</td>
 
			<td style="font-family:Arial; font-size:12px; color:#155a97;padding: 0px;border-bottom:0px solid #AFD3F3;background-color:#Ffffff;" valign=top>&nbsp;</td>
	    </tr>
 
		<?php endwhile; ?>
	</table>

Et le code html généré :

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
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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<script type="text/javascript">
function affiche_bouton() 
{ 
var isChecked=false;
for (i=0; i<document.getElementsByTagName("input").length; i++)
if (document.getElementsByTagName("input")[i].type=="checkbox")
if (document.getElementsByTagName("input")[i].checked)
isChecked=true;
if (isChecked)
{
document.getElementById('submite').disabled='';
} else {
document.getElementById('submite').disabled='disabled';
}
}
</script>
 
 
 
		<div id="content">
 
			<div id="contenu">
 
			<h1 align="center" style="color: #155A97;font-size: 16px;font-family: Arial, Helvetica, sans-serif;border:1px solid #AFD3F3;background-color:#FFFFFF;">Liste </h1>
 
 
			<p style="color: #155A97;font-size: 12px;font-family: Arial, Helvetica, sans-serif;border:0px solid #AFD3F3;background-color:#FFFFFF;">&nbsp;</p>
			<table width="732" border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td width="108"><a href="ajouterEmailing.php" class="button blue smallBouton"  style="cursor:pointer;margin-left:0px"></a></td>
    <td width="338"></td>
    <td width="266">&nbsp;</td>
  </tr>
</table>
 
			<br />
 
 
			<table width="950" border="0" cellspacing="2" cellpadding="2" align="left" style="font-family:Arial; font-size:12px; color:#155a97;padding: 2px;border:1px solid #AFD3F3;background-color:#FFFFFF;" valign=top>
 
				<tr>
					<th colspan="4" bgcolor="#FAFCFE" ><div align="left">
					  <div align="left" style="color: #9732B2;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:5px;padding-bottom:0px;padding-top:0px;">Interfine Chemicals </div>
					</div>					</th>
					<th width="5" rowspan="2" bgcolor="#ffffff" style="color: #ffffff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:0px;padding-bottom:0px;padding-top:0px;">&nbsp;</th>
			    </tr>
				<tr>
				  <th width="125" bgcolor="#9732B2" style="color: #ffffff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:5px;padding-bottom:0px;padding-top:0px;"><div align="left">CODE </div></th>
				  <th width="317" bgcolor="#9732B2" style="color: #ffffff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:5px;padding-bottom:0px;padding-top:0px;"><div align="left">Titre de l'emailing</div></th>
				  <th width="87" bgcolor="#9732B2" style="color: #ffffff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:5px;padding-bottom:0px;padding-top:0px;"><div align="left">Date d'envoi</div></th>
				  <th width="83" bgcolor="#9732B2" style="color: #ffffff;font-size: 12px;font-family: Arial, Helvetica, sans-serif;padding-left:5px;padding-bottom:0px;padding-top:0px;">Envoyer</th>
			  </tr>
 
 
 
 
 
 
 
 
 
 
				<tr>
					<td valign=top style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#F4E7F8;">xxxxxxxxxx</td>
					<td valign=top style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#F4E7F8;">xxxxxxxxxxxxxxxxxxx</td>
					<td style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#F4E7F8;" valign=top><div align="left">29/01/2013</div></td>
 
 
 
 
 
					<td style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#FAFCFE;" valign=top>
					<!--<input type="checkbox" name="checkbox" id="checkbox" onClick="affiche_bouton()" />!-->
 
					<input type="checkbox" name="choixModule[]" value="" >
 
					<!--<input type="checkbox" name="check[]"  value="1" onClick="affiche_bouton()" >!-->
 
					<a onClick="return confirm('Souhaitez-vous vraiment lancer envoi des mails ?');" href="envoiEmail.php?page=22" >
 <input type="submit" name="button" value="ENVOI" id="submite" disabled="disabled" style="font-family:Arial; font-size:12px; padding: 2px;"/></a>					</td>
 
					<td style="font-family:Arial; font-size:12px; color:#155a97;padding: 0px;border-bottom:0px solid #AFD3F3;background-color:#Ffffff;" valign=top>&nbsp;</td>
			    </tr>
 
 
				<tr>
					<td valign=top style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#F4E7F8;">xxxxxxxxxxxxx</td>
					<td valign=top style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#F4E7F8;">xxxxxxxxxxxxx</td>
					<td style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#F4E7F8;" valign=top><div align="left">31/01/2013</div></td>
 
 
 
 
 
					<td style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#FAFCFE;" valign=top>
					<!--<input type="checkbox" name="checkbox" id="checkbox" onClick="affiche_bouton()" />!-->
 
					<input type="checkbox" name="choixModule[]" value="" >
 
					<!--<input type="checkbox" name="check[]"  value="1" onClick="affiche_bouton()" >!-->
 
					<a onClick="return confirm('Souhaitez-vous vraiment lancer envoi des mails ?');" href="envoiEmail.php?page=23" >
 <input type="submit" name="button" value="ENVOI" id="submite" disabled="disabled" style="font-family:Arial; font-size:12px; padding: 2px;"/></a>					</td>
 
					<td style="font-family:Arial; font-size:12px; color:#155a97;padding: 0px;border-bottom:0px solid #AFD3F3;background-color:#Ffffff;" valign=top>&nbsp;</td>
			    </tr>
 
 
				<tr>
					<td valign=top style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#F4E7F8;">xxxxxxxxxxxxx</td>
					<td valign=top style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#F4E7F8;">test</td>
					<td style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#F4E7F8;" valign=top><div align="left">test</div></td>
 
 
 
 
 
					<td style="font-family:Arial; font-size:12px; color:#155a97;padding: 5px;border-bottom:1px solid #AFD3F3;background-color:#FAFCFE;" valign=top>
					<!--<input type="checkbox" name="checkbox" id="checkbox" onClick="affiche_bouton()" />!-->
 
					<input type="checkbox" name="choixModule[]" value="" >
 
					<!--<input type="checkbox" name="check[]"  value="1" onClick="affiche_bouton()" >!-->
 
					<a onClick="return confirm('Souhaitez-vous vraiment lancer envoi des mails ?');" href="envoiEmail.php?page=24" >
 <input type="submit" name="button" value="ENVOI" id="submite" disabled="disabled" style="font-family:Arial; font-size:12px; padding: 2px;"/></a>					</td>
 
					<td style="font-family:Arial; font-size:12px; color:#155a97;padding: 0px;border-bottom:0px solid #AFD3F3;background-color:#Ffffff;" valign=top>&nbsp;</td>
			    </tr>
			  </table>

Gestion d'un checkbox pour griser ou non un bouton javascript/php

JavaScript

Vue hybride

Discussions similaires

Partager

Partager