11537 sujets

JavaScript, DOM et API Web HTML5

Engriser ou non des champs dans un formulaire

Bonjour,

Dans un formulaire je demande via des radio/checkbox si la personne souhaite laisser son/ses adresse MSN, yahoo ou autre. Si oui de choisir quoi, et enfin de donner l'adresse.

Je souhaite donc empêcher l'accès au checkbox si on a répondu "non" et empêcher l'accès aux champs input si la checkbox associer n'est pas coché

Je n'ai rien trouvé sur le net pour cause de manque d'imagination avec les mots clé Smiley ohwell


Merci d'avance Smiley smile 

<form id="invitation" method="post" action="" onsubmit="return verifSelection(this)" >
<label><input id="oui_non" name="oui_non" type="radio" />Non</label><br />
<label><input id="oui_non" name="oui_non" type="radio" />Oui :</label><br />
<label><input id="msn" name="msn" type="checkbox" value="1" /> MSN messenger</label>
<input id="msn" name="msn" type="input" value="adresse@hotmail.fr" onfocus="this.value='';" onblur="if (this.value=='') this.value='adresse@hotmail.fr'" /><br />

<label><input id="yahoo" name="yahoo" type="checkbox" value="1" /> Yahoo messenger</label>
<input id="yahoo" name="yahoo" type="input" value="adresse@yahoo.fr" onfocus="this.value='';" onblur="if (this.value=='') this.value='adresse@yahoo.fr'" /><br />
</form>

Modifié par Spark (12 Sep 2007 - 01:17)
Serts-toi de l'attribut disabled et de l'évènement onclick.

P.S. Je pense que tu aurais du poster dans javascript, mais bon c'est pas grave.
QuentinC a écrit :
Je pense que tu aurais du poster dans javascript

Hop, sujet déplacé. Smiley smile
Modérateur
Salut,

On peut aussi imaginer de planquer les cases à cocher au chargement et de ne les afficher que si on clique sur oui.
koala64 a écrit :
Salut,

On peut aussi imaginer de planquer les cases à cocher au chargement et de ne les afficher que si on clique sur oui.


Oui ça serait bien, as tu une piste pour ça ?




Merci pour vos conseil, j'ai glané ici et là des informations et je suis tout content d'avoir fais un code qui fonctionne enfin.

Toutefois je trouve que ce que j'ai fait est probablement pas très optimisé, si vous voulez bien jeter un oeil et me dire si vous avez autre chose à proposer.

<script>
<!--
function active_messenger()
	{
		// Dégrise les checbox
		document.getElementById('msn1').disabled = false;
		document.getElementById('yahoo1').disabled = false;
// et d'autre
	}
function desactive_messenger()
	{
		// Grise les checbox
		document.getElementById('msn1').disabled = true;
		document.getElementById('yahoo1').disabled = true;
// et d'autre
	
		// Décoche les checbox
		document.getElementById('msn1').checked = false ;
		document.getElementById('yahoo1').checked = false ;
// et d'autre
		
		// Grise les input
		document.getElementById('msn2').disabled = true ;
		document.getElementById('yahoo2').disabled = true ;
// et d'autre
	}
	
	
function degriser()
{
	if (document.forms["invitation"].msn1.checked)
		{
			// Dégrise le input
			document.getElementById('msn2').disabled = false ;
		}
	else
		{
			// Grise le input
			document.getElementById('msn2').disabled = true ;
		}
		
	if (document.forms["invitation"].yahoo1.checked)
		{
			// Dégrise le input
			document.getElementById('yahoo2').disabled = false ;
		}
	else
		{
			// Grise le input
			document.getElementById('yahoo2').disabled = true ;
		}
}
// -->
</script>


<form id="invitation" method="post" action="" onsubmit="return verifSelection(this)" >
	<label><input id="oui_non" name="oui_non" type="radio" checked="checked" onclick="desactive_messenger()" />Non</label><br />
	<label><input id="oui_non" name="oui_non" type="radio" onclick="active_messenger()" />Oui :</label><br />
	<label><input id="msn1" name="msn1" type="checkbox" value="1" disabled="disabled" onclick="degriser()"/> MSN messenger</label>
	<input id="msn2" name="msn2" type="input" value="adresse@hotmail.fr" disabled="disabled" onfocus="this.value='';" onblur="if (this.value=='') this.value='adresse@hotmail.fr'" /><br />
	<label><input id="yahoo1" name="yahoo1" type="checkbox" value="1" disabled="disabled" onclick="degriser()"/> Yahoo messenger</label>
	<input id="yahoo2" name="yahoo2" type="input" value="adresse@yahoo.fr" disabled="disabled" onfocus="this.value='';" onblur="if (this.value=='') this.value='adresse@yahoo.fr'" /><br />
</form>
J'ai trouvé comment masqué plutôt que de griser, le résultat est pas mal et ça fais moins de JavaScript.

Toutefois cela pose un problème d'accessibilité car si le JavaScript est désactivé les champs seront en permanence caché.

Qu'en pensez vous ?

<script>
<!--
function active_messenger()
	{
		// Dégrise les checbox
		document.getElementById('msn1').disabled = false;
		document.getElementById('yahoo1').disabled = false;
	}
