Boutons option et div créés en dynamique

**LiliValerie** · 09/10/2013, 11h28

Bonjour,
Mon formulaire comporte une div avec des boutons options sur la première ligne. Il est possible de dupliquer la div grâce à la fonction duplicate().
Lorsque la div est dupliquée, on peut cliquer sur les boutons option mais du coup les boutons option de l'autre div dupliquée se décochent.
Comment dois-je faire pour que mes boutons options soient différents selon les div créées dynamiquement.

Je les récupère ensuite dans une BDD et par email. Il faudrait aussi que je puisse supprimer les div créées.

Si vous pouvez m'aider

Merci beaucoup

Voici mon code :

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
<div id="duplicater"> 
	<table>
		<TR>
			<TD colspan="14" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 12px;background-color:#ffffff;"></TD>
		</TR>
		<TR>
			<TD colspan="14" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#000099;font-size: 12px;"><legend style="border: 0px solid #AFD3F3;background-color:#ffffff;font-family:Arial; font-size:16px; color:#155a97;"></legend></TD>
		</TR>
		<TR>
			<TD colspan="5" valign="top" ><div align="center"><strong>volume</strong> </div></TD>
              <TD colspan="2" valign="top" ><div align="center"><strong>type</strong> </div></TD>
              <TD colspan="4" valign="top" ><div align="center"><strong> diameter </strong></div></TD>
              <TD colspan="3" valign="top" ><div align="center"><strong>Material</strong></div></TD>
              </TR>
            <TR>
              <TD width="34" valign="top" ><div align="center">2ml</div></TD>
              <TD width="34" valign="top" ><div align="center">4 ml </div></TD>
              <TD width="34" valign="top" ><div align="center">10ml</div></TD>
              <TD width="34" valign="top" ><div align="center">20ml</div></TD>
              <TD width="34" valign="top" ><div align="center">Other</div></TD>
              <TD width="47" valign="top" ><div align="center">Screw</div></TD>
              <TD width="47" valign="top" ><div align="center">Crimp</div></TD>
              <TD width="58" valign="top" ><div align="center">8mm</div></TD>
              <TD width="58" valign="top" ><div align="center">9mm</div></TD>
              <TD width="58" valign="top" ><div align="center">10mm</div></TD>
              <TD width="58" valign="top" ><div align="center">13mm</div></TD>
              <TD width="66" valign="top" ><div align="center">Clear Glass </div></TD>
              <TD width="62" valign="top" ><div align="center">Amber Glass </div></TD>
              <TD width="60" valign="top" ><div align="center">Polypropylene</div></TD>
              </TR>
            <TR>
              <TD valign="top" ><INPUT type= "radio" name="2ml"/></TD>
              <TD valign="top" ><INPUT type= "radio"  name="vial[]" value="4ml"/></TD>
              <TD valign="top" ><INPUT type= "radio" name="vial[]" value="10ml"/></TD>
              <TD valign="top" ><INPUT type= "radio" name="vial[]" value="20ml"/></TD>
              <TD valign="top" ><INPUT type= "radio" name="vial[]" value="Other"/></TD>
              <TD valign="top" ><INPUT type= "radio" name="vial2[]" value="screw"/></TD>
              <TD valign="top" ><INPUT type= "radio" name="vial2[]" value="crimp"/></TD>
              <TD valign="top" ><INPUT type= "radio" name="vial3[]" value="8mm"/></TD>
              <TD valign="top" ><INPUT type= "radio" name="vial3[]" value="9mm"/></TD>
              <TD valign="top" ><INPUT type= "radio" name="vial3[]" value="10mm"/></TD>
              <TD valign="top" ><INPUT type= "radio" name="vial3[]" value="13mm"/></TD>
              <TD valign="top" ><INPUT type= "radio" name="vial4[]" value="clear_glass"/></TD>
              <TD valign="top" ><INPUT type= "radio" name="vial4[]" value="amber_glass"/></TD>
              <TD valign="top" ><INPUT type= "radio" name="vial4[]" value="polypropylene"/></TD>
            </TR>
	</table></td>
