11548 sujets

JavaScript, DOM et API Web HTML5

Problème d'incrémentation de plusieurs champs avec jQuery [Résolu]

Bonjour

J'ai repris le code de "Norfou" (http://forum.alsacreations.com/topic-5-46864-1.html) et je l'ai adapté à mes besoins.

Besoins qui sont : je vais avoir plusieurs champs à incrémenter mais je ne sais pas combien (il s'agit d'un panier). Je dois me charger de la partie Intégration et toute la partie développement c'est une autre société qui va s'en charger et je n'aurais plus accès au code ensuite...

Mon problème est donc le suivant : Comment faire pour incrémenter plusieurs champs de manière totalement distincte sans savoir le nombre de champs à créer ?...


<form class="quantite"> 
	<input class="ajouter" type="button" name="ajouter" value=" " /> 
	<input readonly="readonly" class="nombre_part" type="text" class="champ" name="nombre_part" value="1" size="1" /> 
	<input class="soustraire" type="button" name="soustraire" value=" " /> 
</form>




<!-- Script pour ajouter ou supprimer une quantité dans le champ panier -->
<script type="text/javascript">
	$(function() {    // Décrémente le champ nombre_part 
	    $(".soustraire").click(function() { 
	        var valeur = $('.nombre_part').val(); 
	        if (valeur >= 2) { 
	        var nouvelleValeur = parseFloat(valeur) - 1; 
	        } 
	        $('.nombre_part').val(nouvelleValeur); 
	    }); 
	}); 
	 
	$(function() {    // Incrémente le champ nombre_part 
	    $(".ajouter").click(function() { 
	        var valeur = $('.nombre_part').val(); 
	        var nouvelleValeur = parseFloat(valeur) + 1; 
	        $('.nombre_part').val(nouvelleValeur); 
	        $('#quantity').attr("value",nouvelleValeur); 
	    }); 
	}); 
</script>


J'espère que je me suis fait comprendre ^_^ Dites moi si je n'ai pas été très claire !

Merci d'avance pour votre aide.

Mélusine
Modifié par Melusine85 (11 Jul 2011 - 17:24)
Alors vu ton balisage tu peut faire un truc très simple : pour chaque champ avec la classe nombre_part ($('.nombre_part').each()) tu cherches l'élément précédent avec prev() et l'élément suivant avec next() et tu leur applique une fonction qui met à jour la quantité du champ au click.

Ce qui donne :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<title>Panier</title>

	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {
		$('.nombre_part').each(function() {
			var field = $(this);

			$(this).prev().click(function() {
				updateQuantity(field, 1);
			});

			$(this).next().click(function() {
				updateQuantity(field, -1);
			});
		});
	});

	function updateQuantity(field, qty) {
		var val = parseFloat(field.val()) + qty;
		if (val < 0) val = 0;
		field.val(val);
	}
	</script>
</head>

<body>

<form class="quantite" action="#">

	<div>
		<input class="ajouter" type="button" name="ajouter" value="+" />
		<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
		<input class="soustraire" type="button" name="soustraire" value="-" />
	</div>

	<div>
		<input class="ajouter" type="button" name="ajouter" value="+" />
		<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />  
		<input class="soustraire" type="button" name="soustraire" value="-" />
	</div>

</form> 

</body>
</html>

Modifié par jb_gfx (11 Jul 2011 - 14:29)
Merci.

Pour tester, j'ai mis ton code ainsi que le JS dans ma page. Comme tu pourra le constater, j'ai un while, qui itère toutes mes produits (15 en tout). et donc, lors de l'ajout ou de la suppression, ça allait de 15 en 15.

Cependant, ma page est + complexe que ça...

Ci-dessous le code simplifié de ma page. La 1ère partie est dans mon header.php, contient tous les appels à mes différents scripts.

La 2ème partie, le tableau contenant ton code.

Si je mets le script de ton code à l'intérieur de ma page, mes autres JS ne fonctionnent plus...



