Problème formulaire

27 décembre 2009 à 16:32:26

Bonjour
Je débute actuellement en javascript, et je tente d'afficher un pop-up lorsque deux champs ne sont pas remplis, et de changer la couleur de mes champs. Cependant j'ai beau essayer je n'y arrive pas. Voilà mon code:

<?php 
header('Content-type: text/html; charset=ISO-8859-1'); 
require_once 'styles/changementdesign.php'; 
?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" media="screen, projection" type="text/css" id="css" href="<?php echo $url; ?>" />
<script language="javascript" type="text/javascript" src="java.js"></script> 
</head>
<body>

<div id="en_tete">
 
</div>
<!-- Menu horizontal !!! --> 
<div id="onglet">		
	<ul>
	<li><a href="Accueil.php">Accueil</a></li>
	<li><a href="AccueilMusique.php">Musique</a></li>
	<li><a href="AccueilSport.php">Sport</a></li>
	<li><a href="Apropos.php">About Us</a></li>
	</ul>
	
</div>
<!-- Fin Menu horizontal !!! -->	

<!-- Corps de la page, Zone de Texte !!! -->
<div id="corps">




	<!--Chat-->
		<center>
				<!--Formulaire d'envoi-->
		<form action="Apropos.php" method="post" onsubmit="return formulaire()">
		<em><label for="Pseudo">Pseudo  :</label> </em> <input type="text" name="Pseudo" id="Pseudo" />
		<br/>
		<em><label for="Message">Message :</label> </em> <input type="text" name="Message" id="Message"/>
		<br/>
		<input type="submit" value="Envoyer !" />

		</form>
		
......

</body>

Voici ma page java.js

function formulaire()
{
  if((document.getElementById("Pseudo").value=="") && (document.getElementById("Message").value=="") {
    alert("Vous devez remplir toutes les cases");
    document.getElementById("Pseudo").backgroundColor='red';
    return false;
  } else
    return true;
}

LCaba

27 décembre 2009 à 16:38:49

Salut

Tout d'abord, tu dois mettre backgroungColor ou simplement background.

Et pourquoi tu met la ligne 10 en dehors de la fonction ? Cela aura comme effet de colorer en rouge la ligne pseudo dès le chargement de ta page...

Cabinet vétérinaire à Angers

Lonchan

27 décembre 2009 à 16:43:42

J'ai changé comme tu me l'as dit( cf EDIT ), mais ça ne marche toujours pas ( ni le changement de couleur, ni le pop-up ) sur mon navigateur ( firefox )

Peut-être que le problème vient de ma page html nan?

Golmote

27 décembre 2009 à 17:13:16

C'est .style.backgroundColor

Lonchan

27 décembre 2009 à 17:17:18

J'ai modifié en rajoutant le .style. mais ça ne marche toujours pas. Je suis sur que c'est une erreur bête de ma part, mais je la trouve pas :euh:

Golmote

27 décembre 2009 à 17:24:24

En effet, on dirait aussi que t'as oublié une parenthèse à la fin du if()...

Et pis la logique voudrait plutôt que ce soit un || à la place du && non ? (vu le texte de l'alert()... )

Lonchan

27 décembre 2009 à 17:32:51

Effectivement, il est plus logique de mettre || ^^'
Malheureusement, ça ne résout toujours pas mon problème :euh:

Golmote

27 décembre 2009 à 17:58:25

As-tu ajouté la parenthèse manquante ? Avec elle ça devrait fonctionner. Ton code actuel doit être celui-ci si tu as suivi ce qu'on a dit :

function formulaire()
{
  if((document.getElementById("Pseudo").value=="") || (document.getElementById("Message").value=="")) {
    alert("Vous devez remplir toutes les cases");
    document.getElementById("Pseudo").style.backgroundColor='red';
    return false;
  } else
    return true;
}

Lonchan

28 décembre 2009 à 13:01:34

Oui j'ai pourtant rajouté la parenthèse manquante.
J'dois avouer que je vois pas du tout d'ou peut venir le problème

Golmote

28 décembre 2009 à 13:26:53

Si tu mmets le JS directement dans la page, entre deux balises <script>, ça marche ?

Chez moi ça fonctionne hein...

Lonchan

28 décembre 2009 à 13:43:44

Je savais pas que je pouvais le mettre directement entre deux balises <script>. Est-ce qu'il faut que je change l'extension de mon fichier ( comme pour le php ) ?
Je copie juste le code entre deux balise <script> et ça devrait marcher??

Golmote

28 décembre 2009 à 14:30:06

Bah juste une page html avec ce code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<link rel="stylesheet" media="screen, projection" type="text/css" id="css" href="<?php echo $url; ?>" />
<script type="text/javascript">
function formulaire()
{
  if((document.getElementById("Pseudo").value=="") || (document.getElementById("Message").value=="")) {
    alert("Vous devez remplir toutes les cases");
    document.getElementById("Pseudo").style.backgroundColor='red';
    return false;
  } else
    return true;
}

</script> 
</head>
<body>

<div id="en_tete">
 
</div>
<!-- Menu horizontal !!! --> 
<div id="onglet">		
	<ul>
	<li><a href="Accueil.php">Accueil</a></li>
	<li><a href="AccueilMusique.php">Musique</a></li>
	<li><a href="AccueilSport.php">Sport</a></li>
	<li><a href="Apropos.php">About Us</a></li>
	</ul>
	
</div>
<!-- Fin Menu horizontal !!! -->	

<!-- Corps de la page, Zone de Texte !!! -->
<div id="corps">




	<!--Chat-->
		<center>
				<!--Formulaire d'envoi-->
		<form action="Apropos.php" method="post" onsubmit="return formulaire()">
		<em><label for="Pseudo">Pseudo  :</label> </em> <input type="text" name="Pseudo" id="Pseudo" />
		<br/>
		<em><label for="Message">Message :</label> </em> <input type="text" name="Message" id="Message"/>
		<br/>
		<input type="submit" value="Envoyer !" />

		</form>
		
......

</body>