[AJAX] vérification champ formulaire et insertion bdd

**knebhi** · 29/04/2009, 14h41

Bonjour,

j'ai un peu exploré le net et j'ai réussi à intégrer du code Ajax dans un formulaire en php pour vérifier mes champs.

J'ai une fonction qui vérifie si la valeur du champ NomFichierSource existe déjà. Si elle existe dans la bdd il me l'indique sinon il m'indique que c'est OK.

Le problème se situe lors de la validation du formulaire , dans les deux cas j'ai le message javascript d'alerte utilisé pour le cas où le NomFichierSource existe déjà.

en fait que le champ existe ou non je n'arrive pas à l'insérer à ma bdd.

je vous met la partie essentielle du code car il est long

form_base.php

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
 
 
<head>
 
 
<title>Tei Header Corpus Oraux</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="fr" />
<meta name="author" content="KN" />
<link rel="stylesheet" type="text/css" href="css/site.css"
	media="screen" />
<link rel="stylesheet" type="text/css" href="css/site.print.css"
	media="print" />
 
<script type="text/javascript"><!--
var bNomFichierSource = false;
function req_NomFichierSource(NomFichierSource) {
 
	//XMLHttpRequest est supporté par Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Netscape 7
	if(document.all) var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); //Internet Explorer
	else var XhrObj = new XMLHttpRequest(); //Mozilla
 
	content = document.getElementById("NomFichierSource_check"); 	//zone d'affichage
 
	XhrObj.open("POST", "verif_NomFichierSource.php");
 
	//Ok pour la page cible
	XhrObj.onreadystatechange = function()
	{
		if (XhrObj.readyState == 4 && XhrObj.status == 200) {
			if (XhrObj.responseText == 'OK') {
				content.innerHTML='<img src="images/accepter.png" alt=""/>OK';
				bNomFichierSource = true; // ok nouveau pseudo
			} else {
				content.innerHTML='<img src="images/refuser.png" alt=""/>Existe';
				bNomFichierSource = false; // erreur pseudo déjà existant
			}
		}
	}
 
	XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	XhrObj.send('p='+NomFichierSource);
 
}
 
function testChamps(f) {
	bNomFichierSource = false; // on va revalider le champ
	req_NomFichierSource(f.NomFichierSource.value);
	if (!bNomFichierSource) {
	 alert('Erreur Nom Fichier Source');
	 return false;
	}
 
	return true;
 
	}
-->
</script>
</head>
 
 
<body vlink="#0033CC" onload="hide();">
<div id="world">
<div id="head" align="center">
<div class="forms">
<form id="acces" action=""><select id="choix"
	onchange="window.parent.location='/CorpusOrauxTei_Header'+document.getElementById('choix').options[document.getElementById('choix').selectedIndex].value;">
	<option value="">Accès rapide</option>
	<option value="/index.html">Index</option>
	<option value="/transf_xml.php">Liste Header</option>
 
 
</select></form>
</div>
 
 
<h2 align="center">Fiche signalétique Corpus Oraux</h2>
 
 
<!--lien vers le script php permettant le post des valeurs--> 
<? include("connection.php");
 
$URL = $_SERVER["SCRIPT_NAME"];
 
 
$NomFichierSource =""; 
if(!empty($_POST["NomFichierSource"]))
$NomFichierSource =addslashes($_POST["NomFichierSource"]);
 
 
 
$message="";
 
