Discussion :

[sfarouk]

Je voudrais pouvoir remplir la valeur du champs prix une fois sélectionné le champs quantité.
J'ai un fichier php qui renseigne la base de données et me revois les resultats en json comme suit:

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
  [{
         id: "1",
         item: "Coca",
         qty: "12",
         price: "250"
     },
     {
         id: "2",
         item: "Orange",
         qty: "20",
         price: "102"
     },
     {
         id: "3",
         item: "pepsi",
         qty: "30",
         price: "250"
     }
 ];

Mon problème ce que en sélectionnant la quantité de la première ligne, il me met la valeur du prix sur la première ligne correctement, mais en sélectionnant la quantité de la deuxième ligne il me remplace la valeur du prix de la première ligne au lieu de de me remplir directement le prix de la deuxième ligne

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
<form>
 <table id="fact-tablee" style="margin-top:10px;" cellpadding="0" cellspacing="0">
    <tr>
 
        <th>Item</th>
        <th>Quantity</th>
        <th>Price</th>                                             
    </tr>
 
    <tr class="tr">
        <td><input type="text" name="item[]" value=""></td> 
		<td><select name="qty[]" class="qty">
			<option value="12">12</option>
			<option value="20">20</option>
			<option value="30">30</option>
		</select></td>
		<td><input type="text" name="price[]" value="" class="price"></td>
    </tr> 
	<tr class="tr">
        <td><input type="text" name="item[]" value=""></td> 
		<td><select name="qty[]" class="qty">
			<option value="12">12</option>
			<option value="20">20</option>
			<option value="30">30</option>
		</select></td>
		<td><input type="text" name="price[]" value="" class="price"></td>
    </tr>
 
  </table>
</form>

mon js

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").on('change', '.qty', function(){
 
 	 var qty = $(this).val();
 
 	 $.ajax({
	 	 	url: data,
	 	 	data: {'qty':qty},
	 	 	dataType:'json',
	 	 	success: function(data){
	 	 		if(data ==''){	 	 			
	 	 			$('.price').val(0);
	 	 		}else{
					$.each(data, function(index, element){
						$('.price').val(element.price);
					});
 
	 	 	  }
	 	 	}
	 	 });
    });
 )};

Merci pour votre aide

[mathieu]

pour faire cela vous pouvez déjà garder la référence au menu déroulant dans un variable avant l'appel à "ajax"

Code :

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

var menuDeroulant = $(this);

et ensuite à la place "$(.price)" essayez cela :

Code :

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

menuDeroulant.parents("tr").first().find(".price")

cela va chercher la ligne "tr" correspondant au menu déroulant et ensuite chercher l'élément ".price" uniquement dans cette ligne


pour ne pas dépendre de l'affichage qui est ici un tableau, une autre façon de faire serait de lier le menu déroulant au champ texte avec "data"
http://api.jquery.com/data/

[sfarouk]

Bonjour!
Merci pour votre réponse, mais cela ne résous pas mon problème. mais il est vraie que je n'ai pas préciser que mon tableau ne se limite pas sur deux champs. c'est un tableau dont le ligne sont générées dynamiquement donc le nombre de champs je ne peux les prédéfinir.
Merci

[mathieu]

"cela ne résous pas mon problème" ne nous suffit pas pour vous aider, merci d'indiquer à chaque fois :

1. le code que vous avez essayé
2. le résultat que vous obtenez, avec le minimum de débugage des différents variables
3. le résultat que vous auriez souhaité

[Invité]

Bonjour,

à aucun endroit tu utilises l'id pour identifier chaque ligne.
Ce serait judicieux.

Vite fait :

Code :

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

1
2
3
	<select name="qty[]" class="qty" data-id="ID-DE-CETTE-LIGNE">
...
	<td><input type="text" name="price[]" value="" class="price" id="price-ID-DE-CETTE-LIGNE"></td>

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
	$("form").on('change', '.qty', function()
	{
 
		var qty = $(this).val();
		var id = $(this).data('id');
		var price = 0;
 
		$.ajax({
			url: data,
			data: {'qty':qty},
			dataType:'json',
			success: function(data)
			{
				if(data != '')
				{	 	 			
					$.each(data, function(index, element)
					{
						if( element.id == id )
						{
							price = element.price;
						}
					});
				}
				$('#price-'+id).val(price);
			}
		});
	});

N.B. J'ai parlé ici de l'id (c'est ce que je ferai avec une base de données), mais ça peut-être les index du json.

[NoSmoking]

Bonjour,
ce que je ferais lors d'un changement sur un <select> c'est de récupérer la référence à la ligne via un

Code :

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

var refTR = $(this).closest( 'tr' );

et au retour de la requête je n'aurais qu'a m'occuper de remplir les <input> de cette ligne et ce quelque soit leur nombre.

Cela sous entend bien sûr que chaque requête ne cible bien qu'une ligne, ce qui ne m’apparaît pas très clairement dans l'énoncé !