11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,

Je cherche à masquer un bouton radio (à cocher) si un champ input "marque" contient + de X caractères.

mon formulaire s'appelle formupload

mes styles :

	  #choix_xl { display: block; }	
	  #choix_l { display: block; }	
	  #choix_m { display: block; }	
	  #choix_s { display: block; }	


mes boutons radio du formulaire:

 <div id="choix_s">  <input type="radio" name="size" id="S" value="S" />
        <label for="S"><span style="color:#FFFFFF; font-family:Arial; font-size:10px;">Petit format (S)</span></label></div>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <div id="choix_m">   <input type="radio" name="size" id="M" value="M" />
      <label for="M"><span style="color:#FFFFFF; font-family:Arial; font-size:10px;">Moyen format (M)</span></label></div>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     <div id="choix_l">  <input type="radio" name="size" id="L" value="L" />
      <label for="L"><span style="color:#FFFFFF; font-family:Arial; font-size:10px;">Grand format (L)</span></label></div>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <div id="choix_xl"> <input type="radio" name="size" id="XL" value="XL" />
      <label for="XL"><span style="color:#FFFFFF; font-family:Arial; font-size:10px;">Tr&egrave;s grand format (XL)</span></label></div>



le code javascript qui cache le bouton radio si le champ marque contient un certain nombre de caractères :
function affiche_cache()
    {	
         
        if (document.formupload.marque.value.length >= 20) {
            document.getElementById("choix_xl").style.display = "none"
        };
		if (document.formupload.marque.value.length >= 23) {
            document.getElementById("choix_xl").style.display = "none"
			document.getElementById("choix_l").style.display = "none"
        };
		if (document.formupload.marque.value.length >= 25) {
            document.getElementById("choix_xl").style.display = "none"
			document.getElementById("choix_l").style.display = "none"
			document.getElementById("choix_m").style.display = "none"
        };
		
 }


mon champ qui doit interagir sur l'affichage ou non du bouton radio est :
<input name="marque" type="text" id="marque" size="112" onKeyDown="affiche_cache();" onKeyUp="affiche_cache();"  onfocus="affiche_cache(); " class="noir" value="" />


Jusque là ça va, mais quand je "retire" des caractères dans mon champ marque les boutons radios ne réapparaissent pas !

Même si j'ajoute au script :

if (document.formupload.marque.value.length <= 19) {
            document.getElementById("choix_xl").style.display = "block"
			document.getElementById("choix_l").style.display = "block"
			document.getElementById("choix_m").style.display = "block"



Quelqu'un voit-il pourquoi ? Je continue de chercher...

Merci pour vos réponses
Modifié par pareto (20 Jun 2012 - 19:09)
J'ai rien dit....

en fait ça marche bien

désolé du dérangement

Pour ceux ou celles que ça interesse :

function affiche_cache()
    {	
         
        if (document.formupload.marque.value.length >= 20) {
            document.getElementById("choix_xl").style.display = "none"
        };
		if (document.formupload.marque.value.length >= 23) {
            document.getElementById("choix_xl").style.display = "none"
			document.getElementById("choix_l").style.display = "none"
        };
		if (document.formupload.marque.value.length >= 25) {
            document.getElementById("choix_xl").style.display = "none"
			document.getElementById("choix_l").style.display = "none"
			document.getElementById("choix_m").style.display = "none"
        };
		
		 if (document.formupload.marque.value.length <= 19) {
            document.getElementById("choix_xl").style.display = "block"
			document.getElementById("choix_l").style.display = "block"
			document.getElementById("choix_m").style.display = "block"
        };
		if (document.formupload.marque.value.length <= 22) {
			document.getElementById("choix_l").style.display = "block"
			document.getElementById("choix_m").style.display = "block"
			
        };
		if (document.formupload.marque.value.length <= 24) {
			document.getElementById("choix_m").style.display = "block"

        };
		
 }

Modifié par pareto (20 Jun 2012 - 19:05)