if($NomFichierSource) {
	// on ajoute la fiche
	/// on met le Nom du fichier source en minuscule avec la premiere lettre en MAJ
	$NomFichierSource = strtolower($NomFichierSource);
	$NomFichierSource = ucfirst($NomFichierSource);
 
	$table="header_tei";
	$query = "INSERT INTO $table(NomFichierSource,Responsable_corpus,Mail_RespCorpus,name_projet,type_corpus,modalite_recueil,genre_discours,typologie_textuelle,alignement,logiciel,convention,autorisation_rec,autorisation_recInfo,anonymisation_transcription,Responsable_rec,NomFichierSon,support,qualite,date,duree,format,anonymisation_Info,pays_rec,region_rec,ville_rec,cadre_rec,description_lieu,support_rec,refBiblio_rec,themes,Responsable_trans,Responsable_verif,Nom_Corpus,Distributeur,Droit,Titre,Auteur_travaux,Editeur,Lieu,Annee,id_1,age_1,sex_1,etude_1,statut_francais_1,app_regionale_1,local_1,id_2,age_2,sex_2,etude_2,statut_francais_2,app_regionale_2,local_2)";
	$query .= " VALUES('$NomFichierSource','$Responsable_corpus','$Mail_RespCorpus','$name_projet','$type_corpus','$modalite_recueil','$genre_discours','$typologie_textuelle','$alignement','$logiciel','$convention','$autorisation_rec','$autorisation_recInfo','$anonymisation_transcription','$Responsable_rec','$NomFichierSon','$support','$qualite','$date','$duree','$format','$anonymisation_Info','$pays_rec','$region_rec','$ville_rec','$cadre_rec','$description_lieu','$support_rec','$refBiblio_rec','$themes','$Responsable_trans','$Responsable_verif','$Nom_Corpus','$Distributeur','$Droit','$Titre','$Auteur_travaux','$Editeur','$Lieu','$Annee','$id_1','$age_1','$sex_1','$etude_1','$statut_francais_1','$app_regionale_1','$local_1','$id_2','$age_2','$sex_2','$etude_2','$statut_francais_2','$app_regionale_2','$local_2')";
	$result = mysql_query($query);
	// et on prépare le message à afficher
	$message = "La fiche signalétique correspondant au fichier <b>".$NomFichierSource."</b> a été ajoutée!";
 
 
}
 
 
mysql_close();
 
 
 
?> 
 
 
<table align="center" width=100% height=55%>
	<tr>
		<td><? echo $message; ?>
 
		<form method="post" action="<? echo $URL; ?>"
			onSubmit="return testChamps(this);">
		<table bgcolor=white width="100%" border="1" cellspacing="8"
			cellpadding="2" bordercolor="#CCCC33">
 
 
			<tr>
				<td>Nom du dossier contenant le corpus informatisé (identifiant):</td>
				<td><input type="text" size="50" name="NomFichierSource" value="" onblur="req_NomFichierSource(this.value);"> <span id="NomFichierSource_check"></span></td>
			</tr>
 
 
			<tr>
 
				<th colspan=1 align="left">
 
			<input type="submit" name="Valider" value="Valider"></th>
 
 
			</tr>
		</table>
 
 
		</form>
 
		</td>
	</tr>
</table>
</div>
</div>
</body>
</html>

verif_NomFichierSource.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<?php
 
include("connection.php");
 
$NomFichierSource = htmlentities(addslashes($_POST['p']));
if (!empty($NomFichierSource)) {
  $res = mysql_query("select * from header_tei where NomFichierSource='".$NomFichierSource."'");
  echo (($row = mysql_fetch_array($res)) ? 'FAIL' : 'OK');
}
?>

**Bovino** · 29/04/2009, 15h01

C'est normal, tu envoies une requête Ajax asynchrone, or dans :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function testChamps(f) {
	bNomFichierSource = false; // on va revalider le champ
	req_NomFichierSource(f.NomFichierSource.value);
	if (!bNomFichierSource) {
	 alert('Erreur Nom Fichier Source');
	 return false;
	}
 
	return true;
 
	}

tu n'attends pas son retour pour tester la valeur de ton flag, donc celui-ci est encore à false même si la réponse est (sera en fait) OK.

**knebhi** · 29/04/2009, 15h08

je suis débutant en AJAX

Que dois je faire pour l'ajouter à ma bdd dans ce cas?

merci

**Bovino** · 29/04/2009, 15h23

Soit tu passes ta requête en synchrone :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

XhrObj.open("POST", "verif_NomFichierSource.php", false);

Dans ce cas, ta fonction attendra la réponse du serveur avant de continuer son exécution, soit tu intègres directement les traitements du résultat de la requête dans la fonction du onreadystatechange.

**andry.aime** · 29/04/2009, 15h27