<!-- Jquery -->
<script type="text/javascript" src="js/jquery-1.6.2.js" ></script>

<!-- Script pour Fancybox -->
<!--<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>-->
<script type="text/javascript" src="js/jquery.fancybox-1.3.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />
<script type="text/javascript">
	$(document).ready(function() {
		$("a#clic_detail").fancybox({
			'overlayShow'	: false,
			'transitionIn'	: 'elastic',
			'transitionOut'	: 'elastic'
		});
	});
</script>

<!-- Script pour mettre en forme les select -->
<link rel="stylesheet" href="css/jqtransform.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery.jqtransform.js" ></script>
<script language="javascript">
	$(function(){
		$('form').jqTransform({imgPath:'images/jqtransform'});
	});
</script>

<!-- Script pour le système de notation par étoiles -->
<script type="text/javascript" src="js/notation-etoiles.js" ></script>
					

<!-- Script pour ajouter ou supprimer une quantité -->
<script type="text/javascript">
	$(function() {
		$('.nombre_part').each(function() {
			var field = $(this);
			$(this).next().click(function() {
				updateQuantity(field, 1);
			});
			$(this).prev().click(function() {
				updateQuantity(field, -1);
			});
		});
	});
	function updateQuantity(field, qty) {
		var val = parseFloat(field.val()) + qty;
		if (val < 0) val = 0;
			field.val(val);
	}
</script>




<table class="produits">
	<?php
	$i = 1;
	while($i <= 3){
	?>
		<tr>
			<?php
			$j = 1;
			while($j <= 5){
			?>
			<td class="fond-produit">
				<div class="pos-rel"> <!-- Div créé pour mettre un position relative -->
					<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
					<span class="nom-produit">Ananas Poquito</span>
					<span class="barre"></span>
					<div class="prix-txt">
						<span class="prix">3,95€</span>
						<span class="txt">la piece</span>
					</div>

								
					<form class="quantite" action="#">
						<div>
							<input class="ajouter" type="button" name="ajouter" value="+" />
							<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
							<input class="soustraire" type="button" name="soustraire" value="-" />
						</div>
						
						<div>
							<input class="ajouter" type="button" name="ajouter" value="+" />
							<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />  
							<input class="soustraire" type="button" name="soustraire" value="-" />
						</div>
					</form> 


				</div>
			</td>
			<?php
			$j++;
			}
			?>
		</tr>
	<?php
	$i++;
	}
	?>
</table>


Je suis claire ? Je ne suis pas trop douée pour expliquer ...
Alors là on a un soucis, tu crois pas ? Smiley lol

Tu peux poster le code de ta page originale complet (le code HTML vu par le navigateur, pas de code PHP) ?
Oui je pense que j'ai un soucis ^^

