Discussion :

[yann18]

Bonjour/ bonsoir,

J'ai une série de formulaire indéfinie dans lesquels se trouve respectivement une liste:

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
<form action="" method="post" class="edition-panier">
            <ul id="cmd_<?php echo $data->lg_commandes_id_commande; ?>">
              <li>
                <label>Quantité
                  <input type="text" name="qt" id="qt" class="qt" value="<?php echo $data-
 
>qt_lg_cmd; ?>">
                  </input>
                </label>
              </li>
              ...
              <li>
                <label>Montant
                  <input type="hidden" name="prix" id="prix" value="<?php echo $data->prix; ?
 
>"/>
                  <span class="montant"><?php echo $data->montant.' €'; ?></span>
                </label>
              </li>
...
</ul></form>

c'est du code généré dynamiquement, à travers une boucle PHP. Donc, je peux avoir 2 ou 3 champs 'qt' ou 'remarques' comme des dizaines.
Mais je dois avoir une interactivité sur chaque liste. Celle-ci consisterait, pour l'utilisateur, dès lors qu'il change la valeur du champ 'qt', de voir la modification immédiate de la valeur de la <span class="montant">
C'est quelque chose que je sais faire sur des identifiants uniques, mais pas dans ce cas-ci.
Je suis parti du principe de travailler à partir d'une liste unique, dans laquelle je sélectionnerai les éléments formulaires enfants:

Code :

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

1
2
3
4
5
$('#qt').live('keyup', function(){
var id = $(this).parents('ul').attr('id');
var prix = $('ul').attr('id', id).find($('#prix')).val();
alert(prix);
...

Mais non seulement ce code ne me renvoie pas un bon résultat, mais je ne suis pas sûr que ce soit la bonne méthode à suivre... Comment procéderiez-vous ?
Merci,
Ps : le montant sera le résultat des champs 'qt' * 'prix'

[danielhagnoul]

Bonsoir

Attention à l'écriture d'un "input" (<input />) et un ID doit être unique pour toute la page web !

Exemple :

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
<form id="monFormID" class="edition-panier">
	<ul>
		<li>
			<label>Quantité
			<input type="text" name="qt" value="1"></input>
			</label>
		</li>
		<li>
			<label>Quantité
			<input type="text" name="qt" value="0"></input>
			</label>
		</li>
		<li>
			<label>Quantité
			<input type="text" name="qt" value="3"></input>
			</label>
		</li>
		<li>
			<label>Montant
			<input type="hidden" name="prix" value="22,50 €"/>
			<span class="montant"></span>
			</label>
		</li>
	</ul>
</form>

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
// on avec jQuery 1.7, sinon delegate. live est à proscrire.
 
$("#monFormID").on("keyup", "input[name='qt']", function(){
	var jObjUL = $(this).parents('ul'),
		tabQt = jObjUL.find("input[name='qt']").map(function(index, domElement){
			return $(domElement).val();
		}).get(),
		prix = jObjUL.find("input[name='prix']").val().replace(",","."),
		montant = 0;
 
	for(var i in tabQt){
		if ( $.isNumeric(tabQt[i]) ){
			montant += parseInt(tabQt[i]) * parseFloat(prix);
		}
	}
 
	// console.log( prix, tabQt, montant );
 
	jObjUL.find("span.montant").text(String(montant).replace(".",",") + " €");
});

[yann18]

Bonjour,

Merci bien pour la réponse. Toutefois, je suis toujours gêné dans la mesure où je dois m'appuyer sur un id formulaire. Or, je ne le connais pas à l'avance (puisque généré dynamiquement. J'ai modifié mon code pour m'adapter au vôtre)

Code :

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

1
2
<form action="" method="post" id="formPanier_<?php echo $data->lg_commandes_id_commande; ?>" class="edition-panier">
...

Et je dois bien le connaître pour savoir sur quel formulaire je travaille...

Code :

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

1
2
3
4
5
6
7
   $("input[name='qt']").live('click',function(){ //ne comprenant pas encore le fonctionnement de 'On', je reste provisoirement sur 'live' 
        var idForm = $(this).parents('form').attr('id');
        $('form').attr('id', idForm).on("keyup", "input[name='qt']", function(){
           ...
            alert('ok');
        });
    });

Merci,

[yann18]

Bonjour,

Rien à faire, je n'arrive pas à capturer l'id du formulaire avec 'on'
Si je fais

Code :

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

1
2
3
$("input[name='qt']").live('keyup', function(){
var idForm = $(this).parents('form').attr('id');
alert(idForm);

je l'obtiens bien
mais la même chose avec 'on'

Code :

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

1
2
3
$("input[name='qt']").on('keyup', function(){
var idForm = $(this).parents('form').attr('id');
alert(idForm);

Je n'ai rien. Pourtant, en regardant dans la documentation, j'ai cru comprendre que le comportement est le même que 'live'...
Précision : c'est du html ajouté dynamiquement.
Merci,

[danielhagnoul]

Bonsoir

Code :

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

1
2
3
// on avec jQuery 1.7, sinon delegate. live est à proscrire.
 
$("#monFormID").on("keyup", "input[name='qt']", function(){...

Si vous ne pouvez pas mettre un ID au formulaire, vous pouvez prendre comme référence l'ID d'un parent ou à la limite le "body": $("body").on("keyup", "input[name='qt']", function(){....

[yann18]

Bonjour,

Mais je peux mettre un id sur le formulaire:

Code :

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

<form id="formPanier_80" class="edition-panier" method="post">

les seules choses étant que je ne le connais pas par avance puisque généré dans une boucle PHP, et que je n'arrive pas à le capturer avec la méthode 'on'.
Merci,

[yann18]

J'ai fini par trouver quelque chose. Ce n'est peut-être pas la meilleure façon de procéder, mais c'est fonctionnel...

Code :

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

1
2
3
4
5
6
7
8
$('form').live('keyup', function(){
var idForm = $(this).attr('id');
var whatForm = $('#'+idForm);
var qt = whatForm.find("input[name='qt']").val();
var prix = whatForm.find("input[name='prix']").val();
var cout = qt * prix;
whatForm.find('span.montant').empty().append(cout+' €');
});

[riadh_2006]

Vous pouvez jettez un coup d'oeil sur ce tutorial,
ça pourra vous aidez

http://www.pengoworks.com/workshop/j...ion.plugin.htm

Bonne chance