[AJAX] Formulaire de commande AJAX

Version imprimable

Je souhaite réaliser un formulaire dynamique de type ajax. J'avais réussi a faire fonctionné l'ensemble par rapport à une prestation (tasseau d'après la variable "pack") et lorsque j'essaye dans mettre une seconde dans un select.

On me retourne Nan dans le tarif TTC au lieu de la valeur calculée... Je vous serez très reconnaissant si vous pouviez me venir en aide!

Voici le code php qui reçoit les requetes javascript:

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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<?php
if (!isset($_POST['load']))
{
	return null;
}
 
//**********   header et systeme anti-cache 
header("Content-Type: text/plain ; charset=utf-8");
header("Cache-Control: no-cache , private");
header("Pragma: no-cache");
 
//**********   chargement du fichier xml
$fichierXml = file_get_contents('commandes.xml');
$objetSimpleXML=simplexml_load_string($fichierXml);
 
$load = $_POST['load'];
 
{
if($load=='pack')
{
	if(!(isset($_POST['pack'])&&isset($_POST['surface'])))
	{
		return null;
	}
 
	$pack_id = $_POST['pack'];
}
//**********   remplissage liste deroulante packs disponibles
if($load=='load_packs')
{
	echo '<select name="pack" id="pack">';
	echo '<option value=0>A definir</option>';
			echo '<option selected value=1>';
			echo 'Aucun tasseau';
			echo "</option>";
 
			echo '<option value=2>';
			echo 'Tasseau brut';
			echo "</option>";	
 
			echo '<option value=3>';
			echo 'Tasseau teinte';
			echo "</option>";
	echo '</select>';
 
	return;	
 
	}
if($load=='load_inscri')
{
	echo '<select name="inscri" id="inscri">';
	echo '<option value=0>A definir</option>';
			echo '<option selected value=1>';
			echo 'Aucune inscription';
			echo "</option>";
 
			echo '<option value=2>';
			echo 'Insciption doree';
			echo "</option>";	
 
			echo '<option value=3>';
			echo 'Inscription caligraphie';
			echo "</option>";
 
	echo '</select>';
 
	return;	
 
	}
//************    preparation et calculs remplissage formulaire
if($load=='pack'||$load=='inscri')
{
$surface = $_POST['surface'];
$compte2=$_COOKIE["compte1"];
$inscri_id = $_POST['inscri'];
$pack_id = $_POST['pack'];
 
		if(!mysql_connect('localhost','root'))
		{echo "Connection plantée";
		exit(); }
		else
		{echo " ";}
 
		mysql_select_db('encadrement');
 
 
		$requete1 = "select * from commercant where nom_entreprise = '$compte2'" ; 
		$resultat1 = mysql_query($requete1);
		$tasseau = mysql_fetch_array($resultat1);
 
	if ("$pack_id"==1)
			{
				$tarif = 0;
			}	
 
	if ("$pack_id"==2)
			{
				$tarif = $tasseau['PRI_TASSEAUBRUTE'];
			}
	if ("$pack_id "==3)
			{
				$tarif = $tasseau['PRI_TASSEAUTEINTE'];
			}
if ("$inscri_id"==1)
			{
				$pinscri = 0;
			}
 
	if ("$inscri_id"==2)
			{
				$pinscri = $tasseau['PRI_INSCRI_NOIR'];
			}
	if ("$inscri_id "==3)
			{
				$pinscri = $tasseau['PRI_CALLIG'];
			}
 
 
echo $tarif .":". $pinscri;	
}	
 
return;
}	
?>

ET voici le javascript!

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
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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
window.onload=function()
{
	document.getElementById('noscript').style.backgroundColor = 'transparent'; // bug IE affichage boite no-script
	// declaration des évènements
	load_pack();
	load_inscri()
	document.getElementById("cgv_accept").onclick = valid_Form;
	document.getElementById("surface").onchange = verif_surface;
	document.getElementById("pack").onchange = choix_pack;
	document.getElementById("form_com").onsubmit = formValid;
	document.getElementById("inscri").onchange = choix_inscri;
}
 
function valid_Form() {
	radio = document.getElementById("cgv_accept");
	if(radio.checked)
	{
		document.getElementById("form_valid").disabled = false;
	}
	else {
		document.getElementById("form_valid").disabled = true;
	}
}
 
function verif_surface() {
	surface = Math.round(document.getElementById("surface").value);
	document.getElementById("surface").value = surface;
	if(!(surface>15&&surface<10000))
	{
		alert('Le perimetre doit etre compris entre 15 et 10000 cm²');
		document.getElementById("surface").value = 0;
		document.getElementById("pack").selectedIndex = 0;
	}
	if (document.getElementById("pack").selectedIndex != 0)
		calcul();
}
 
function choix_pack() {
	verif_surface();
}
function choix_inscri() {
	verif_surface();
}
 
function load_pack() {
//config et envoi d'une requete synchrone moteur ajax
	objetXHR = creationXHR();
	if(objetXHR==null)
	{
		alert('Votre navigateur ne prends pas en charge les objets ajax.\nVous ne pourrez pas utiliser ce formulaire.');
		return;
	}
	objetXHR.open("post","calcul.php",false);
	objetXHR.setRequestHeader("content-type","application/x-www-form-urlencoded");
	objetXHR.send("load=load_packs");
//retour serveur
	var liste_pack = objetXHR.responseText;
	document.getElementById("select_pack").innerHTML = liste_pack;	
}
 
function load_inscri() {
//config et envoi d'une requete synchrone moteur ajax
	objetXHR = creationXHR();
	if(objetXHR==null)
	{
		alert('Votre navigateur ne prends pas en charge les objets ajax.\nVous ne pourrez pas utiliser ce formulaire.');
		return;
	}
	objetXHR.open("post","calcul.php",false);
	objetXHR.setRequestHeader("content-type","application/x-www-form-urlencoded");
	objetXHR.send("load=load_inscri");
//retour serveur
	var liste_inscri = objetXHR.responseText;
	document.getElementById("select_inscri").innerHTML = liste_inscri;	
}
 
function calcul() {
//config et envoi d'une requete synchrone moteur ajax
	objetXHR = creationXHR();
	if(objetXHR==null)
	{
		alert('Votre navigateur ne prends pas en charge les objets ajax.\nVous ne pourrez pas utiliser ce formulaire.');
		return;
	}
	objetXHR.open("post","calcul.php",true);
	objetXHR.onreadystatechange = retour_calcul;
	objetXHR.setRequestHeader("content-type","application/x-www-form-urlencoded");
	var parametres = "load=pack&pack="+document.getElementById("pack").selectedIndex+"&surface="+document.getElementById("surface").value;
	var parametres = "load=inscri&inscri="+document.getElementById("inscri").selectedIndex+"&surface="+document.getElementById("surface").value;
	objetXHR.send(parametres);
	objetXHR.send(parametres1);
}
 
 
function retour_calcul() {
	if (objetXHR.readyState == 4)
	{
		if (objetXHR.status == 200)
		{
			// recuperation des données du moteur ajax
			var $resultat = objetXHR.responseText.split(":");
			$tarif = parseFloat($resultat[0]);
			$pinscri = parseFloat($resultat[1]);
 
			$surface = document.getElementById("surface").value;		
 
 
			// affectation des elements sans calculs dans la page
 
			document.getElementById("tarif_ht_m").innerHTML = $tarif;	
			document.getElementById("tarif_ht_m_hid").value = $tarif;			
 
			// on determine le type de pack
			pack = document.getElementById("pack").value;
			inscri = document.getElementById("inscri").value;
 
			$tarif_ht = ($surface/100)*($tarif+$pinscri);
			$tarif_ttc = $tarif_ht*1900.6/100+$tarif_ht;
			$tva = $tarif_ht*1900.6/100;
 
 
			// arrondissement des elements à 2 decimales
			$tarif_ht = Math.round($tarif_ht*100)/100;
			$tva = Math.round($tva*100)/100;
			$tarif_ttc = Math.round($tarif_ttc*100)/100;
 
 
			// affectation des elements dans la page
			document.getElementById("tarif_ht").innerHTML = $tarif_ht;		document.getElementById("tarif_ht_hid").value = $tarif_ht;			
			document.getElementById("tva").innerHTML = $tva;				document.getElementById("tva_hid").value = $tva;		
			document.getElementById("tarif_ttc").innerHTML = $tarif_ttc;	document.getElementById("tarif_ttc_hid").value = $tarif_ttc;		
 
 
		}
		else
		{
			alert('erreur lors de la reception des données du serveur');
		}
	}
 
}
 
// fonction de vérification du formulaire, renvoie false si invalide
function formValid() {
	if(document.getElementById("societe").value == '')
	{
		alert('Vous devez indiquer le nom de la societé');
		return false;
	}
	else if(document.getElementById("dirigeant").value == '')
	{
		alert('Vous devez indiquer le nom du dirigeant ou donneur d\'ordre');
		return false;
	}
	else if(document.getElementById("cp").value == '')
	{
		alert('Vous devez indiquer le code postal');
		return false;
	}	
	else if(document.getElementById("surface").value == '')
	{
		alert('Vous devez indiquer la surface');
		return false;
	}
	else if(document.getElementById("pack").selectedIndex == 0)
	{
		alert('Vous devez choisir un pack/kit');
		return false;
	}
	else 
	{
		return true;
	}
}
 
 
/********************** moteur ajax ***********************/
function creationXHR() {
	var resultat = null;
	try
	{   //test pour les navigateurs firefox ou opera
		resultat = new XMLHttpRequest();
	}
	catch(Error)
	{
		try 
		{   //test pour IE>5.0
			resultat = new ActiveXObject("Msxml2.XMLHTTP");
			alert('>5');
		}
		catch(Error)
		{
			try
			{  
				//test pour IE<5.0
				resultat = new ActiveXObject("Microsoft.XMLHTTP");alert('<5.0');
			}
			catch(Error)
			{
				resultat = null;
			}
		}
	}
	return resultat;
}

Cordialement,

GOYER David

Mon formulaire d' origine appelant le javascript est le suivant (newprojet.php) :

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
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
<?php
session_start();
 
if ((isset($_SESSION['user'])) && (($_SESSION['user']!='')))
										{
 
$expire = 12000; // on définit la durée du cookie, 1 an
setcookie("compte1",$_SESSION['entreprise'],time()+$expire);  // on l'envoi
 
}
?>
 
 
<html>
<head>
	<title>CATALOGUE TARIFS</title>
	<link rel=stylesheet type="text/css" href="style.css" /  >
	</head> 
	<body>
 
	<div id="bandeau">
	  Choix de vos presations
	 </div>
 
<div id="contenu"> 
 
		<div id="menu"> 
		<ul>
		<li><a href="tarifs.php" title="Catalogue Tarif ">Catalogue TARIFS</a></li>
		<li><a href="newprojet.php" title="Nouveau projet ">Nouveau projet</a></li>
		<li><a href="affprojet.php" title="Affichage projet">Affichage projet</a></li>
		<li><a href="affcomande.php" title="Affichage commande">Affichage commande</a></li>
		<li><a href="imprimenvoy.php" title="Espace administrateur">Imprimer/Envoyer</a></li>
		</ul>
		</div>
 
 
		<div id="ecriture"> 
		<p align="right">
		 <?php
									if ((isset($_SESSION['user'])) && (($_SESSION['user']!='')))
										{
							?>
 
							<FONT color="red"> <b> <?php echo $_SESSION['entreprise'];?> </b> </FONT><br>
							<a href="deconnexion.php" style="text-decoration:none"><FONT COLOR="#d6d6d6">Deconnexion</FONT></a>	
 
 
						<?php
									}
								else
									{ header("location:connexion.php");
						?>
						<?php
				}
 			?>
 
 
			<br> <br> 
 
		</p>
 
 
 
 
	<link rel="stylesheet" type="text/css" href="style.css"/>
	<script language="JavaScript" src="script.js"></script>
 
 
 
 
	<noscript id="noscript">
	Javascript doit être activé sur votre navigateur pour pouvoir profiter des fonctionnalités de ce formulaire
	</noscript>
 
 
	<form action="./traitementajax.php" method="post" name="form_com" id="form_com">
 
		<div id="form_header"><h3>Etablissement de votre projet  </h3></div>
 
		<div id="form_content">
			<fieldset id="partie_haute">
			<p><label for="societe">Nom:</label><input type ="text" id="societe" name="societe"/></p>
 
			<?php // echo $_SESSION['entreprise'] ?>
 
			<p><label for="cp">Prenom:</label><input type ="text" id="cp" name="cp" maxlength="5"/></p>
			<p><label for="surface">Perimetre de votre projet (en cm2) :</label><input type ="text" id="surface" name="surface" maxlength="6"/>
			</p>
			</fieldset>
 
			<table id="table_commande" border="1" align="center">
			<tr>
				<th class="com_1">Choix du tasseau</th>
				<th class="com_2">Choix inscription </th>
				<th class="com_3">Choix Tension</th>
			</tr>
			<tr>
				<td id="select_pack"><select name="pack" id="pack"><option value=0>A definir></select></td>
				<td id="select_inscri"><select name="inscri" id="inscri"><option value=0>A definir></select></td>
				<td><label id="quantite">1</label></td>		
 
			</tr>
			<tr>
				<th class="com_4">Tarif ht/m2</th>
				<th class="com_5">Tarif ht</th>
				<th class="com_6">Montant T.V.A (19.6%)</th>
				<th class="com_7">Tarif TTC</th>
			</tr>
			<tr>
 
				<td><label id="tarif_ht_m"></label></td>		
				<td><label id="tarif_ht"></label></td>
				<td><label id="tva"></label></td>		
				<td><label id="tarif_ttc"></label></td>				
			</tr>
			</table>
 
			<div id="calculs">
				<p><label>Nombre de factures intermediaires : </label><span id="nb_factInt">0</span></p>
				<p><label>Proportion de chaque facture intermediaire : </label><span id="pc_factInt">0</span> % du tarif TTC</p>
				<p class="montant"><label>Montant de chaque facture intermediaire : </label><span id="mt_factInt">0</span> &euro;</p>
				<p class="total"><label>Montant TTC du solde restant du : </label><span id="mt_restant">0</span> &euro;</p>				
			</div>
 
			<input type="hidden" id="intitule_hid" name="intitule_hid" value="" />
			<input type="hidden" id="tarif_ht_m_hid" name="tarif_ht_m_hid" value="" />
			<input type="hidden" id="tarif_ht_hid" name="tarif_ht_hid" value="" />
			<input type="hidden" id="tva_hid" name="tva_hid" value="" />
			<input type="hidden" id="tarif_ttc_hid" name="tarif_ttc_hid" value="" />
			<input type="hidden" id="nb_factInt_hid" name="nb_factInt_hid" value="" />
			<input type="hidden" id="pc_factInt_hid" name="pc_factInt_hid" value="" />
			<input type="hidden" id="mt_factInt_hid" name="mt_factInt_hid" value="" />
			<input type="hidden" id="mt_restant_hid" name="mt_restant_hid" value="" />
 
		</div>
 
		<hr />
 
		<input type="checkbox" id="cgv_accept" name="cgv_accept"/><label>J'ai lu les <a href="#" target="blank">conditions generales de vente</a> et en accepte toutes les clauses sans reserves.</label>
 
		<div id="form_footer">
			<input type="submit" name="btnsubmit" id="form_valid" value="Commander" disabled="disabled"/>
		</div>
 
	</form>
 
</div>

18/06/2013, 08h22
Invité

Bonjour,
Tu devrais revoir le mécanisme d'AJAX, car le PHP appelé concatènes sa réponse et n'envoie qu'un seul echo !!
Ta syntaxe AJAX est également à revoir, va lire des exemples simples pour apprendre.
18/06/2013, 17h22
David2019

Je vais me pencher sur plus d'exemples alors! Néanmoins peux-tu m'expliquer pourquoi un seul echo m'est renvoyé stp? Je n'arrive a voir pourquoi en déboublant l'ensemble de mon code de base ma variable "pinscri" n'est pas renvoyé...

Cordialement,

GOYER David
18/06/2013, 19h03
David2019

Pourriez-vous m'aidez à transmettre ma variable $_POST['inscri'] de mon javascript a ma page calcul.php svp??? Cela fonctionne pour $_POST['pack'] mais pas pour l'autre POST pk?

Cordialement,

GOYER David

Lorsque tu regardes un AJAX "pur" tu verras

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
function maFonctionAjax(LaValeur)
{
  var MonAjax;
  if (window.XMLHttpRequest){ MonAjax = new XMLHttpRequest();}
  else if (window.ActiveXObject) {MonAjax = new ActiveXObject('Microsoft.XMLHTTP');}
  else {
    alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
    MonAjax = false;
      }
  MonAjax.open('POST',"ajax2_simple.php",true);
  MonAjax.onreadystatechange = function()
  {
      if (MonAjax.readyState == 4 && MonAjax.status==200)
      {
           document.getElementById('LeRetourL').innerHTML=''+MonAjax.responseText+'';
      }
  }
  MonAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  MonAjax.send('LaValeur='+LaValeur);                  
}

Tu vois que le chargement du DIV ne se fait que d'un seul coup ICI
document.getElementById('LeRetourL').innerHTML=''+MonAjax.responseText+'';

J'essaye de renvoyer ma seconde variable inscri à l'aide d'une autre fonction mais ce sera toujours le même $load donc j'ai un peu de mal à récupérer ma variable... Pouvez-vous m'aidez? J'essaye de prendre en compte vos conseils!

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function load_inscri() {
//config et envoi d'une requete synchrone moteur ajax
	objetXHR = creationXHR();
	if(objetXHR==null)
	{
		alert('Votre navigateur ne prends pas en charge les objets ajax.\nVous ne pourrez pas utiliser ce formulaire.');
		return;
	}
	objetXHR.open("post","calcul.php",false);
	objetXHR.setRequestHeader("content-type","application/x-www-form-urlencoded");
	objetXHR.send("load=load_inscri");
//retour serveur
	var liste_inscri = objetXHR.responseText;
	document.getElementById("select_inscri").innerHTML = liste_inscri;	
}

18/06/2013, 22h59
Invité

Bonsoir,
Désolée je suis en déplacement cette semaine et donc peut devant mon micro.
Notes mon conseils du départ, apprends un peut plus, il te manque trop d'éléments , tu parles de $load :roll: tu n'as pas lu ma syntaxe ??
deux choses les cookies ne sont relus qu'au prochain rechargement des PHP sauf si c'est du javascript qui le lit !
D'autre part en javascript ton send

Code:

objetXHR.send("load=load_inscri");

est une erreur, regardes mon exemple.
Je dois me sauver, je rentre sur Paris Vendredi ...