getElementByID & variables

Version imprimable

Bonsoir à tous, voilà quelques heures que je tourne sur la toile, et principalement en rond alors je sollicite votre aide:
Ayant un formulaire php/html à remplir je dois vérifier les champs. J'utilise le JavaScript pour valider. Chaque champ au préalable valider par des fonctions AJAX, il apparait à coté une image de tick box sous la forme HTML:

Code:

<img id="13" alt=""></img>

Dont l'attribut scr est définit comme suit:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 /* Fonction de test des champs de texte obligatoires */ function check_empty_text($idCheckBox,$elt) { $reponse = new xajaxResponse(); if ($elt != NULL) { $reponse->assign($idCheckBox, 'src', "images/iconCheckBox.jpg"); } else { $reponse->assign($idCheckBox, 'src',"images/cross.png"); } return $reponse; }
J'aimerais que ma fonction JavaScript de vérification globale vérifie ou non la présence de croix rouge (champs invalides) donc je code ceci:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function check_form(nbBox) { for ($i = 1 ; $i <= nbBox ; $i++) { if(document.getElementById($i).src == "images/cross.png") { alert("Les champs comportant une * sont obligatoires"); return 0; } } return 1; }
Mon code JS ne fonctionne pas car il me renvois rien lorsque je lui de demande d'afficher le getElementById($i). Pourriez-vous m'aider?

edit: Désolé fausse manip un 'tab' + 'enter' et craaaac ^^

04/05/2011, 16h42
SpaceFrog

un id ne doit jamais etre intégralelement numérique ni commencer par du numérique

de plus img est une balise autofermante:

Code:

<img id="_13" alt="" />
04/05/2011, 16h56
Iceman Y15
Merci pour ces corrections, j'ai donc corrigé
de tel sorte:
Code:

1 2 <img id="im12" alt="" />
Ceci étant pouvons nous concaténer pour obtenir une chaine exploitable par
Code:

1 2 alert(document.getElementById(xxxxx).src);
Pour arrivé a utiliser ma fonction de vérification.

Mais existerait-il pas une fonction permettant de tester tout les éléments

Code:

<img ..../>

D'une page, ce qui me simplifierait grandement la tâche.
04/05/2011, 17h00
SpaceFrog

j'ai proposé il y a quelque temps un script pour recupérer un ensemble d'id genre "commençant par ..." "finissant par " etc

plus classiquement

dans une boucle sur i

Code:

document.getElementById('img'+ i)

sinon avec a puissance des selecteurs de jquery ...
04/05/2011, 17h04
Loceka

Accessoirement c'est pas bien du tout de vérifier si le formulaire est bon en testant si telle ou telle image est chargée.

Si un jour tu ne veux plus mettre d'image ou que l'URL change personne ne se souviendra que la fonction de vérification s'en servait.

Si le formulaire est pré-validé par des fonctions AJAX, alors c'est à ce niveau-là qu'il faut faire la vérification (maintenir une liste des champs valides/non valides par exemple).
04/05/2011, 17h05
SpaceFrog

j'ai retrouvé le post
http://www.developpez.net/forums/d75...p/#post4389063
04/05/2011, 17h08
Iceman Y15
Merci!!!!! Tout ça parceque à force de programmer en 3 langages différents je met des "$" n'importe où.

MErci.

Si, dernière petite précision, pour tester l'attribut 'src' , lorsque je l'affiche il m'affiche le chemin complet, ce qui est normal. Pourrais-je tester le nom qu'à partir de ma racine?
Code:

1 2 3 4 5 6 if(document.getElementById('im'+i).src == "./images/cross.png") { alert("Les champs comportant une * sont obligatoires"); return 0; }
Ceci ne fonctionne pas je l'ai essayer.
Cordialement
04/05/2011, 17h18
SpaceFrog

Code:

if(/cross.png$/.test(document.getElementById('im'+i).src))
05/05/2011, 09h04
Iceman Y15

Merci Spacefrog! Maintenant l'idée de Loceka est vraiment pas mauvaise et j'y avais pensé mais comment la mettre en oeuvre.
@Loceka: Je t'ai envoyé un MP pour ça!

Citation:

Envoyé par Iceman Y15

tu as écrit:

Citation:

Envoyé par Loceka

Accessoirement c'est pas bien du tout de vérifier si le formulaire est bon en testant si telle ou telle image est chargée.

