11548 sujets

JavaScript, DOM et API Web HTML5

Problème avec Javascript

Bonjour,

Depuis ce matin j'ai un soucis avec du JavaScript dans mon formulaire php.
En bref, mes fonctions Javascript ne fonctionnent pas alors qu'elles marchaient très bien hier.

fichier ajout.php
<form id="formfiche" onsubmit="return valider_s(this)" method="POST" action="">

<label id="nb_adultes" name="nb_adultes" for="nb_adultes">Nombre adultes *:</label>
<input type="text" name="nb_adultes" id="nb_adultes" value="<?php echo filtreChainePourNavig($nb_adultes);?>" onblur="verifNbAdultes(this)" />

<input type="submit" value="Enregistrer" name="Enregistrer" />
</form>



fichier VerifJS.js

function verifNbAdultes(champ)
{         
  var nbAdultesRempli = champRempli(champ);
   
   if(nbAdultesRempli){
      surligne(champ,false);
      return true;
   }
   else{
      surligne(champ,true);
      return false;
   }  
}

function champRempli(champ){
	var result;
	if (champ.value == ""){
		result = false;
	}
	else{
		result = true;
	}	
	return result;
}

function surligne(champ, erreur){
   if(erreur)
      champ.style.backgroundColor = "#fba";
   else
      champ.style.backgroundColor = "";
}

function valider_s(f){
  var nbAdultesOk = verifNbAdultes(f.nb_adultes);
   
   if(nbAdultesOk){ 
     result=true;
	   alert(" Formulaire OK pour l'envoi");
   }
	 else{
	   result=false;
	   alert(" Veuillez remplir le formulaire correctement avant de l'envoyer");
	 }
	 return result;
  
}


J’appelle mon fichier Javascript comme ceci :

<script src="./include/lib/VerifJS.js" type="text/javascript"></script>


Je ne comprends pas d'où viens le problème.


<config>Windows 7 / Firefox 12.0</config>
Hello,

Dans la phrases: "En bref, mes fonctions Javascript ne fonctionnent pas alors qu'elles marchaient très bien hier.", pourrais-tu nous décrire l'erreur qui s'affiche ? Ou alors tu as une belle page blanche ?

++
Charly
Il ne se passe absolument rien. ^^

Je devrais pourtant avoir mon champ "nom" qui se colorise s'il n'est pas rempli ...

Ce qui est vraiment bizarre c'est que cela fonctionnait parfaitement hier ..
Hello,

le fait que le script ne soit pas executé sur l'élément que tu cibles est surement du à :

<label[b] id="nb_adultes" name="nb_adultes"[/b] for="nb_adultes">


enlève les attributs name et id sur ton label, il ne sont pas nécessaires et tu as une duplication de ton id nb_adultes.

<label for="nb_adultes">


simplement devrait fonctionner.
J'ai supprimer l'id et le name du label mais rien ne change.

Cependant, lorsque qu'à la place de :
 onblur="verifNbAdultes(this)"

Je mets :
 onblur="alert('test')"


L'alerte s'affiche bien ..
Oui j'ai bien fait ce ci dans le HEAD :
<script src="./include/lib/VerifJS.js" type="text/javascript"></script>


Mais hier tout marchait très bien.. C'est ça le pire dans cette histoire .. Smiley ohwell
Enfaite dans mon fichier ajout.php j'inclus un fichier debut.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="generator" content="PSPad editor,  www.pspad.com">
 
  <title>Camping CHATEAUGIRON 2011 : Gestion des campeurs</title>
  <link rel="stylesheet" type="text/css" media="all" href="styles.css" />
  <script src="./include/lib/VerifJS.js" type="text/javascript"></script>

  </head>
  <body>
   <div id="banner">
   
   <img src="./images/banner.jpg">
   
   </div><!-- banner -->
   
   <div id="contenant">


Mais je n'ai rien changé dans ce fichier. Donc si cela marchait hier, cela devrait marcher aussi aujourd'hui .. Smiley ohwell
Bonjour,

Avant d’associer une fonction javascript à un élément de ta page prends bien soin que cet élément soit déjà chargé. Pour cela il te suffit de placer la gestion des évènements à l’intérieur d’un 
window.onload = function () {
};


Évite au maximum aussi d’appeler tes fichiers javascripts dans le head.

Voici comment tu dois construire ta page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="generator" content="PSPad editor,   www.pspad.com">
 
 
  <title>Camping CHATEAUGIRON 2011 : Gestion des campeurs</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
	<div id="banner">
		<img alt="bannière" src="images/banner.jpg">
	</div><!-- banner -->
	<div id="contenant">
		<form id="formfiche" method="POST" action="">
			<label for="nb_adultes">Nombre adultes *:</label>
			<input type="text" name="nb_adultes" id="nb_adultes" value="<?php echo filtreChainePourNavig($nb_adultes);?>" />
			<input type="submit" value="Enregistrer" name="Enregistrer" />
		</form>
	</div>
	<script type="text/javascript" src="include/lib/VerifJS.js"></script>
</body>
</html>

et pour le fichier VerifJS.js :
function champRempli(champ) {
	"use strict";
	return champ.value !== "";
}

function surligne(champ, erreur) {
	"use strict";
	champ.style.backgroundColor = (erreur ? "#fba" : "");
}

function verifNbAdultes(champ) {
	"use strict";
	var nbAdultesRempli = champRempli(champ);
	if (nbAdultesRempli) {
		surligne(champ, false);
		return true;
	}
	surligne(champ, true);
	return false;
}

function valider_s(f) {
	"use strict";
	if (verifNbAdultes(f.nb_adultes)) {
		alert(" Formulaire OK pour l'envoi");
		return true;
	}
	alert(" Veuillez remplir le formulaire correctement avant de l'envoyer");
	return false;
}

window.onload = function () {
	"use strict";
	document.getElementById("nb_adultes").onblur = function () {
		verifNbAdultes(this);
	};
	document.getElementById("formfiche").onsubmit = function () {
		return valider_s(this);
	};
};

Modifié par adrien881 (31 May 2012 - 19:57)
Sujet clos
Aller à