Remplir un champ input à partir d'un champ select en jquery

Version imprimable

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:

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:

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:

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

10/05/2017, 14h00
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:

var menuDeroulant = $(this);

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

Code:

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/
10/05/2017, 15h14
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
10/05/2017, 19h52
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é

Bonjour,

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

Vite fait :

Code:

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:

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.

11/05/2017, 15h24
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:

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é !