J'ai enlevée certaines partie qui n'était pas incriminée (et surtout je dépassais les limites autorisée ^^)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<title>Courses Pas Chères</title>

	<link rel="stylesheet" media="screen" href="css/style.css" />
	
	
	<!-- Jquery -->
	<script type="text/javascript" src="js/jquery-1.6.2.js" ></script>

	<!--<script type="text/javascript" src="js/jquery-1.6.2.min.js" ></script>-->
	
	
	<!-- Script pour mettre en forme la scollbar -->
	<!-- styles needed by jScrollPane 
	<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />-->
	<!-- the mousewheel plugin - optional to provide mousewheel support 
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>-->
	<!-- the jScrollPane script 
	<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.scroll-pane').jScrollPane();
		});
	</script>-->
	
	<!--<script type="text/javascript" src="js/scrollbar/jquery.scroll.js"></script>
	<link rel="stylesheet" media="screen" href="js/scrollbar/scrollbar.css" />-->


	
	<!-- Script pour Fancybox -->
	<!--<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>-->

	<script type="text/javascript" src="js/jquery.fancybox-1.3.4.js"></script>
	<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css" media="screen" />
	<script type="text/javascript">
		$(document).ready(function() {
			$("a#clic_detail").fancybox({
				'overlayShow'	: false,
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'elastic'
			});
		});
	</script>
	
	
	<!-- Script pour mettre en forme les select -->
	<link rel="stylesheet" href="css/jqtransform.css" type="text/css" media="all" />
	<script type="text/javascript" src="js/jquery.jqtransform.js" ></script>
	<script language="javascript">
		$(function(){
			$('form').jqTransform({imgPath:'images/jqtransform'});
		});
	</script>

	
	
	<!-- Script pour ajouter ou supprimer une quantité -->
	<!--<script type="text/javascript" src="js/ajout-suppression-quantite.js" ></script> -->
	<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> -->

	<script type="text/javascript">
		$(function() {
			$('.nombre_part').each(function() {
				var field = $(this);
				$(this).next().click(function() {
					updateQuantity(field, 1);
				});
				$(this).prev().click(function() {
					updateQuantity(field, -1);
				});
			});
		});
		function updateQuantity(field, qty) {
			var val = parseFloat(field.val()) + qty;
			if (val < 0) val = 0;
				field.val(val);
		}
	</script>
	
	
	
	<!-- Script pour le système de notation par étoiles -->
	<script type="text/javascript" src="js/notation-etoiles.js" ></script>
	
	

	<!-- Script pour les coins arrondis sous IE 8 et inférieur -->

	<!--[if lte IE 9]> 
		<script type="text/javascript" src="js/roundies.js"> </script>
	<![endif]-->
	
	<!--[if IE 9]>
		<link rel="stylesheet" href="css/style-ie9.css" type="text/css" media="all" />
	<![endif]-->
	
	<!--[if lte IE 8]>
		<link rel="stylesheet" href="css/style-ie7-8.css" type="text/css" media="all" />
	<![endif]-->
	
	<!--[if IE 7]>
		<style type="text/css" media="screen">
			.btn-caisse{
				margin-top: -45px;
			}
		</style>
	<![endif]-->
	
	
</head>
<body>
	
	<div id="content">

	<div id="container">
		<div id="header">

			
			<div id="logos-header">
				<a href=""><img src="images/logos/logo-bienvenue.png" alt="" /> Bienvenue George Delatour </a>
				<a href=""><img src="images/logos/logo-deconnec.png" alt="" /> Déconnexion</a>
				<a href=""><img src="images/logos/logo-mem-cmd.png" alt="" />Mémoriser ma commande</a>
			</div>
			
			<a href="index.php"><img id="logo" src="images/logo.png" alt="Courses Pas Chères.com - Mangez à prix équilibré : comparer !" /></a>

		
						<ul id="menu">
	<li id="premier">
		<a href="#">
			<img src="images/logos/logo-pain.png" alt="" />
			Pain et céréales
		</a>
	</li>
	<li class="milieu">
		<a href="#">

			<img src="images/logos/logo-viande.png" alt="" />
			Viandes et Poissons
		</a>
	</li>
	<li class="milieu">
		<a href="#">
			<img src="images/logos/logo-prod-laitier.png" alt="" /> 
			Produits laitiers et Oeufs
		</a>
	</li>

	<li class="milieu">
		<a href="#">
			<img src="images/logos/logo-fruit.png" alt="" />
			Fruits et Légumes
		</a>
	</li>
	<li class="milieu">
		<a href="#">
			<img src="images/logos/logo-surgele.png" alt="" />

			Surgelés
		</a>
	</li>
	<li class="milieu">
		<a href="#">
			<img src="images/logos/logo-epicerie.png" alt="" /> 
			Épicerie
		</a>
	</li>
	<li class="milieu">

		<a href="#">
			<img src="images/logos/logo-boisson.png" alt="" />
			Boissons
		</a>
	</li>
	<li class="milieu">
		<a href="#">
			<img src="images/logos/logo-pain.png" alt="" /> <!-- A CHANGER -->
			Plats<br/>cuisinés
		</a>

	</li>
	<li class="milieu">
		<a href="#">
			<img src="images/logos/logo-pain.png" alt="" /> <!-- A CHANGER -->
			Bébé
		</a>
	</li>
	<li class="milieu">
		<a href="#">

			<img src="images/logos/logo-pain.png" alt="" /> <!-- A CHANGER -->
			Hygiène et soins
		</a>
	</li>
	<li class="milieu">
		<a href="#">
			<img src="images/logos/logo-pain.png" alt="" /> <!-- A CHANGER -->
			Animaux
		</a>

	</li>
	<li class="milieu">
		<a href="#">
			<img src="images/logos/logo-pain.png" alt="" /> <!-- A CHANGER -->
			Bio et diététique
		</a>
	</li>
	<li class="milieu">
		<a href="#">

			<img src="images/logos/logo-pain.png" alt="" /> <!-- A CHANGER -->
			Entretien
		</a>
	</li>
	<li id="dernier">
		<a href="#">
			<img src="images/logos/logo-pain.png" alt="" /> <!-- A CHANGER -->
			Bazar
		</a>

	</li>
