11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Val() undifined Jquery

Bonjour à tous,

Je dois afficher un prix "instantanément" en fonction d'une quantité et d'un lieu de livraison. Nous souhaitons que ce prix s'affiche dés que l'internaute a cliqué sur le champs quantité.

Voici le html 

<div class="miniature">
	<p>Mai/Juin</p>
	<img src="http://placehold.it/250x250" class="img-thumbnail">
	<form method="post" role="form">
		<div class="form_miniature">
			<div class="form-group">
				<div class="row">
				        <div class="prix" data-price-fr="4.50" data-price-monde="5">4.50<span> €</span></div>
				</div>
				<div class="row">
					<div class="col-md-5">
						<label for="quantite" class="label_top">quantité</label> 
						<input type="number" class="form-control radius quantite_numero" value="1" min="0" max="100"placeholder="quantité" data-price="7">
				          </div>
				<div class="col-md-7">
					<label for="abonnement" class="label_top">Lieu de livraison</label>  
					<select name="lieu_livraison_numero" class="form-control radius lieu_livraison_numero"> 
						<option value="fr">France métroplitaine</option>
						<option value="monde">TOM & reste du monde</option>	
					</select>
				</div>
			</div>
			<div class="row">
				<button type="submit" class="btn_ajout btn btn-default radius">Ajoutez au panier</button> 
			</div>
		</div>
	</div>
</form> 
</div>


Et ci-après le bout de Jquery me renvoyant constemment undifined pour la variable prix.
Je ne sais pas pourquoi il ne trouve pas la valeur suivante : 

$(this).parent('.miniature').find('.lieu_livraison_numero option:selected').val()

Ci après le code Jquery complet:

$('.quantite_numero').click(function(){
	var qtite = $(this).val();
	if($(this).parent('.miniature').find('.lieu_livraison_numero option:selected').val() == "fr"){
	    var prix = $(this).parent('.miniature').find('.prix').attr('data-price-fr');
		}
	 else{
	    var prix = $(this).parent('.miniature').find('.prix').attr('data-price-monde');
		}
	var result = prix * qtite;
        $(this).parent('.miniature').find('.prix').html(result);
				});


PS j'ai aussi essayé avec text() et html().
Modifié par Soxy95 (18 Apr 2016 - 11:50)
Salut,

Dans un premier temps, l'événement déclenché par un "input" est "change" et non "click". Tu peux également détecter l'event "keyup" pour une mise à jour au mieux.
Ensuite tu as un souci sur l'utilisation de .parent() : il ne trouve rien car ça n'est pas un parent DIRECT, pour faire ce que tu veux, il faut utiliser .closest() ou bien .parents().

Au lieu d'avoir une condition, tu peux directement appeler ton prix indiqué dans tes data-price avec la valeur de la région géographique, tu as fait les choses bien, les valeurs correspondent, profites-en...

Pour la récupération de tes prix, ça serait pas mal d'aller les chercher en AJAX dans une base de données, car ton système de data-price peut trouver ses limites rapidement et rien n'empêche un utilisateur de le modifier...

Voici un pen de ton cas : http://codepen.io/korell/pen/LNmXrq?editors=1010
Ah oui, il faus êtres préci, sinons ons obtient pa toujour ce que l'ons veu Smiley cligne
Pense quand même à la récupération de tes prix via une interrogation à une base de données, ça serait plus fiable et sécurisé.
Bonne journée
Sujet clos
Aller à