function desactive_messenger()
	{
		// Grise les checbox
		document.getElementById('msn1').disabled = true;
		document.getElementById('yahoo1').disabled = true;
	
		// Décoche les checbox
		document.getElementById('msn1').checked = false ;
		document.getElementById('yahoo1').checked = false ;
		
		// Masque les input
		document.getElementById('display_msn2').style.display = 'none';
		document.getElementById('display_yahoo2').style.display = 'none';
	}
	
	
function degriser_messenger()
{
	if (document.forms["invitation"].msn1.checked)
		{
			// Affiche le input
			document.getElementById('display_msn2').style.display = '';
		}
	else
		{
			// Masque le input
			document.getElementById('display_msn2').style.display = 'none';
		}
		
	if (document.forms["invitation"].yahoo1.checked)
		{
			// Affiche le input
			document.getElementById('display_yahoo2').style.display = '';
		}
	else
		{
			// Masque le input
			document.getElementById('display_yahoo2').style.display = 'none';
		}
}

// -->
</script>


<form id="invitation" method="post" action="" onsubmit="return verifSelection(this)" >
	<label><input id="oui_non" name="oui_non" type="radio" checked="checked" onclick="desactive_messenger()" />Non</label><br />
	<label><input id="oui_non" name="oui_non" type="radio" onclick="active_messenger()" />Oui :</label><br />	
	<label><input id="msn1" name="msn1" type="checkbox" value="1" disabled="disabled" onclick="degriser_messenger()"/> MSN messenger</label><br />
	<div id="display_msn2" style="display:none;">      <input id="msn2" name="msn2" type="input" value="adresse@hotmail.fr" onfocus="this.value='';" onblur="if (this.value=='') this.value='adresse@hotmail.fr'" /><br /></div>
	<label><input id="yahoo1" name="yahoo1" type="checkbox" value="1" disabled="disabled" onclick="degriser_messenger()"/> Yahoo messenger</label><br />
	<div id="display_yahoo2" style="display:none;">      <input id="yahoo2" name="yahoo2" type="input" value="adresse@yahoo.fr" onfocus="this.value='';" onblur="if (this.value=='') this.value='adresse@yahoo.fr'" /><br /></div>
</form>
Modérateur
Salut,

Spark a écrit :
Toutefois cela pose un problème d'accessibilité car si le JavaScript est désactivé les champs seront en permanence caché.
C'est à Javascript de planquer les champs au chargement de la page, pas à CSS. Il te faut donc supprimer les style="display: none;" et les inclure dans le JS (en plus de ce que tu as fait) sur l'événement (on)load. Ainsi, tu n'as plus de problème d'accessibilité en cas de d'indisponibilité du langage. Smiley cligne
Merci mais je ne peux pas utiliser onload, car celui-ci ne fonctionne que dans les balises, body, img, ifram et objetc semble t-il.

J'ai quand même tenté le coup dans body mais sans succès.


Je ne souhaite pas mettre du Javascript sur toute mets pages via body alors que je n'en ai besoin que sur une page.

Je vais mettre la partie header dans un include.


Dans la section tutoriels en JavaScript j'ai trouvé cette fonction :

function addLoadListener(func) {
   if (window.addEventListener) {
      window.addEventListener("load", func, false);
   } else if (document.addEventListener) {
      document.addEventListener("load", func, false);
   } else if (window.attachEvent) {
      window.attachEvent("onload", func);
   }
}


Mois on a oublié d'expliquer comment on s'en sert Smiley langue
Modifié par Spark (13 Sep 2007 - 14:39)
J'ai trouvéééé (enfin)

window.onload = function() {

	document.getElementById('display_publique').style.display = 'none';
	document.getElementById('display_msn2').style.display = 'none';
	document.getElementById('display_yahoo2').style.display = 'none';
}


Mais franchement je trouve qu'il y beaucoup de répétition !
Modérateur
Salut,

Spark a écrit :
Mais franchement je trouve qu'il y beaucoup de répétition !
Tu n'as qu'à faire une boucle sur un tableau d'identifiants. Smiley cligne
J'ai un petit souci dont je ne suis pas parvenu à trouvé de solution sur le net.

J'initialise le formulaire au chargement de la page, mais il faudrai que j'empêche ça lorsque le formulaire est soumis avec des erreur (puisque du coup on reste et on recharge le formulaire).

J'ai cherché comment tester l'existence ou non d'une variable post, mais pas moyen ...

Je cherche un truc dans ce genre là :

if (!isset($_POST["mavariable"])) 
     {
          //Je peux initialiser
     }

Modifié par Spark (26 Sep 2007 - 16:45)
Bonjour,
Pour répondre à ta question d'initialisation tu peux faire quelque chose de ce genre:

if (!isset($_POST['premierefois'])) 
     {
          //Je peux initialiser
     }

à condition de prévoir dans ton formulaire un champs 'caché' correspondant de ce genre:
<input type="hidden" name="premierefois" value="non">

Bon courage Smiley cligne
Spark a écrit :
Heu je demande quelque chose en Javascript.

Ce n'était pas très clair... A ma connaissance, ce n'est pas possible.
Si tu veux quelque chose en js, il faut passer par des variables GET. C'est pas possible d'accéder aux variables POST en js.

Rien ne t'interdit de combiner du GET et du POST dans le même formulaire par contre.
comar91 vient de me donner une idée, je vais conditionner l'affichage du JavaScript avec PHP ^^


Ok QuentinC, c'est bon à savoir.
Modifié par Spark (27 Sep 2007 - 10:58)
Sujet clos
Aller à