11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Problème d'incrémentation d'un champ avec jQuery

Bonjour,
Je tente de faire une fonction toute bête avec jQuery qui incrémente ou décrémente un champ "quantité" lorsqu'on clique sur un bouton "+" ou "-".

J'ai donc mon code HTML que voici :

<form id="quantite">
			<label>
				<span class="gras">Nombre de part : </span>
				<input id="soustraire" type="button" name="soustraire" />
				<input readonly="readonly" id="nombre_part" type="text" class="champ" name="nombre_part" value="1" size="1" />
				<input id="ajouter" type="button" name="ajouter" />								
			</label>
		</form>


Ainsi que mon code Jquery :

$(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);
	});
});


Deux problèmes se posent :
Tout d'abord, ce code fonctionne très bien sur Internet Explorer, mais pas sous Firefox.
Plus précisément, sous Firefox lorsque je clique sur le bouton "-" cela décrémente bien mon champ #nombre_part, mais si je clique sur le bouton "+" le champ ne s'incrémente pas.
J'ai l'impression qu'en cliquant sur le bouton "+" cela lance la fonction d'incrémentation et la fonction de décrémentation. J'ai relu plusieurs fois mon code mais je ne vois pas d'où cela peut venir...
Mon deuxième problème est que je souhaiterai que le champ #nombre_part sois en lecture seule, j'utilise donc pour cela l'attribut readonly="readonly" mais celui-ci reste désespérément cliquable...

Je vous remercie de toute l'aide que vous pourrez m'apporter.
Modifié par Norfou (18 Feb 2010 - 14:27)
Déjà si tu veux voir si tes 2 fonctions sont appellés lors du clic sur l'ajout, de simple alert() au milieu des binds te permettraient de vérifier ça.
Merci MoOx pour ta réponse,
J'ai testé avec un alert dans chaque fonction et lorsqu'on clique sur le bouton "+" les deux fonctions sont exécutées et je ne comprends toujours pas pourquoi.
J'ai échangé de place les boutons, le bouton "+" se trouve à la place du bouton "-" et vice-versa; le problème se produit alors sur le bouton "-"...
A l'aide! Smiley cligne 
<form id="quantite">
	<label for="nombre_part"><span class="gras">Nombre de part : </span></label>
	<input id="soustraire" type="button" name="soustraire" value="soustraire" />
	<input readonly="readonly" id="nombre_part" type="text" class="champ" name="nombre_part" value="1" size="1" />
	<input id="ajouter" type="button" name="ajouter" value="ajouter" />
</form>
Sujet clos
Aller à