Discussion :

[spawns]

Salut a tous,
je suis pas un expert en JS et j'essaie de gérer avec des bout de code par si par la.
voila mon problème.
j'ai un formulaire auquel je peux ajouter des champs via un script JS, ça cela marche voici le code :

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
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
 
  <a href="#" class="add"><button class="btn btn-success">Ajouter</button></a> <a href="#" class="del"><button class="btn btn-danger">Supprimer</button></a>	<br />
	<form id="myForm" method="post" action="test_envoi.html" >
 
 
      <fieldset>
		<div class="col-xs-12 col-sm-1 col-md-1 col-lg-1">
		<label for="qte1"></label>
		 <input class="form-control" id="qte1" name="qte1" type="text" value="" onblur="calcul()"/>
		</div>
 
		<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
		<label for="description1"></label>		
		 <input class="form-control" id="description1" name="description1" type="text" value="" />
		</div>
 
		<div class="col-xs-12 col-sm-1 col-md-1 col-lg-1">
		<label for="prix1"></label>		
		 <input class="form-control" id="prix1" name="prix1" type="text" value=""  onblur="calcul()" />
		</div>
 
		<div class="col-xs-12 col-sm-1 col-md-1 col-lg-1">
		<label for="total1"></label>		
		 <input class="form-control" id="total1" name="total1" type="text" value="" />
		</div>
 
      </fieldset>
	  <div class="row">
		<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">	<br />  	  
      <input type="submit" value="Envoyer" />
	  </div>
	  </div>
   </form>
	</div>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
   <script type="text/javascript">
      $(function(){
 
         var nb = 1;
         $('.add').click(function(){
            var ligneTemp = $(myForm).children("fieldset:last");
            ligneTemp.after(ligneTemp.clone(true));
            $(myForm).children("fieldset:last").hide().fadeIn();
            var ligneTemp = $(myForm).children("fieldset:last");
            ligneTemp.find('label').each(function() {
               tempLabel = $(this).attr("for").replace(nb, nb+1);
               $(this).attr("for",tempLabel);
            });
            ligneTemp.find('input').each(function() {
               this.id= this.id.replace(nb, nb+1);
               this.name= this.name.replace(nb, nb+1);
               this.value= "";
            });
            nb++;
         });
         $('.del').click(function(){
            if (nb>1) { // Pour qu'il reste au moins une ligne
               $(myForm).children("fieldset:last").fadeOut(300, function(){$(this).remove();});
               nb--;
 
            }
         });
      });
   </script>

ensuite je voudrais que certains input puisse se calculer, ici "quantité x prix" pour s'afficher dans le input total.
cela fonctionne avec se petit script

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
function calcul(){
                var quantite = Number(document.getElementById("qte1").value);
 
                var prix = Number(document.getElementById("prix1").value);
 
                var total = Number(quantite * prix);
                document.getElementById("total1").value = total;
            }
</script>

le problème et vous l'avez compris c'est que lorsque j'ajoute des champs mon script de calcul ne fonctionne plus car les id
des imput ne sont plus les bons.
a chaque ajout de ligne les ids sont incrementer de +1.
comment faire pour incrémenter les id des champs dans le script calcul a moins que vous connaissiez une autre solution ?

Merci d'avance de votre aide
Cdt

[SylvainPV]

Il aurait été plus simple et logique de travailler avec des classes qu'avec des ID (qui par définition identifient de manière unique). Jamais compris pourquoi les gens s'acharnent à utiliser des ID partout.