</ul> <!-- Fin #menu -->			
			<div class="clearer"></div>
		</div> <!-- Fin #header -->
		<div class="contenu-left">
			<div class="nom-prod">Fruits</div> <!-- Fin .nom-prod -->
			<table class="produits">
			<tr>
						<td class="fond-produit">
	<div class="pos-rel"> <!-- Div créé pour mettre un position relative -->
		<img class="promo" src="images/logos/logo-promo.png" alt="" />
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<div class="clearer"></div>
		<span class="nom-produit">Ananas Poquito</span>

		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>
		<input class="img-plus-moins" type="button" />
	</div>
</td>

						<td class="fond-produit">
	<div class="pos-rel"> <!-- Div créé pour mettre un position relative -->
		<img class="promo" src="images/logos/logo-promo.png" alt="" />
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<div class="clearer"></div>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">

			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>
		<input class="img-plus-moins" type="button" />
	</div>
</td>
						<td class="fond-produit">
	<div class="pos-rel"> <!-- Div créé pour mettre un position relative -->

		<img class="promo" src="images/logos/logo-promo.png" alt="" />
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<div class="clearer"></div>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>

		</div>
		<input class="img-plus-moins" type="button" />
	</div>
</td>
						<td class="fond-produit">
	<div class="pos-rel"> <!-- Div créé pour mettre un position relative -->
		<img class="promo" src="images/logos/logo-promo.png" alt="" />
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>

		<div class="clearer"></div>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>

		<input class="img-plus-moins" type="button" />
	</div>
</td>
						<td class="fond-produit">
	<div class="pos-rel"> <!-- Div créé pour mettre un position relative -->
		<img class="promo" src="images/logos/logo-promo.png" alt="" />
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<div class="clearer"></div>

		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>
		<input class="img-plus-moins" type="button" />

	</div>
</td>
					</tr>
			<tr>
		<td class="fond-produit">
		<img class="promo" src="images/logos/logo-promo.png" alt="" />
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>

		<div class="clearer"></div>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>
		<input class="img-plus-moins" type="button" />
</td>
	<td class="fond-produit">
		<img class="promo" src="images/logos/logo-promo.png" alt="" />
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<div class="clearer"></div>

		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		<input class="img-plus-moins" type="button" />

	</div>
</td>
						<td class="fond-produit">
	<div class="pos-rel"> <!-- Div créé pour mettre un position relative -->
		<img class="promo" src="images/logos/logo-promo.png" alt="" />
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<div class="clearer"></div>
		<span class="nom-produit">Ananas Poquito</span>

		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>
		<input class="img-plus-moins" type="button" />
	</div>
</td>

	<td class="fond-produit">
		<img class="promo" src="images/logos/logo-promo.png" alt="" />
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<div class="clearer"></div>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>
		<input class="img-plus-moins" type="button" />