</div>
	<INPUT id="button" type="button" class="button blue small2"  style="cursor:pointer;margin-left:0px" value="Add vial" onclick="duplicate()">

Code :

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

1
2
3
4
5
6
7
8
9
document.getElementById('button').onclick = duplicate;
var i = 0;
var original = document.getElementById('duplicater');
 
function duplicate() {
    var clone = original.cloneNode(true); // "deep" clone
    clone.id = "duplicetor" + ++i; // there can only be one element with an ID
    original.parentNode.appendChild(clone);
}

**Bovino** · 09/10/2013, 11h36

Il faut modifier leur attribut name...

**LiliValerie** · 09/10/2013, 11h39

Bonjour Bovino,

Merci pour ta réponse

Je ne peux pas modifier leur attribut name parce qu'il sont par série sur la ligne et on ne peut pas cliquer sur deux boutons différents dans un bloc de quatre choix possibles par exemple, ça ne va pas marcher après.

**Bovino** · 09/10/2013, 13h52

Non, ce que je te dis, c'est que dans l'élément que tu clones, si leur name est le même que ceux de l'élément cloné, alors ils seront liés. Il faut donc que tu modifies le name pour l'élément cloné afin qu'il ne soit pas lié avec les champs déjà existants, un peu comme tu le fais pour l'id.

**LiliValerie** · 09/10/2013, 13h56

Oui, je comprends mieux mais comment je fais ?
Je suis un peu perdue...

**Bovino** · 09/10/2013, 14h04

A partir de ton clone, tu peux récupérer les input ayant un name donné

Code :

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

var inputs = clone.getElementsByName(...);

et à partir de cette collection, faire une boucle pour modifier le name.

**LiliValerie** · 11/10/2013, 13h46

Bonjour tout le monde,

Mon formulaire comporte une div avec des boutons radio, cette dernière peut être dupliquée dynamiquement grâce à un script javascript.

Je n'arrive pas à récupérer le contenu de mes boutons radio dans ma base de données, ça ne fonctionne pas du tout. J'ai du changer de système pour satisfaire certaines exigences, j'avais des checkbox au départ et donc pas de problème pour récupérer. Là je ne sais pas comment faire, si vous pouvez m'aider, merci beaucoup d'avance.

Voici mes codes :

Le 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
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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
 
<form action="envoiTest.php" method="post" name="formulaire" onSubmit="return (ConForm(this));">
    <table width="783" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="4" height="450">&nbsp;</td>
          <td width="773"><fieldset style="border: 1px solid #AFD3F3;background-color:#ffffff;">
            <legend style="border: 0px solid #AFD3F3;background-color:#ffffff;font-family:Arial; font-size:16px; color:#155a97;"></legend>
 
 
