Discussion :

[the_tiger85]

Bonjour

Je souhaiterais afficher mon formulaire au clic sur un bouton (qui lui devra ce rendre invisible).
Pour le moment ça fonctionne en partie, cad, lors du clic sur mon bouton, mon formulaire s'affiche bien mais mon bouton reste en place, comment faire pour le faire disparaitre ?

Et seconde question, mon formulaire permet d'ajouter ou de supprimer une quantité (c'est un Javascript qui me permet de faire cette partie), si celle-ci est à 0, il faudrait ré afficher mon bouton et non plus mon formulaire.

Et dernière petite chose, là je ne vous ai mis qu'un formulaire mais j'en ai plusieurs sur la même page et il faudrait qu'ils soit tous indépendant les uns des autres...

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<input type="button" class="img-plus-moins" value="" onclick="javascript:document.getElementById('quantite').className='quantite-clic';" />
 
<form id="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>

Code :

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

1
2
3
4
5
6
7
 
#quantite {
	display: none;
}
	.quantite-clic {
		display: block !important;
	}

Je suis une novice en JavaScript..

Merci d'avance !!

Mélusine

[RomainVALERI]

comment faire pour le faire disparaitre ?

Code :

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

document.getElementById("idDuBouton").style.display = "none";

Et seconde question, mon formulaire permet d'ajouter ou de supprimer une quantité (c'est un Javascript qui me permet de faire cette partie), si celle-ci est à 0, il faudrait ré afficher mon bouton et non plus mon formulaire.

Et dernière petite chose, là je ne vous ai mis qu'un formulaire mais j'en ai plusieurs sur la même page et il faudrait qu'ils soit tous indépendant les uns des autres...

Heu... quelle "question" ? Je n'en vois aucune ici.

[the_tiger85]

Je souhaiterais afficher mon formulaire au clic sur un bouton (qui lui devra ce rendre invisible).
Pour le moment ça fonctionne en partie, cad, lors du clic sur mon bouton, mon formulaire s'affiche bien mais mon bouton reste en place, comment faire pour le faire disparaitre ?

Cette partie est réglé, merci RomainVALERI pour ton bout de code. Maintenant mon formulaire s'affiche et mon bouton disparaît lors du clic sur ce dernier (comme par magie ^_^)

Code :

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

1
2
3
4
5
6
7
8
9
10
 
<input type="button" id="test" class="img-plus-moins" value="" onclick="javascript:document.getElementById('quantite').className='quantite-clic'; document.getElementById('quantite').style.display = 'block'; document.getElementById('test').style.display = 'none';" />
 
<form id="quantite" action="#" style="display:none">
	<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>

Et seconde question, mon formulaire permet d'ajouter ou de supprimer une quantité (c'est un Javascript qui me permet de faire cette partie), si celle-ci est à 0, il faudrait ré afficher mon bouton et non plus mon formulaire.

Euu oui effectivement je n'ai pas formulée de question clair mais ça y ressemble non ?
En fait, maintenant que j'ai mon formulaire d'affiché et mon bouton disparu, je voudrais, lorsque la quantité est à 0, que mon formulaire passe en display:none et mon bouton repasse en display:block.

Et dernière petite chose, là je ne vous ai mis qu'un formulaire mais j'en ai plusieurs sur la même page et il faudrait qu'ils soit tous indépendant les uns des autres...

Ca c'est pas encore gagnée ...

[RomainVALERI]

En fait, maintenant que j'ai mon formulaire d'affiché et mon bouton disparu, je voudrais, lorsque la quantité est à 0, que mon formulaire passe en display:none et mon bouton repasse en display:block.

Qu'est-ce qui te pose problème ici ?
- désigner ces éléments dans ton code JS ? (>>> document.getElementById)
- faire un test ? (>>> if)
- l'accès aux propriétés de style ? (>>> voir la première partie (résolue) du post)

A priori, rien de méchant, mais dis-nous si un de ces points te pose un problème

[the_tiger85]

- désigner ces éléments dans ton code JS ? (>>> document.getElementById)

Cette partie je pense que je commence à comprendre.

- faire un test ? (>>> if)

Ça doit être la même chose que en php je suppose ?


Mon problème c'est : comment récupérer la valeur de mon input afin de permettre la disparition de mon formulaire et le réaffichage de mon bouton lorsque le input est = à 0 ? (les valeurs sont géré par javascript)

Code qui permet la modif du champ input grâce à deux boutons + et - :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('.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 si tu est allé voir ma page, tu à pu constaté que j'ai plusieurs fois le même bouton (le gros + vert), et pour l'instant, avec mon code, si je clic sur n'importe lequel, il n'y a que le 1er qui réagis... Je suppose qu'il faille le mettre dans un JS à part avec le .each(function() mais vu que c'est au clic, ... Bref, je m'embrouille et ça me prend la tête

[the_tiger85]

C'est bon, j'ai trouvé mon bonheur, pour ceux que ça pourrais aider :

Code HTML :

Code :

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

1
2
3
4
5
6
7
8
9
<input type="button" id="test_<?php echo $k; ?>" class="img-plus-moins" value="" onclick="javascript:cacherBlock(<?php echo $k; ?>);" />
 
<form id="quantite" name="quantite_<?php echo $k; ?>" action="#" style="display:none">
	<div>
		<input class="soustraire" id="<?php echo $k; ?>" type="button" name="soustraire" value="" onclick="javascript:cacherForm(<?php echo $k; ?>);" />
		<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>

Code 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
22
23
24
25
26
27
$(function() { 
	$('.nombre_part').each(function() { 
		var field = $(this); 
		$(this).closest('.jqTransformInputWrapper').next().click(function() {
			updateQuantity(field, 1, $(this).attr('id'));
		}); 
		$(this).closest('.jqTransformInputWrapper').prev().click(function() { 
			updateQuantity(field, -1, $(this).attr('id'));
		}); 
	});
}); 
 
 
function updateQuantity(field, qty, id) { 
	var val = parseFloat(field.val()) + qty; 
	if (val < 0 || val == 0) {
		val = 0; 
		$("input[id=test_" + id + "]").css("display", "block"); /* Afficher le bouton plus */
		$("form[name=quantite_" + id + "]").css("display", "none"); /* Cacher le formulaire */
	} 
	field.val(val); 
}
 
function cacherBlock(i) { 
	$("input[id=test_" + i + "]").css("display", "none"); /* Afficher le formulaire */
	$("form[name=quantite_" + i + "]").css("display", "block"); /* Cacher le bouton plus */
}

Merci à RomainVALERI de m'avoir aiguillée ^^