Si un jour tu ne veux plus mettre d'image ou que l'URL change personne ne se souviendra que la fonction de vérification s'en servait.

Si le formulaire est pré-validé par des fonctions AJAX, alors c'est à ce niveau-là qu'il faut faire la vérification (maintenir une liste des champs valides/non valides par exemple).

Cette méthode m'interresse mais je ne voyais pas comment l'utiliser. Existe t'il en javascript une fonction qui insérerais un objet dans une liste si il n'existe pas et qui supprimerais pas s'il n'existe pas?

Le seul moyen de vérifier si un élément est contenu dans une liste est, à ma connaissance, de parcourir cette liste et de faire le test soi-même.

Ceci dit dans ton cas, étant donné que tous les champs de ton formulaire sont différents tu n'as pas à t'inquiéter de ça.

Personnellement je ferais un truc comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 // Déclaration d'une variable globale contenant le tableau : var champs = new Array(); // Après l'appel à ton ajax : var tonChamp = document.getElementById("le_champ"); // Récupérer le champ désiré dans une variable, ou bien juste son id, ou son nom champs[tonChamp] = true/false; // true ou false en fonction de sa validité // Dans la fonction de validation : var formOk = true; for (var champ in champs) { formOk &= champs[champ]; }

05/05/2011, 15h43
Iceman Y15

Je comprend ce que tu fais mais pourrais tu me préciser dans quel fichier chacune de tes instructions que tu me propose dois-je les faire apparaitre?
05/05/2011, 15h55
Loceka

Eh bien la ligne var champs = new Array(); est une déclaration de variable globale et doit donc être fait directement à la racine du script (pas dans une fonction) et avant tout appel de fonction.