Dans php, quand la valeur cherchée n'est pas trouvé, tu fait un insertion dans la base sinon tu retourne 'Fail'

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if($row = mysql_fetch_array($res)){echo"FAIL";}
else{//insertion}

au lieu de faire un va et vient (client-serveur) avec les même données.

**knebhi** · 29/04/2009, 15h31

Je viens de tester en passant ma requete en synchrone soit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

XhrObj.open("POST", "verif_NomFichierSource.php", false);

à la place de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
XhrObj.open("POST", "verif_NomFichierSource.php");

Dans ce cas, je n'ai plus rien d'afficher lors de la saisie du NomFichierSource.

Pour l'autre méthode pourrait tu plus détaillé et me donner un exemple.

merci de ton aide

**andry.aime** · 29/04/2009, 15h51

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<?php
include("connection.php");
$NomFichierSource = htmlentities(addslashes($_POST['p']));
if (!empty($NomFichierSource)) {
  $res = mysql_query("select * from header_tei where NomFichierSource='".$NomFichierSource."'");
   if($row = mysql_fetch_array($res))
{echo 'FAIL';}
else
{$res = mysql_query("insert into header_tei(NomFichierSource) values('".$NomFichierSource."')");
}
}
?>

Adaptes avec les champs que tu as.

**knebhi** · 29/04/2009, 16h21

Envoyé par andry.aime

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<?php
include("connection.php");
$NomFichierSource = htmlentities(addslashes($_POST['p']));
if (!empty($NomFichierSource)) {
  $res = mysql_query("select * from header_tei where NomFichierSource='".$NomFichierSource."'");
   if($row = mysql_fetch_array($res))
{echo 'FAIL';}
else
{$res = mysql_query("insert into header_tei(NomFichierSource) values('".$NomFichierSource."')");
}
}
?>

Adaptes avec les champs que tu as.

En fait quand je teste ce code le champ est bien ajouté a la bdd; le problème est que j'ai toujours l'alert ajax qui m'indique qu'il existe pourtant ce n'est pas le cas.
et le soucis est qu'il existe d'autre champ à remplir et la personne devra cliquer sur "valider" avant de tout soumettre or le champ NomFichierSource est directement inséré sans qu'il faille cliquer sur valider.

**knebhi** · 26/05/2009, 12h18

Après recherche et test je vous donne la solution :

le programme nommé verif.js devait se présenter de cette façon pour être correct.
En effet la vérification était faite mais la fonction testchamps était précédé de la variable bNomFichierSource qui était à false alors que précédement elle était initialiser a une valeur (celle du test du champ).

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
var bNomFichierSource = false;
function req_NomFichierSource(NomFichierSource) {
 
	//XMLHttpRequest est supporté par Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Netscape 7
	if(document.all) var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); //Internet Explorer
	else var XhrObj = new XMLHttpRequest(); //Mozilla
 
	content = document.getElementById("NomFichierSource_check"); 	//zone d'affichage
 
	XhrObj.open("POST", "verif_NomFichierSource.php");
	//XhrObj.open("POST", "verif_NomFichierSource.php", false);
	//Ok pour la page cible
	XhrObj.onreadystatechange = function()
	{
		if (XhrObj.readyState == 4 && XhrObj.status == 200) {
			if (XhrObj.responseText == 'OK') {
				content.innerHTML='<img src="images/accepter.png" alt=""/>OK';
				bNomFichierSource = true; // ok nouveau pseudo
			} else {
				content.innerHTML='<img src="images/refuser.png" alt=""/>Existe';
				bNomFichierSource = false; // erreur pseudo déjà existant
			}
		}
	}
 
	XhrObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	XhrObj.send('p='+NomFichierSource);
 
}
 
function testChamps(f) {
//	bNomFichierSource = false;  on va revalider le champ
//	req_NomFichierSource(f.NomFichierSource.value);
	if (!bNomFichierSource) {
	 alert('Erreur Nom Fichier Source');
	 return false;
	}
 
	return true;
 
	}

[AJAX] vérification champ formulaire et insertion bdd

AJAX

Discussions similaires

Partager

Partager