menu et formulaire

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:

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:

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.