<table width="752" height="112" border="0" cellpadding="0" cellspacing="0">
 
              <tr>
                <td colspan="2" style="font-family: Arial, Helvetica, sans-serif;color:#000099;font-size: 12px;"></td>
                <td width="456" colspan="3"></td>
              </tr>
 
 
 
              <tr>
                <td width="206" rowspan="4" style="font-family: Arial, Helvetica, sans-serif;color:#000099;font-size: 12px;">&nbsp;</td>
                <td width="90" height="21" style="font-family: Arial, Helvetica, sans-serif;color:#000099;font-size: 12px;">Company<span class="Style2">*</span>  :</td>
                <td colspan="3"><input name="company" value="" size="90" type="text" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 12px;border: thin dashed #B5D2E8;background-color:#F0F7FB;" lang="nom:;erreurfond:#E0ECF5;mini:2;maxi:100;type:obligatoire;erreur:- Thank you for completing your company"/></td>
              </tr>
 
 
              <tr>
                <td height="21" style="font-family: Arial, Helvetica, sans-serif;color:#000099;font-size: 12px;">Tel.<span class="Style2">*</span> :</td>
                <td colspan="3"><input name="tel" value="" size="30" type="text" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 11px;border: thin dashed #B5D2E8;background-color:#F0F7FB;" lang="nom:;erreurfond:#E0ECF5;mini:2;maxi:30;type:obligatoire;erreur:- Thank you for completing your tele"/></td>
              </tr>
              <tr>
                <td height="21" style="font-family: Arial, Helvetica, sans-serif;color:#000099;font-size: 12px;">E-mail<span class="Style2">*</span> : </td>
                <td colspan="3"><input name="mail" type="text" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 11px;border: thin dashed #B5D2E8;background-color:#F0F7FB;" lang="nom:;erreurfond:#E0ECF5;mini:2;maxi:30;type:obligatoire;erreur:- Thank you for completing your tele" value="" size="30" xml:lang="nom:;erreurfond:#E0ECF5;mini:2;maxi:30;type:obligatoire;erreur:- Thank you for completing your tele"/></td>
              </tr>
              <tr>
                <td height="20" style="font-family: Arial, Helvetica, sans-serif;color:#000099;font-size: 12px;"><em>Country :</em></td>
                <td colspan="3" valign="middle" >
 
								</td>
              </tr>
              <tr>
                <td style="font-family: Arial, Helvetica, sans-serif;color:#000099;font-size: 12px;">&nbsp;</td>
                <td colspan="4" style="font-family: Arial, Helvetica, sans-serif;color:#000099;font-size: 12px;"><span class="Style1 Style2">* required fields </span></td>
              </tr>
 
 
              <tr>
                <td colspan="5" style="font-family: Arial, Helvetica, sans-serif;color:#000099;font-size: 12px;">			</td>
			</tr>
		  </table>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
    <div id="contenu21">
 
        <div id="top_actu_list1" >
 
 
 
 
      <legend style="border: 0px solid #AFD3F3;background-color:#ffffff;font-family:Arial; font-size:16px; color:#155a97;"></legend>
 
			<div id="ajoutSupprimerArticle1"></div>	
 
					<div id="contenu23">
 
        <div id="top_actu_list2" >
 
              <br /><br />
 
 
      <legend style="border: 0px solid #AFD3F3;background-color:#ffffff;font-family:Arial; font-size:16px; color:#155a97;"><strong>test  : </strong></legend>
 
				<div class="article2" style="border: thin dashed #0094CC;font-family:Arial; font-size:16px; background-color:#ffffff;">
	 					  <table width="742"> 
					  <TR>
					    <TD colspan="10" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 12px;background-color:#ffffff;"></TD>
				      </TR>
 
					  <TR>
					  <TD colspan="5" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#ffffff;font-size: 12px;background-color:#0095CD;"><div align="center"><strong>taille</strong> </div></TD>
              <TD colspan="2" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#ffffff;font-size: 12px;background-color:#0095CD;"><div align="center"><strong>Type </strong> </div></TD>
              <TD colspan="3" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#ffffff;font-size: 12px;background-color:#0095CD;"><div align="center"><strong>Materiel </strong></div></TD>
              </TR>
            <TR>
              <TD width="37" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 9px;background-color:#d9eef7;"><div align="center">1</div></TD>
              <TD width="38" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 9px;background-color:#d9eef7;"><div align="center">2</div></TD>
              <TD width="38" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 9px;background-color:#d9eef7;"><div align="center">3</div></TD>
              <TD width="38" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 9px;background-color:#d9eef7;"><div align="center">4</div></TD>
              <TD width="38" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 9px;background-color:#d9eef7;"><div align="center">5</div></TD>
              <TD width="104" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 9px;background-color:#EDF8FC;"><div align="center">6</div></TD>
              <TD width="103" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 9px;background-color:#EDF8FC;"><div align="center">7</div></TD>
              <TD width="100" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 9px;background-color:#d9eef7;"><div align="center">8</div></TD>
              <TD width="94" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 9px;background-color:#d9eef7;"><div align="center">9</div></TD>
              <TD width="108" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 9px;background-color:#d9eef7;"><div align="center">10 </div></TD>
              </TR>
            <TR>
              <TD valign="top"><div align="center">
                <INPUT type="radio"  name="un[]" value="test11"/>
              </div></TD>
              <TD valign="top"><div align="center">
                <INPUT type="radio" name="un[]" value="test9"/>
              </div></TD>
              <TD valign="top"><div align="center">
                <INPUT type="radio" name="un[]" value="test8"/>
              </div></TD>
              <TD valign="top"><div align="center">
                <INPUT type="radio" name="un[]" value="test7"/>
              </div></TD>
              <TD valign="top"><div align="center">
                <INPUT type="radio" name="un[]" value="test6"/>
              </div></TD>
              <TD valign="top"><div align="center">
                <INPUT type="radio" name="deux[]" value="test5"/>
              </div></TD>
              <TD valign="top"><div align="center">
                <INPUT type="radio" name="deux[]" value="test4"/>
              </div></TD>
              <TD valign="top"><div align="center">
                <INPUT type="radio" name="trois[]" value="test3"/>
              </div></TD>
              <TD valign="top"><div align="center">
                <INPUT type="radio" name="trois[]" value="test2"/>
              </div></TD>
              <TD valign="top"><div align="center">
                <INPUT type="radio" name="trois[]" value="test1"/>
              </div></TD>
            </TR>
 
            <TR>
              <TD height="97" colspan="10" valign="top" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 9px;"><table >
 
  <tr>
    <td height="2" style="font-family: Arial, Helvetica, sans-serif;color:#0095CD;font-size: 12px;">	</td>
    <td colspan="3"></td>
  </tr>
  <tr>
                <td width="238" height="21">Others : </td>
            <td width="470" colspan="3"><input name="test15[]" value="" size="90" type="text" /></td>
            </tr>
  <tr>
                <td height="21" >Annual consumption  : </td>
                <td colspan="3"><input name="test16[]" value="" size="90" /></td>
            </tr>
  <tr>
                <td height="21">Part number : </td>
                <td colspan="3"><input name="test17[]" value="" size="90" type="text"/></td>
            </tr>
 
          </table></TD>
            </TR>
  </table>
 
 
				</div>	
 
 
 
 
 
 
			<div id="ajoutSupprimerArticle2">
                    <br />
					<a href="javascript:;" title="Ajouter un article" class="ajoutArticle2 button blue small2" rel="article">Add </a>
 
                    <a href="javascript:;" title="Supprimer un article" class="supprimerArticle2 button blue small2" rel="article">Delete</a>
            </div>			
 
 
              <table width="765" height="37" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="761">&nbsp;</td>
              </tr>
              <tr>
                <td width="761" colspan="3" style="font-family: Arial, Helvetica, sans-serif;color:#000099;font-size: 12px;"><div align="center"><br />
                        <input class="button blue small" name="submit" type="submit" value="SUBMIT">
