Deux fonctions dans un formulaire!

Version imprimable

Bien le bonjour, je me lance dans le js et forcement ça marche pas :p
Je viens donc à vous, espérant que vous pourrez m'éclairer.

Je vous explique :

J'ai un formulaire, avec un select. Quand certains champs du select sont sélectionné un champ texte apparait en dessous, jusque la tout marche nikel.
Mais j'aimerai faire bouger une image quand ces derniers sont sélectionné et la problème. Indépendamment mes deux scripts marchent, mais mis ensemble c'est le bazar.

Dans l'idéal j'aimerai qu'une fois mon champ select sélectionné mon champ texte apparaissent et que le reste du formulaire descende d'un cran, car pour le moment j'ai un espace vide (la ou les champs cachés sont positionné).

Je vous post mon code en espérant avoir été assez clair

Code:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<head>
<script language="JavaScript">
<!-- ICI SONT MES DEUX FONCTIONS, J AI TENTE DE LES COMPILER POUR QU ELLES S EXECUTE EN MEME TEMPS MAIS IMPOSSIBLE
<!-- JE VOUDRAIS METTRE MA 1ERE FONCTION DANS Affich_cach, DE CETTE MANIERE DANS MON FORMULAIRE LE onChange N APPELlE QU UNE FONCTION! :(
 
<!-- FONCTION POUR AFFICHER ET BOUGER MON IMAGE
var haut=0;
document.write("<IMG SRC="move_test.jpg" ID="ombre" STYLE="position:absolute;top:"+haut+";left:500">");
 
cmpt=setInterval("a()",10);
function a(){
	if(document.getElementById) {
		haut+=1;
		window.document.getElementById("ombre").style.top =haut;
		if(haut>100) { clearInterval(cmpt); }
	}
}
 
<!-- FONCTION POUR AFFICHER ET CACHER MON TEXTE
function Affich_cach(texte){
	if (texte=="autre"){
	document.getElementById("autre").style.visibility= "visible";
		}else{
		document.getElementById("autre").style.visibility= "hidden";
		}
 
	if (texte=="bouche"){
	document.getElementById("bouche").style.visibility= "visible";
		}else{
		document.getElementById("bouche").style.visibility= "hidden";
		}
}
//-->
</script>
</head>
<body>
<table>
	<tr>
    	<td>
        <td><form method="post" action="mail_traitement.php">            	
                <b>Comment avez vous connu le js?</b>
                <br />
                <select size="1" name="contenu" onChange="Affich_cach(this.value)"> 
                    <option value="pigeon" >Par mail</option>
                    <option value="poste" >Par la poste</option>
                    <option value="fax" >Par le fax</option>
                    <option value="bouche" >Par bouche &agrave; oreille</option>
                    <option value="autre" >Autre</option>
                </select>
				<br><br>                                    
                <div id="bouche" style="visibility:hidden;position: absolute;"><b>Indiquer la personne qui vous a fait d&eacute;couvrir le js :<b>
                <br />                                  					 
                <input type="text" name="parrain" size="60" value="" /></div>								    
                <div id="autre" style="visibility:hidden;position: absolute;"><b>Pr&eacute;cisez :<b>
                <br />
                <input type="text" name="precisez" size="60" value="" /></div>
                <br><br /><br /><br />
                <b>Votre mail :</b><br />
                <textarea cols="45" rows="15" name="texte"></textarea><br />
                <input type="hidden" value="fr" name="langue" />
                <input type="submit" value="Envoyer" />
             </form>
        </td>
    </tr>
</table>
</body>
</html>

je ne sais pas si c'est ça :

il reste un pti souçis de positionnement n'ayant pas ton image ombre ^^

Code:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
<html>
<head>
<script language="JavaScript">
<!-- ICI SONT MES DEUX FONCTIONS, J AI TENTE DE LES COMPILER POUR QU ELLES S EXECUTE EN MEME TEMPS MAIS IMPOSSIBLE
<!-- JE VOUDRAIS METTRE MA 1ERE FONCTION DANS Affich_cach, DE CETTE MANIERE DANS MON FORMULAIRE LE onChange N APPELlE QU UNE FONCTION! :(
 
<!-- FONCTION POUR AFFICHER ET BOUGER MON IMAGE
var haut=0;
document.write('<IMG SRC="move_test.jpg" ID="ombre" STYLE="position:absolute;top:"+haut+";left:500">');
 
//cmpt=setInterval("a()",10);
function a(){
	if(document.getElementById) {
		haut+=1;
		window.document.getElementById("ombre").style.top =haut;
		if(haut>100) { clearInterval(cmpt); }
	}
}
 
<!-- FONCTION POUR AFFICHER ET CACHER MON TEXTE
function Affich_cach(texte){
	if (texte=="autre"){
	document.getElementById("autre").style.visibility= "visible";
	cmpt=setInterval("a()",10);
		}else{
		document.getElementById("autre").style.visibility= "hidden";
		}
 
	if (texte=="bouche"){
	document.getElementById("bouche").style.visibility= "visible";
	cmpt=setInterval("a()",10);
		}else{
		document.getElementById("bouche").style.visibility= "hidden";
		}
 
}
//-->
</script>
</head>
<body>
<table>
	<tr>
    	<td>
        <td><form method="post" action="mail_traitement.php">            	
                <b>Comment avez vous connu le js?</b>
                <br />
                <select size="1" name="contenu" onChange="Affich_cach(this.value)"> 
                    <option value="pigeon" >Par mail</option>
                    <option value="poste" >Par la poste</option>
                    <option value="fax" >Par le fax</option>
                    <option value="bouche" >Par bouche &agrave; oreille</option>
                    <option value="autre" >Autre</option>
                </select>
				<br><br>                                    
                <div id="bouche" style="visibility:hidden;position: absolute;"><b>Indiquer la personne qui vous a fait d&eacute;couvrir le js :<b>
                <br />                                  					 
                <input type="text" name="parrain" size="60" value="" /></div>								    
                <div id="autre" style="visibility:hidden;position: absolute;"><b>Pr&eacute;cisez :<b>
                <br />
                <input type="text" name="precisez" size="60" value="" /></div>
                <br><br /><br /><br />
                <b>Votre mail :</b><br />
                <textarea cols="45" rows="15" name="texte"></textarea><br />
                <input type="hidden" value="fr" name="langue" />
                <input type="submit" value="Envoyer" />
             </form>
        </td>
    </tr>
</table>
</body>
</html>

29/10/2008, 12h08
laipreu
Ouuh yeaaah ça marche, j'avais mis la fonction a dans la fonction Affich_cach.
-_-
Forcement ça allait pas marcher.

Pour le soucy de positionnement il suffit de remplacer:
Code:

1 2 document.write('<IMG SRC="move_test.jpg" ID="ombre" STYLE="position:absolute;top:"+haut+";left:500";>');
Par :

Code:

document.write('<IMG SRC="move_test.jpg" ID="ombre" STYLE="position:absolute;top:'+haut+';left:500";>');

Mettre des simples quotes sur la variable haut.

Maintenant je vais m'atteler à remplacer l'image par un div de facon que le formulaire se baisse à l'apparition des champs cachés ;)

Merci beaucoup pour la réactivité!
29/10/2008, 12h28
le_chomeur

je t'en pris , si ton problème est résolu n'oublies pas de l'indiquer :)

Oui je pensais le faire mais je voulais finaliser mon code juste avant pour être sur de pas avoir d'autre soucie :)

Et j'en ai un petit, je vois pas trop comment le résoudre ayant testé plusieurs solutions.

Maintenant lorsqu'on sélectionne un champ, le div du bas descend d'un cran. Et quand on sélectionne un autre champ il remonte, mais le problème est qu'il en s'arrête plus!

Code:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<html>
<head>
<script language="JavaScript">
 
var haut=70;
var bas=135;
function descend(){
	if(document.getElementById) {
		haut+=1;
		window.document.getElementById("ombre").style.top =haut;
		if(haut>bas) { clearInterval(interval_descend); }
	}
}
 
function remonte(){
	if(haut>=135){
		if(document.getElementById) {
			bas-=1;
			window.document.getElementById("ombre").style.top =bas;
			if(bas<=haut) { clearInterval(interval_remonte); }
		}
	}
}
 
function Affich_cach(texte){
	if (texte=="autre"){
	document.getElementById("autre").style.visibility= "visible";
	interval_descend=setInterval("descend()",10);
		}else{
		interval_remonte=setInterval("remonte()",10);
		document.getElementById("autre").style.visibility= "hidden";
		}
 
	if (texte=="bouche"){
	document.getElementById("bouche").style.visibility= "visible";
	interval_descend=setInterval("descend()",10);
		}else{
		interval_remonte=setInterval("remonte()",10);
		document.getElementById("bouche").style.visibility= "hidden";
		}
 
}
 
</script>
</head>
<body>
<table>
	<tr>
    	<td><form method="post" action="mail_traitement.php">            	
                <b>Comment avez vous connu le js?</b>
                <br />
                <select size="1" name="contenu" onChange="Affich_cach(this.value)"> 
                    <option value="pigeon" >Par mail</option>
                    <option value="bouche" >Par bouche &agrave; oreille</option>
                </select>
				<br><br>                                    
                <div id="bouche" style="visibility:hidden;position: absolute;"><b>Indiquer la personne qui vous a fait d&eacute;couvrir le js :<b>
                <br />                                  					 
                <input type="text" name="parrain" size="60" value="" /></div>								    
                <div id="autre" style="visibility:hidden;position:absolute;"><b>Pr&eacute;cisez :<b>
                <br />
                <input type="text" name="precisez" size="60" value="" /></div>
                <br><br /><br /><br />
                <div id="ombre" style="position:absolute;top:70px;">
                <b>Votre mail :</b><br />
                <textarea cols="45" rows="15" name="texte"></textarea><br />
                <input type="hidden" value="fr" name="langue" />
                <input type="submit" value="Envoyer" /></div>
             </form>
        </td>
 
    </tr>
</table>
</body>
</html>

Le problème doit venir de là :

Code:

if(bas<=haut) { clearInterval(interval_remonte); }

Mais j'ai beau essayer différentes combinaisons, soit le div descend et remonte immédiatement, soit il remonte et s'arrête plus, soit rien ne ce passe!

voila qui est vexant :p

c'est normal ça :

Code:

1
2
                    <option value="pigeon" >Par mail</option>
                    <option value="bouche" >Par bouche &agrave; oreille</option>

alors que dans ton code :

Code:

1
2
3
if (texte=="autre"){
et l'autre test
if (texte=="bouche"){

... -_-

Je me sens bête la :p
J'ai voulu simplifier mon formulaire pour pas vous envoyer des lignes inutiles et forcement j'ai zappé de remettre les bons noms!

Du coup j'ai remis en ordre de cette façon, de plus j'ai ré-initialisé les variables pour que ça marche impec :

[ Je me permet d'éditer mon script pour l'améliorer avec un test, à savoir si le div est en position haute ou basse, pour que ainsi si il y a d'autres selects dans le formulaire, le div ne remonte pas à chaque sélection) ]

Code:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<html>
    <head>
    <style type="text/css">
	table{
		font:Verdana, Arial, Helvetica, sans-serif;
		font-size:12px;
	}
	</style>
		<script language="JavaScript">
        var haut = 70;
        var bas = 120;
		var etat = true;
        function descend(){
            if(document.getElementById) {
                haut+=10;
                window.document.getElementById("texte").style.top =haut;
                if(haut>bas) { 
					clearInterval(interval_descend);
					haut = 120;
				}
            }
        }
 
        function remonte(){
            if(haut=bas){
                if(document.getElementById) {			
                    bas-=10;
                    window.document.getElementById("texte").style.top =bas;
                    if(bas<70) { 
						clearInterval(interval_remonte);
						bas = 120;
					}
                }
            }
        }
 
        function Affich_cach(texte){         
            if (texte=="bouche"){
            interval_descend=setInterval("descend()",10);
            document.getElementById("bouche").style.visibility= "visible";
			etat = true;
                }else{
					 if(etat == true){
						 interval_remonte=setInterval("remonte()",10);
						 document.getElementById("bouche").style.visibility= "hidden";
						 etat = false;
					 	 }
                	 }            
       		}
        </script>
    </head>
<body>
<table>
  <tr>
    <td><form method="post" action="">            	
        <b>Comment avez vous connu le js?</b><br />
        <select size="1" name="contenu" onChange="Affich_cach(this.value)"> 
            <option value="mail" selected>Par mail</option>
            <option value="mail2" selected>Par mail2</option>
            <option value="mail3" selected>Par mail3</option>
            <option value="mail4" selected>Par mail4</option>
            <option value="bouche" >Par bouche &agrave; oreille</option>
        </select>
		<br><br>                                    
        <div id="bouche" style="visibility:hidden;position: absolute;"><b>Indiquer la personne qui vous a fait d&eacute;couvrir le js :<b><br />                                  					 
        <input type="text" name="parrain" size="60" value="" /></div>
		<br><br /><br /><br />
        <div id="texte" style="position:absolute;top:70px;">
        <b>Votre mail :</b><br />
		<textarea cols="45" rows="15" name="texte"></textarea><br />
		<input type="hidden" value="fr" name="langue" />
        <input type="submit" value="Envoyer" /></div>
        </form></td>     
        </tr>
</table>
    </body>
</html>

Et ça marche nikel!

Merci bien ;)