Afficher formulaire au clic

Version imprimable

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:

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:

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

20/07/2011, 13h46
RomainVALERI

Citation:

Envoyé par the_tiger85

comment faire pour le faire disparaitre ?

Code:

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

Citation:

Envoyé par the_tiger85

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...

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

Citation:

Envoyé par 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 :D ^_^)
Code:

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>
Citation:

Envoyé par the_tiger85

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.

Citation:

Envoyé par the_tiger85

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 ...

20/07/2011, 14h56
RomainVALERI

Citation:

Envoyé par the_tiger85

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 :)

Citation:

Envoyé par RomainVALERI

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

Cette partie je pense que je commence à comprendre.

Citation:

Envoyé par RomainVALERI

- 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:

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 8O

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

Code HTML :

Code:

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:

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 ^^