menu et formulaire

**s4mk1ng** · 19/04/2011, 09h52

Bonjour j'ai fait un menu en html et dessus j'ai fait un onmouseover et un onmouseclick,qui affiche dans deux div distinctes un texte:

Code :

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
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>
<SCRIPT LANGUAGE="JavaScript" SRC="jquery.js"></SCRIPT>
<head><title>FLOAT</title><link rel="stylesheet" media="screen" type="text/css" title="index" href="exo.css" /></head>
 
</head>
<body>
<div id="en_tete">
   <img src="banniere.jpg" height="150px" width="800px" >
</div>
<ul id="menu_horizontal">
<li class="bouton_gauche" onMouseOver="menu1();"onclick="action1();"><a href="#">menu1</a></li>
<li class="bouton_gauche" onMouseOver="menu2();"onclick="action2();"><a href="#">menu2</a></li>
<li class="bouton_gauche" onMouseOver="menu3();"onclick="action3();"><a href="#">menu3</a></li>
<li class="bouton_gauche" onMouseOver="contact();"onclick="action4();"><a href="#">contact</a></li>
</ul>
 
 
<div id="renseignements">
 
</div>
<div id="dynamique">
 
</div>
<script> 
function menu1(){
	var texte1="Le menu1 parle de tout et de rien si vous voulez y faire un tour c'est par ici...";
	$('#renseignements').text(texte1);
				}
function menu2(){
	var texte2="Le menu2 parle de n'a rien pour l'instant mais revenez bientot";
	$('#renseignements').text(texte2);
				}
function menu3(){
	var texte3="Le menu3 parle de technologies et de chiose dans ce genre là";
	$('#renseignements').text(texte3);
				}
function contact(){
	var texte4="Le menu4 parle..............";
	$('#renseignements').text(texte4);
				  }
function action1(){
	var dyn1="Le menu2 parle de rien pour l'instant mais revenez bientot";
	$('#dynamique').text(dyn1);
	alert=("bonjour");
				   }
function action2(){
	var dyn2="Le menu2 ne parle de rien pour l'instant mais revenez bientot";
	$('#dynamique').text(dyn2);
				   }
function action3(){
	var dyn3="Le menu2 parle de rien pour l'instant mais revenez bientot";
	$('#dynamique').text(dyn3);
				   }
function action4(){
	$('#dynamique').html("<form id='formulaire' onsubmit='login();'><fieldset><legend>login && mot de passe</legend><p><input type='text' name='identifiant' value=''/></p><p><input type='password' name='motdepasse' value=''/></p><p><input type='submit' value='se logger'/></p></fieldset></form>")};
 
function login(){
	var element1 = document.getElementById("formulaire").elements["identifiant"].value;
	var element2 = document.getElementById("formulaire").elements["motdepasse"].value;		
	erreur = "";
 
		if(element1==""){
		//erreur = "Vous n'avez pas remplie le champ login"+"\n";
		$("input[name=identifiant]").css({"background-color":"red",color:"white"});
		}
 
		if (element2==""){
		//erreur += "Vous n'avez pas remplie le champ pass"+"\n";
		$("input[name=motdepasse]").css({"background-color":"red",color:"white"});
		}
 
	//alert(erreur);
				}
</script>
</body>
</html>

Ca marche correctement sauf que le code est très sale vu que j'apelles à chaque fois une fonction différentes donc j'ai essayé de le "réécrire" en ne mettant qu'une fonction qui testera avec un .each mais je ne comprends pas pourquoi cela ne marche pas.Voici le code:

Code :

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
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
78
79
80
81
82
83
84
85
86
<html>
<head>
<SCRIPT LANGUAGE="JavaScript" SRC="jquery.js"></SCRIPT>
<head><title>FLOAT</title><link rel="stylesheet" media="screen" type="text/css" title="index" href="exo.css" /></head>
 
</head>
<body>
<div id="en_tete">
   <img src="banniere.jpg" height="150px" width="800px" >
</div>
<ul id="menu_horizontal">
<li id="1" class="bouton_gauche" onMouseOver="menu();"onclick="action();"><a href="#">menu1</a></li>
<li id="2" class="bouton_gauche" onMouseOver="menu();"onclick="action();"><a href="#">menu2</a></li>
<li id="3" class="bouton_gauche" onMouseOver="menu();"onclick="action();"><a href="#">menu3</a></li>
<li id="4" class="bouton_gauche" onMouseOver="menu();"onclick="actionform();"><a href="#">contact</a></li>
</ul>
 
 
<div id="renseignements">
 
</div>
<div id="dynamique">
 