&nbsp;&nbsp;<input class="button blue small" name="reset" type="reset" value="RESET" >
                </div>
 
 
</form>

La page envoiTest :

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
 
$un1='';
foreach ($_POST['un'] as $un) {
	//echo "$caps a été coché<br />";
	$un1 = implode("/", $_POST['un'] ); 
}
 
 
$deux1='';
foreach ($_POST['deux'] as $deux) {
	//echo "$caps a été coché<br />";
	$deux1 = implode("/", $_POST['deux'] ); 
}
 
 
$trois1='';
foreach ($_POST['trois'] as $trois) {
	//echo "$caps a été coché<br />";
	$trois1 = implode("/", $_POST['trois'] ); 
}
 
 
$test15b='';
foreach ($_POST['test15'] as $test15) {
	//echo "$caps a été coché<br />";
	$test15b = implode("/", $_POST['test15b'] ); 
}
 
$test16b='';
foreach ($_POST['test16'] as $test16) {
	//echo "$caps a été coché<br />";
	$test16b = implode("/", $_POST['test16b'] ); 
}
 
$test17b='';
foreach ($_POST['test17'] as $test17) {
	//echo "$caps a été coché<br />";
	$test17b = implode("/", $_POST['test17b'] ); 
}
 
 
 
 
//------------  enregistrement dans la base  -------------------------------------------------
 
 
 
 
 
 
 
