11548 sujets

JavaScript, DOM et API Web HTML5

JQuery : action if input not empty ?

Bonjour à tous!

Je suis en train de réaliser un formulaire.
Voici ce que je souhaite faire :
- opacity à 50% de div.champ si input est vide
- opacity à 100% de div.champ si input est rempli

Ce ne sont que des champs de type texte.

Voici le code HTML : 

<div class="champ">
<input type="text" value=""/>
</div>



Et voici mon jQuery :
if(jQuery('input').val()==''){
jQuery(this).parent().find.animate({opacity:0.5},
300, function(){});}else{
jQuery(this).parent().animate({opacity:1},
300, function(){});}


J'ai dû mal écrire un truc?

Merci par avance Smiley smile
Sarah
Merci de ta réponse remink!
J'ai essayé la technique que tu m'a proposée, mais cela ne fonctionne pas : que j'écrire ou non quelque chose dans mon input, cela ne change rien.
Tu as essayé de ton côté?

(je sais, je suis un peu blonde Smiley smile )

Voici le code jquery que j'ai réalisé grâce à ton lien :
jQuery("input:text").focus(function(){
jQuery(this).parent().animate({opacity:1}, 300, function(){});
});
  
jQuery("input:text").blur(function(){
if (jQuery("input:text").val() == "") {
jQuery(this).parent().animate({opacity:0.6}, 300, function(){});
}
else{
jQuery(this).parent().animate({opacity:1}, 300, function(){});
}
});


Qu'est-ce que j'ai (encore) mal fait ?
Modifié par sarahhh (13 Jul 2011 - 12:07)
Essaie : 

jQuery('input').focus(function(){
     jQuery(this).animate({opacity: 0.5}, 300);
});

jQuery('input').blur(function(){
     if(jQuery(this).val() == '')
     {
          jQuery('.champ').animate({opacity: 0.5}, 300);
     }
     else
     {
          jQuery('.champ').animate({opacity: 1}, 300);
     }
});


Pas beson d'utiliser function() à la fin si tu ne t'en sers pas, et je pense que le problème vient de $(this) qui ne vaut pas input vu que if n'est pas une fonction.

PS : Tu devrais utiliser autre chose que 'input' si tu ne veux pas avoir des problèmes quand tu auras plusieurs input dans ta page, utilise par exemple une classe ou un id.

Et puis tu peux utiliser $('...') plutôt que jQuery('...') si tu n'utilises pas d'autre librairie.
Modifié par Skoua (14 Jul 2011 - 03:16)
Sujet clos
Aller à