Le code que j'ai dit devoir se trouver // Après l'appel à ton ajax doit se trouver dans la fonction qui récupère la réponse du serveur (check_empty_text si j'ai bien compris)

Le code que j'ai dit devoir se trouver // Dans la fonction de validation doit se trouver... dans la fonction de validation \o/ (check_form apparement)

Après comme nous n'avons pas la structure de ton document je ne peux pas t'en dire plus.

La structure de mon code:

un fichier php fct_ajax.php dans lequel je définis toutes mes fonctions pour les utiliser via xAJAX.
Dans ce fichier se trouve
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 function check_empty_text($idCheckBox,$elt) { $reponse = new xajaxResponse(); if ($elt != NULL) { $reponse->assign($idCheckBox, 'src', "images/iconCheckBox.jpg"); } else { $reponse->assign($idCheckBox, 'src',"images/cross.png"); } return $reponse; }
Ensuite un fichier script_verif_form.js
qui contient:
Code:

1 2 3 function check_form(nbBox) {}
Et enfin le fichiers formulaire.php ou se trouve le formulaire avec au début du code:
Code:

1 2 3 4 <?php $xajax->printJavascript(); ?>
Dois-je donc placer

Code:

var champs = new Array();

dans le fichier script_verif_form.js en dehors de toute déclaration? Pour ce qui est de

Citation:

// Après l'appel à ton ajax

dois t'il se trouver effectivement dans la fonction xAJAX ou bien doit il être positionner entre des balises scripts sur le formulaire.php?

05/05/2011, 16h32
Loceka

Oulà...

Alors déjà tout ce qui est PHP est exécuté par ton serveur, tout ce qui est javascript est exécuté par le client (le navigateur).

Ici on fait du javascript, donc la seule chose qui nous intéresse sont les scripts et les fonctions javascript. Les fichiers PHP ne nous concernent pas, ce qu'on fait dedans non plus : le javascript n'en a aucune idée et le navigateur non plus.

Le mieux serait que tu postes le code HTML généré (clic droit, code source).

Voici le début et je pense l'utile poiur toi. Si jamais il y avait quelque chose qu'il te manque dit le moi:

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
 
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="fr" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<script type="text/javascript" src="js/script_verif_form.js" ></script> 
	<script type="text/javascript" src="js/fctGlob.js"></script>
 
	<title>DoctGest</title>
	<meta name="description" content="DoctGest">
	<meta name="author" content="************">
 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
	<link rel="shortcut icon" href="/favicon.ico">
	<link rel="apple-touch-icon" href="/apple-touch-icon.png">
	<link rel="stylesheet" href="css/style.css?v=2">
 
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
 
	</head>
<body>
	<div id="header-container">
		<header class="wrapper">
			<h1 id="title">DoctGest</h1><!--<img src=images/logo.png>-->
 
					<nav>
						<ul>
							<li><a href="index.php?killsession=1">Deconnecter</a></li>
 
							<li><a href="menu_DR.php">Menu</a></li>
							<li><a href=''>Recherche</a></li>
						</ul>
					</nav>		</header>
	</div>
 
	<div id="main" class="wrapper">
 
		<div id="main" class="wrapper"> 
 
 
			<h2>Inscription</h2>
 
<script type="text/javascript" charset="UTF-8">
/* <![CDATA[ */
try { if (undefined == xajax.config) xajax.config = {}; } catch (e) { xajax = {}; xajax.config = {}; };
xajax.config.requestURI = "http://127.0.0.1:8888/DoctGest_project/form_gene_aff.php";
xajax.config.statusMessages = false;
xajax.config.waitCursor = true;
xajax.config.version = "xajax 0.5";
xajax.config.legacy = false;
xajax.config.defaultMode = "asynchronous";
xajax.config.defaultMethod = "POST";
/* ]]> */
</script>
<script type="text/javascript" src="xajax/xajax_js/xajax_core.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
/* <![CDATA[ */
window.setTimeout(
 function() {
  var scriptExists = false;
  try { if (xajax.isLoaded) scriptExists = true; }
  catch (e) {}
  if (!scriptExists) {
   alert("Error: the xajax Javascript component could not be included. Perhaps the URL is incorrect?\nURL: xajax/xajax_js/xajax_core.js");
  }
 }, 2000);
/* ]]> */
</script>
 
<script type='text/javascript' charset='UTF-8'>
/* <![CDATA[ */
xajax_check_empty_date = function() { return xajax.request( { xjxfun: 'check_empty_date' }, { parameters: arguments } ); };
xajax_check_empty_text = function() { return xajax.request( { xjxfun: 'check_empty_text' }, { parameters: arguments } ); };
xajax_disabled_nom_married = function() { return xajax.request( { xjxfun: 'disabled_nom_married' }, { parameters: arguments } ); };
xajax_check_form = function() { return xajax.request( { xjxfun: 'check_form' }, { parameters: arguments } ); };
/* ]]> */
</script>
 
	<body>
	  	<form name="formulaire" method="GET" action="php/file_prerecord.php">
 
	  		<p>
	  		<table id="form_gene_inscr">
	  			<tr>
	  				<td>
	  					<legend>Nom : *</legend>
	  				</td>
	  				<td> 
	  					<input name="Nom" id="Nom" type="text" 
	  					onblur="xajax_check_empty_text('im1',document.getElementById('Nom').value);" 
	  					/><img id="im1" alt="" />
	  				</td>

05/05/2011, 17h13
Loceka

OMG si je puis m'exprimer ainsi !

Ton HTML a vraiment 2 body ? 8O

'fin bref, la variable globale doit se trouver dans le fichier script_verif_form.js et le code à exécuter en ajax dans les fonctions xajax_check_empty_text et xajax_check_empty_date.

Donc après avoir mis dans ma fonction xAJAX :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function check_empty_text($idCheckBox,$elt)
{
	$reponse = new xajaxResponse();
	if ($elt != NULL)
	{
		$reponse->assign($idCheckBox, 'src', "images/iconCheckBox.jpg");
		$reponse->script("var tonChamp = document.getElementById('$elt');
							champs[tonChamp] = true;");
	}
	else
	{
		$reponse->assign($idCheckBox, 'src',"images/cross.png");
		$reponse->script("var tonChamp = document.getElementById('$elt');
							champs[tonChamp] = false;");
	}
	return $reponse;
}

Je peut mettre dans check_form() ceci:

Code:

1
2
3
4
5
6
7
8
9
10
 
function check_form()
{
	var formOk = true;
	for (var champ in champs) *
	{
	  formOk &= champs[champ];
	}
	return formOk;
}

Est-ce correct?

06/05/2011, 09h59
Loceka

A priori non. Tu écris du javascript dans du PHP, il n'y a donc aucune raison que ça marche.
12/05/2011, 13h29
Iceman Y15

Pour le check_form(), c'est une fonction javascript on est d'accord?

Pour check_empty_text(), ceci est une fonction PHP mais grâce à
xAjax -> script je puis insérer du code javascript dans ma fonction php pour pouvoir l'executer ensuite.

Où se situe donc le javascript qui ne devrais pas être là?