Ajouter et supprimer une ligne d'une commande

Version imprimable

Bonjour à tous

J'ai un problème avec ma fonction create_champ(i) et delete_champ(i)
Le but serait d'ajouter correctement la même ligne en dessous de la précédente, mais les champs du select s'ajoutent en dehors du select en question (pourtant, aucun bug sous Opera).
La fonction delete_champ(i) ne fonctionne pas non plus, mais je pense que si l'ajout fonctionne, il ne devrait plus y avoir de problèmes.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function create_champ(i) {
		var i2 = i + 1;
		var j;
		document.getElementById('produits_' + i).innerHTML = '<span id="ligne_' + i + '">Produits : ';
		document.getElementById('produits_' + i).innerHTML += '<select name="Designation_produit_' + i + '" id="Designation_produit_' + i + '">';
		for (j = 0; j < document.getElementById('Designation_produit_1').options.length; j++) {
			document.getElementById('produits_' + i).innerHTML += '<option value="' + document.getElementById('Designation_produit_1').options[j].value + '">' + document.getElementById('Designation_produit_1').options[j].value + '</option>';
		}
		document.getElementById('produits_' + i).innerHTML += '</select>';
		document.getElementById('produits_' + i).innerHTML += '&nbsp;Quantité : ';
		document.getElementById('produits_' + i).innerHTML += '<input type="text" name="Quantite_' + i + '" id="Quantite_' + i + '" size="2" />';
		document.getElementById('produits_' + i).innerHTML += '&nbsp;<input type="button" name="Supprimer_' + i + '" id="Supprimer_' + i + '" value="Supprimer" onClick="javascript:delete_champ(' + i + ')" /><br /></span>';
		document.getElementById('produits_' + i).innerHTML += (i <= 19) ? '<span id="produits_' + i2 + '"><input type="button" name="Ajouter_' + i + '" id="Ajouter_' + i + '" value="Ajouter un produit" onClick="javascript:create_champ(' + i2 + ')" /></span>' : ' ';
	}
 
function delete_champ(i) {
		if (i != 1) document.getElementById('ligne_' + i).innerHTML = '';
	}

Voila, je suis preneur de toutes suggestions :D
Merci d'avance!

26/02/2010, 06h24
andry.aime

Bonjour et Bienvenue sur Developpez ;).
1-Pour créer ou supprimer dynamiquement un élément en javascript, n'utilises pas innerHTML, utilise DOM :fleche: FAQ.
2-

Citation:

Le but serait d'ajouter correctement la même ligne en dessous de la précédente

cloneNode est mieux adapté à cette situation.
3-Montres nous le bout de code HTML concerné.

A+

OK merci, jvais aller voir pour le DOM ;)

Pour le HTML :

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
59
60
61
62
63
64
65
<?php
 
require_once('includes/mysql/mysql.class.php');
 
$sql1 = new mysql();
$requete1 = 'SELECT Nom_client FROM clients ORDER BY Nom_client';
$sql1->requete($requete1, "1");
 
$sql2 = new mysql();
$requete2 = 'SELECT Designation_produit FROM produits WHERE Quantite_stock > 0 ORDER BY Designation_produit';
$sql2->requete($requete2, "2");
 
?>
 
<div align="center">
	<fieldset style="width:90%">
		<legend><b>Saisie d'une commande client&nbsp;</b></legend>
		<form method="POST" action="generation_facture_client.php" target="_blank">
			<label for="Nom_client">Client : </label>
			<select name="Nom_client" id="Nom_client">
<?php
        while($donnees1 = $sql1->resultat(1)) {
?>
				<option value="<?php echo $donnees1['Nom_client']; ?>"><?php echo $donnees1['Nom_client']; ?></option>
<?php
        } 
?>
			</select>
 
			<hr width="400px" align="center" />
 
			<span id="ligne_1">
				<label for="Designation_produit_1">Produits : </label>
				<select name="Designation_produit_1" id="Designation_produit_1">
<?php
        while($donnees2 = $sql2->resultat(2)) {
?>
					<option value="<?php echo $donnees2['Designation_produit']; ?>"><?php echo $donnees2['Designation_produit']; ?></option>
<?php
        }
?>
				</select>
				<label for="Quantite_1">Quantité : </label>
				<input type="text" name="Quantite_1" id="Quantite_1" size="2" /><br />
			</span>
			<span id="produits_2">
				<input type="button" name="Ajouter_1" id="Ajouter_1" value="Ajouter un produit" onClick="javascript:create_champ(2);" />
			</span>
 
			<hr width="400px" align="center" />
 
			<table>
				<tr>
					<td><label for="Type_reglement">Règlement : </label></td>
					<td>
						<input type="radio" name="Type_reglement" id="Type_reglement" value="virement bancaire" />Virement bancaire<br />
						<input type="radio" name="Type_reglement" id="Type_reglement" value="chèque" />Chèque<br />
						<input type="radio" name="Type_reglement" id="Type_reglement" value="" />En attente<br />
					</td>
				</tr>
			</table>
			<input type="submit" value="Générer la facture" />
		</form>
	</fieldset>
</div>

26/02/2010, 11h48
andry.aime

Re,
C'est le code html généré dans ton navigateur qu'on veut voir mais pas le code php ;), et juste le petit bout concerné.
Mais j'ai trouvé ça en faisant une lecture diagonale

Citation:

<input type="radio" name="Type_reglement" id="Type_reglement" value="virement bancaire" />Virement bancaire<br />
<input type="radio" name="Type_reglement" id="Type_reglement" value="chèque" />Chèque<br />
<input type="radio" name="Type_reglement" id="Type_reglement" value="" />En attente<br />

Un id doit être unique dans un document.
10/03/2010, 17h12
StrangeMan83

C'est bon le DOM fonctionne parfaitement, merci beaucoup :ccool: