Une Value qui disparait après un slideDown()

**Pecose** · 15/02/2013, 07h48

Bonjour à vous qui me venez en aide.
Voilà mon problème:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
//code jQuery
$(document).ready(function(){
	$(".input_text").click(function(){
                    if ($(".xox").is(":hidden")){
                        $(".xox").slideDown("slow");
                    }
                    else{
                        $(".xox").slideUp("slow");
                    }					
	});

code HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" value="BONJOUR"  class="input_text" /></p>

J'ai écrit ce code de quinze façons differentes et à chaque fois la value disparaît une fois que l'input a été enroulée ou surtout déroulée.
Jusqu'à ce qu'il gagne puis qu'il perde le focus alors que le code HTML est intacte et que value="BONJOUR"!!!

Ca fait une semaine que je suis dessus, je pleure, j'ai grandement besoin d'aide.

**danielhagnoul** · 15/02/2013, 10h52

Envoyé par Pecose

Bonjour à vous qui me venez en aide.
Voilà mon problème: ...

Impossible de tester sans la totalité des codes (CSS, HTML, JS).

**Vercetti** · 15/02/2013, 12h11

Il nous manque quelques éléments (quel élément est rattaché à la classe xox, quelle value disparait?), j'ai testé en créent une div bidon

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<div class="xox">aaaa</div>

et ton code fonctionne chez moi !!

**Pecose** · 15/02/2013, 12h15

Voila le code, c'est tres simple:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
	<head>
		<title>Index</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
		<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<style type="text/css"> .class1 {display:none;} </style>
		<script  type="text/javascript">
                // mon code
                </script>
	</head>
 
	<body>
		<form action="index.php" method="post" title="formulaire" class="form">
				<input type="text" value="LOGIN" class="class1"/></p>	
			<input type="button" value="valide" class="valide"/>
		</form>	
	</body>
</html>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
$(".valide").click(function(){
        if ($(".class1").is(":hidden")){
            $(".class1").slideDown("slow");
        }
        else{
            $(".class1").slideUp("slow");
        }					
});});

La div ne sert qu'a dérouler plusieurs type="text" de façon homogene.
Je déroule le tout en meme temps pour enlever le saut de ligne que provoque
l'apparition des type="text".

Regarde cette value:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="text" value="LOGIN" class="class1"/>

Normalement elle est affichée a l'interieur du champs, mais là ce n'est pas le cas.La value ne disparait pas dans le code HTML mais a l'affichage...
Elle est là mais elle est pas visible.

**Vercetti** · 15/02/2013, 12h35

Tu utilises quel navigateur ?
Ca fonctionne pour moi sous firefox je vois la value, mais pas sous chrome!

**Vercetti** · 15/02/2013, 13h49

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
fadeIn("slow");
fadeOut("slow")

à l'air de fonctionner avec les différents navigateurs sans supprimer la value

**Pecose** · 15/02/2013, 16h55

Effectivement je suis sous chrome...
Comment dire...
En fait, j'ai trouvé la solution TOTALEMENT par hasard en me trompant de syntaxe:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
28
29
30
31
32
33
34
35
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
 
	<head>
		<title>Index</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
		<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<style type="text/css"> .class1 {display:none;} .xox{height:150px;}</style>
		<script  type="text/javascript">
                
                $(document).ready(function(){
                $(".valide").click(function(){
                    if ($(".class1").is(":hidden")){
                        $(".class1").show("slow");
                    }
                    else{
                        $(".class1").hide("slow");
                    }                                   
                });});  
                </script>
	</head>
 
	<body>
		<form action="index.php" method="post" title="formulaire" class="form">
				<div class="class1 xox">
				<input type="text" value="LOGIN" class="class1"/></p>
				<input type="text" value="LOGIN" class="class1"/></p>
				<input type="text" value="LOGIN" class="class1"/></p>
				<input type="text" value="LOGIN" class="class1"/></p>
				</div>	
			<input type="button" value="valide" class="valide"/>
		</form>	
	</body>
</html>

Merci de votre aide maintenant, je sais d'ou vien le problème.
Mais si vous avez d'autres façons d'encoder ce "truc" c'est avec plaisir.

Une Value qui disparait après un slideDown()

jQuery

Vue hybride

Discussions similaires

Partager

Partager