if (isset ($_POST['submit']))
{
 
	$company=$_POST['company'];
	$tel=$_POST['tel'];
	$mail=$_POST['mail'];
 
 
 
 
 
	// Si l'un des champs est vide, lancer une erreur
	if (empty($company) || empty($tel) || empty($mail))
 
 
		$info = 'Veuillez renseigner tous les champs';
	else
	{
		// Connexion à la bdd
		mysql_connect("localhost", "root","") or die("Echec de connexion au serveur.");
		mysql_select_db("interdb") or die("Echec de sélection de la base.");
 
		mysql_query("SET NAMES UTF8");
 
 
 
 
 
 
 
 
		$query = "insert into test2 (company,tel,mail,un,deux,trois,test15,test16,test17) values('$company','$tel','$mail','$un1','$deux1','$trois1','$test15b','$test16b','$test17b')";
 
 
			echo $query; 
 
 
 
 
		if (mysql_query($query))
			$info = 'Les informations sont enregistrées avec succès';
		else
			$info = 'Erreur lors de l ajout des informations';
			//header("Location: test.php");
			//echo 'Erreur lors de l ajout des informations';
 
  			exit();
	}
}

Ma base de données :

Code sql :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
CREATE TABLE IF NOT EXISTS `test2` (
  `id_vial` int(11) NOT NULL AUTO_INCREMENT,
  `company` varchar(100) DEFAULT NULL,
  `tel` varchar(20) DEFAULT NULL,
  `mail` varchar(100) DEFAULT NULL,
  `un` varchar(100) DEFAULT NULL,
  `deux` varchar(100) DEFAULT NULL,
  `trois` varchar(100) DEFAULT NULL,
  ` test15` varchar(100) DEFAULT NULL,
  `test16` varchar(100) DEFAULT NULL,
  `test17` varchar(100) DEFAULT NULL,
  KEY `id_vial` (`id_vial`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=2 ;

**sabotage** · 11/10/2013, 13h52

Tu pourrais être plus précise sur ce que tu obtiens comme résultat ?
A quel niveau cela ne fonctionne plus ?
Qu'est ce que tu reçois du formulaire actuellement ?
Tu as des contrôles avec des messages d'erreur dans ton code, est-ce qu'ils sortent en erreur ou positifs ?
etc.

**LiliValerie** · 11/10/2013, 14h17

Bonjour Sabotage,
merci pour ta réponse

Je récupère bien les données dans les boutons radios, ce sont mes inputs qui posent problème en fait. Je viens de refaire des tests et ça fonctionne pour les boutons radio.

En fait, voici les erreurs pour les inputs :

Notice: Undefined index: test15b in C:\wamp\www\20-FormulaireEnvoiBaseEtMail\DOSSIER TRAVAIL OCTOBRE 2013\Fonctionne\envoiTest.php on line 29

Pour chacun de mes trois derniers champs test15, test16 et test17

Si je fais un echo $query pour voir ce que me retourne ma requête, j'ai ceci :
insert into test2 (company,tel,mail,un,deux,trois,test15,test16,test17) values('testfds','estqfdsf','esqtdsfd','test11','test4','test1','1','2','3')En fait, je ne dois utiliser le

Code html :

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

<input name="test17[]" value="" size="90" type="text"/>

et faire un

Code php :

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

1
2
3
4
5
6
 
$test17b='';
foreach ($_POST['test17'] as $test17) {
	//echo "$caps a été coché<br />";
	$test17b = implode("/", $_POST['test17b'] ); 
}

pour récupérer les contenus successifs comme pour mes boutons radio...

Voilà je ne sais pas si ces infos t'éclaireront davantage sur mon problème.
Merci encore