</td>
	<td class="fond-produit">
		<img class="promo" src="images/logos/logo-promo.png" alt="" />
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<div class="clearer"></div>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		<input class="img-plus-moins" type="button" />
	</div>
</td>
</tr>
	<tr>
		<td class="fond-produit">
		<img class="promo" src="images/logos/logo-promo.png" alt="" />
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<div class="clearer"></div>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		<input class="img-plus-moins" type="button" />
	</div>
</td>
<td class="fond-produit">
		<img class="promo" src="images/logos/logo-promo.png" alt="" />
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>

		<div class="clearer"></div>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		<input class="img-plus-moins" type="button" />
	</div>
</td>
	<td class="fond-produit">
		<img class="promo" src="images/logos/logo-promo.png" alt="" />
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<div class="clearer"></div>

		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>
		<input class="img-plus-moins" type="button" />
</td>
<td class="fond-produit">
		<img class="promo" src="images/logos/logo-promo.png" alt="" />
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<div class="clearer"></div>
		<span class="nom-produit">Ananas Poquito</span>

		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>
		<input class="img-plus-moins" type="button" />
</td>

	<td class="fond-produit">
		<img class="promo" src="images/logos/logo-promo.png" alt="" />
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<div class="clearer"></div>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">

			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>
		<input class="img-plus-moins" type="button" />
</td>
</tr>
	</table>
<div class="nom-prod">Légumes</div> <!-- Fin .nom-prod -->

<table class="produits">
<tr>
	<td class="fond-produit">
	<div class="pos-rel">
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<span class="nom-produit">Ananas Poquito</span>

		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>
<form class="quantite" action="#">
<div>
<input class="soustraire" type="button" name="soustraire" value="-" />
<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
<input class="ajouter" type="button" name="ajouter" value="+" />
</div>

</form> 
	</div>
</td>
<td class="fond-produit">
	<div class="pos-rel">
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>

			<span class="txt">la piece</span>
		</div>

<form class="quantite" action="#">
<div>
<input class="soustraire" type="button" name="soustraire" value="-" />
<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />

<input class="ajouter" type="button" name="ajouter" value="+" />
</div>

</form> 

	</div>
</td>
						<td class="fond-produit">
	<div class="pos-rel">
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>

		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>					
<form class="quantite" action="#">
<div>
<input class="soustraire" type="button" name="soustraire" value="-" />
<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
<input class="ajouter" type="button" name="ajouter" value="+" />
</div>

</form> 

	</div>
</td>
						<td class="fond-produit">
	<div class="pos-rel"> 
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">

			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>

<form class="quantite" action="#">
<div>
<input class="soustraire" type="button" name="soustraire" value="-" />

<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
<input class="ajouter" type="button" name="ajouter" value="+" />
</div>

</form> 
	</div>
</td>
						<td class="fond-produit">
	<div class="pos-rel"> 

		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>					
<form class="quantite" action="#">
<div>
<input class="soustraire" type="button" name="soustraire" value="-" />
<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
<input class="ajouter" type="button" name="ajouter" value="+" />
</div>

</form> 
	</div>
</td>
</tr>
	<tr>
	<td class="fond-produit">
	<div class="pos-rel"> 
	<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>

		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>

<form class="quantite" action="#">
<div>
<input class="soustraire" type="button" name="soustraire" value="-" />
<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
<input class="ajouter" type="button" name="ajouter" value="+" />
</div>

</form> 

	</div>
</td>
						<td class="fond-produit">
	<div class="pos-rel"> 
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">

			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>

<form class="quantite" action="#">
<div>
<input class="soustraire" type="button" name="soustraire" value="-" />

<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
<input class="ajouter" type="button" name="ajouter" value="+" />
</div>

</form> 
	</div>
</td>
<td class="fond-produit">
	<div class="pos-rel"> 

		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>

<form class="quantite" action="#">
<div>
<input class="soustraire" type="button" name="soustraire" value="-" />
<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
<input class="ajouter" type="button" name="ajouter" value="+" />
</div>