</div>
<script> 
var texte1="Voici le menu 1";
var texte2="Voici le menu 2";
var texte3="Voici le menu3";
var texte4="Voici le menu 4";
var action="Voici le contenu du menu 1";
var action2="Voici le contenu du menu 2";
var action3="Voici le contenu du menu 3";
function menu(){
$('#menu_horizontal').each(function (index,this){
switch(($(this).attr('div'))){
 
case 1:
  $('#renseignements').text(texte1);
  break;
  case 2:
  $('#renseignements').text(texte2);
  break;
  case 3:
  $('#renseignements').text(texte3);
  break;
  default:
  $('#renseignements').text(texte4);
  break;
}});}
function action(){
  $('#menu_horizontal').each(function (index,this){
switch(($(this).attr('div'))){
 
	case 1:
	$('#dynamique').text(action);
	break;
	case 2:
	$('#dynamique').text(action2);
	break;
	case 3:
	$('#dynamique').text(action3);
	break;
	default:
	$('#dynamique').html("<form id='formulaire' onsubmit='login();'><fieldset><legend>login && mot de passe</legend><p><input type='text' name='identifiant' value=''/></p><p><input type='password' name='motdepasse' value=''/></p><p><input type='submit' value='se logger'/></p></fieldset></form>")};
    break;
						}});}		
function login(){
	var element1 = document.getElementById("formulaire").elements["identifiant"].value;
	var element2 = document.getElementById("formulaire").elements["motdepasse"].value;		
	erreur = "";
 
		if(element1==""){
		//erreur = "Vous n'avez pas remplie le champ login"+"\n";
		$("input[name=identifiant]").css({"background-color":"red",color:"white"});
		}
 
		if (element2==""){
		//erreur += "Vous n'avez pas remplie le champ pass"+"\n";
		$("input[name=motdepasse]").css({"background-color":"red",color:"white"});
		}
 
	//alert(erreur);
				}
</script>
</body>
</html>

Merci de votre aide.

**s4mk1ng** · 19/04/2011, 10h43

Ca y est j'ai trouvé une solution en fait je fais un mouseover directement dans la fonction puis je test avec mon each et avec le html je recuperes mon champ texte.Voici le code:

Code :

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
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
<html>
<head>
<SCRIPT LANGUAGE="JavaScript" SRC="jquery.js"></SCRIPT>
<head><title>FLOAT</title><link rel="stylesheet" media="screen" type="text/css" title="index" href="exo.css" /></head>
 
</head>
<body>
<div id="en_tete">
   <img src="banniere.jpg" height="150px" width="800px" >
</div>
<ul id="menu_horizontal">
<li id="1" class="bouton_gauche" ><a href="#">menu1</a></li>
<li id="2" class="bouton_gauche" ><a href="#">menu2</a></li>
<li id="3" class="bouton_gauche" ><a href="#">menu3</a></li>
<li id="4" class="bouton_gauche" onclick="action4();" ><a href="#">contact</a></li>
</ul>
 
 
<div id="renseignements">
 
</div>
<div id="dynamique">
 
</div>
 
<script> 
$(function survoler(){ 
var texte =new Array("Voici le menu 1","Voici le menu 2","Voici le menu3","Voici le menu 4"); 
$('#menu_horizontal li').each(function(){
$(this).mouseover(function(){
  $('#renseignements').html( texte[$(this).attr('id').match(/\d+/)*1-1] );
	})
})
 
})
 
$(function cliquer(){ 
var action=new Array("Voici le contenu du menu 1","Voici le contenu du menu 2","Voici le contenu du menu 3");
$('#menu_horizontal li').each(function(){
$(this).click(function(){
  $('#dynamique').html( action[$(this).attr('id').match(/\d+/)*1-1] );
	})
})
 
})
function action4(){
	$('#dynamique').html("<form id='formulaire' onsubmit='login();'><fieldset><legend>login && mot de passe</legend><p><input type='text' name='identifiant' value=''/></p><p><input type='password' name='motdepasse' value=''/></p><p><input type='submit' value='se logger'/></p></fieldset></form>")};
 
function login(){
	var element1 = document.getElementById("formulaire").elements["identifiant"].value;
	var element2 = document.getElementById("formulaire").elements["motdepasse"].value;		
	erreur = "";
 
		if(element1==""){
		//erreur = "Vous n'avez pas remplie le champ login"+"\n";
		$("input[name=identifiant]").css({"background-color":"red",color:"white"});
		}
 
		if (element2==""){
		//erreur += "Vous n'avez pas remplie le champ pass"+"\n";
		$("input[name=motdepasse]").css({"background-color":"red",color:"white"});
		}
 
	//alert(erreur);
				}
</script>
</body>
</html>

menu et formulaire

jQuery

Vue hybride

Discussions similaires

Partager

Partager