11548 sujets

JavaScript, DOM et API Web HTML5

Afficher formulaire au clic [Résolu]

Bonjour

Et oui, encore moi...

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



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



#quantite {
	display: none;
}
	.quantite-clic {
		display: block !important;
	}



Je suis une novice en JavaScript..

Merci d'avance !!
Modifié par Melusine85 (21 Jul 2011 - 10:05)
Bonjour à toutes et à tous,

voici un exemple de ce que tu veux faire :
<!doctype html> 
<html> 
<head> 
<title>test</title> 
<script type="text/javascript"> 
function bascule(id) 
{ 
	if (document.getElementById(id).style.visibility == "hidden")
			document.getElementById(id).style.visibility = "visible"; 
	else	document.getElementById(id).style.visibility = "hidden"; 
} 
</script> 
<style type="text/css"> 
#header { 
		background-color	: lightblue; 
} 
 
#bouton { 
		background-color	: lightyellow; 
		width				: 100px; 
		height				: 50px; 
 
		display				: block; 
		border				: 1px solid yellow; 
		margin				: 5px; 
		text-align			: center; 
} 
</style> 
</head> 
 
<body> 
<div id="bouton" onclick="bascule('header');">bouton</div> 
 
<div id="header">bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</div>

<div>ce bloc ne bouge pas !</div>
</body> 
</html>
@+
Bonjour

Merci Artemus, j'ai trouvé la réponse à mon problème entre temps.

Voici pour ceux que ça pourrais aider :

Code HTML : 
<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 : 
$(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 */
}


Bonne journée
Sujet clos
Aller à