</form> 

	</div>
</td>
						<td class="fond-produit">
	<div class="pos-rel"> 
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>

		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>

<form class="quantite" action="#">
<div>

<input class="soustraire" type="button" name="soustraire" value="-" />
<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
<input class="ajouter" type="button" name="ajouter" value="+" />
</div>

</form> 
		
	</div>
</td>
						<td class="fond-produit">

	<div class="pos-rel">
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>

		</div>

<form class="quantite" action="#">
<div>
<input class="soustraire" type="button" name="soustraire" value="-" />
<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
<input class="ajouter" type="button" name="ajouter" value="+" />
</div>

</form> 
	</div>
</td>
					</tr>
			<tr>
						<td class="fond-produit">
	<div class="pos-rel"> 
	<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>

		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>			
<form class="quantite" action="#">
<div>
<input class="soustraire" type="button" name="soustraire" value="-" />
<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
<input class="ajouter" type="button" name="ajouter" value="+" />
</div>

</form> 

	</div>
</td>
<td class="fond-produit">
	<div class="pos-rel"> 
	<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">

			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>				
<form class="quantite" action="#">
<div>
<input class="soustraire" type="button" name="soustraire" value="-" />

<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
<input class="ajouter" type="button" name="ajouter" value="+" />
</div>

</form> 

	</div>
</td>
						<td class="fond-produit">
	<div class="pos-rel">
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>

<form class="quantite" action="#">
<div>
<input class="soustraire" type="button" name="soustraire" value="-" />
<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
<input class="ajouter" type="button" name="ajouter" value="+" />
</div>

</form> 
		

	</div>
</td>
<td class="fond-produit">
	<div class="pos-rel">
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>

		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>
		</div>					
<form class="quantite" action="#">
<div>

<input class="soustraire" type="button" name="soustraire" value="-" />
<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
<input class="ajouter" type="button" name="ajouter" value="+" />
</div>

</form> 

	</div>
</td>
<td class="fond-produit">

	<div class="pos-rel">
		<a id="clic_detail" href="#page-detail"><img class="img-produit" src="images/produits/ananas.jpg" alt="Ananas Poquito" /></a>
		<span class="nom-produit">Ananas Poquito</span>
		<span class="barre"></span>
		<div class="prix-txt">
			<span class="prix">3,95€</span>
			<span class="txt">la piece</span>

		</div>					
<form class="quantite" action="#">
<div>
<input class="soustraire" type="button" name="soustraire" value="-" />
<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
<input class="ajouter" type="button" name="ajouter" value="+" />
</div>

</form> 

	</div>
</td>
	</tr>
	</table>

		</div> <!-- Fin div .contenu-left -->

		</div> <!-- Fin #content -->
	</div> <!-- Fin div #container -->
</body>
</html>


Merci de m'aider !
Avec ta page j'ai bien tes autres JS qui fonctionnent chez moi. Par contre mon code ne fonctionne pas parce que tu utilises jqTransform pour styler tes éléments de formulaire. Comme il ajoute des divs pour englober les input mon script ne fonctionne plus.

J'ai modifié mon code comme ça :


$(function() { 
  $('.nombre_part').each(function() { 
    var field = $(this); 
    $(this).closest('.jqTransformInputWrapper').next().click(function() { 
      updateQuantity(field, 1); 
    }); 
    $(this).closest('.jqTransformInputWrapper').prev().click(function() { 
      updateQuantity(field, -1); 
    }); 
  }); 
}); 
function updateQuantity(field, qty) { 
  var val = parseFloat(field.val()) + qty; 
  if (val < 0) val = 0; 
    field.val(val); 
}


Et ça marche bien (et le formulaire est bien stylisé).
Modifié par jb_gfx (11 Jul 2011 - 17:09)
Tu édites ton premier message (bouton "Editer" à droite de la date du message) et tu rajoutes [résolu] à la mano.
Sujet clos
Aller à