[AJAX] Formulaire avec multiples actions

Version imprimable

31/10/2014, 13h15
Invité

[AJAX] Formulaire avec multiples actions

Bonjour,

Voici mon cas :

Dans un formulaire php je saisi une date (correspondant à une date de paiement) et je valide mon formulaire. Voici ce que je souhaite faire suite à ce clic :

- afficher un prompt qui me demande la saisie d'un numéro de chèque.
- mettre à jour la valeur d'un champ hidden de mon formulaire avec ce numéro. (en fait le but est de récupérer ce numéro pour la suite, il y a peut-être une meilleure solution)
- valider le formulaire (rappel de ma page php et mise à jour de la base de données notamment avec ce numéro de chèque).
- une fois la base mise à jour faire appel (dans un pop up) à une page php pour me générer un fichier pdf. Cette page se ferme une fois le traitement terminé. Elle a besoin du numéro de chèque saisi

Ce que j'arrive à faire :

- afficher le prompt pour saisir mon numéro de chèque
- appeler ma page php pour générer mon pdf et la fermer
- valider mon formulaire

Ce que je n'arrive pas à faire :

- mettre à jour le champ hidden avec la valeur saisie dans le prompt avant la validation du formulaire
- appeler ma page php une fois la base mise à jour. Je récupère un numéro de chèque vide

On m'a conseillé Ajax pour faire tout ça, mais je ne connais pas du tout, et je n'ai malheureusement pas le temps de m'y plonger suffisamment pour me débrouiller seule pour l'instant.

Merci d'avance pour votre aide

Cyann
04/11/2014, 09h22
freddou17

Salut,

Un peu de code s'il te plait ! Comment ouvres-tu ton prompt, comment appelles-tu ta page php, etc. ?

++

Bonjour,
Je m'excuse pour le retard de ma réponse. Voici un peu de code :

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
<?php
if (isset($_POST["id_contrat"]) and isset($_POST["paiement"])){
// Au retour de mon formulaire => mise à jour de la base
 
 $id_contrat=$_POST["id_contrat"];
 $NoCheque=$_POST["NoCheque"];
 $paiement = $_POST["paiement"];
 
 $sel="update presence set payele='$paiement' NoCheque=$NoCheque where id_contrat=$id_contrat";
 $mysqli->query($sel) or die($mysqli->error);
}
?>
<html>
 <head>
  <SCRIPT>
   function validGenere(contrat) {
    var NoCheque = prompt('Si paiement par chèque, saisir le numéro :');
    document.getElementById("NoCheque").value=NoCheque;
    window.open("generationNoteFrais.php?idC="+contrat,"target='_blank'","height=50,width=50");
    document.validpaiement.submit();
   }
  </SCRIPT>
 </head>
 
 <BODY>
  <form method="POST" name="validpaiement" action="notedefrais.php">
   <input type="hidden" name="id_contrat" value="78">
   <input type="hidden" id="NoCheque" value="">
   le <input type="text" name="paiement" size="6">
   <input type="image" value="submit" src="./images/enregistrer.gif" onClick="return validGenere(78)">
  </form>
 </body>
</html>

20/11/2014, 09h32
freddou17

Slt,

tu n'as même essayé d'implémenter de l'ajax à ce qu je vois. recherche dans le forum ICI, ton problème est très simple. Reviens vers nous dès que tu rencontreras des problèmes dans l'implémentation de ta solution AJAX.

Bon courage
++
22/11/2014, 14h46
Invité

Pour être sûre que je parte sur la bonne piste :

je saisi la date et valide mon formulaire php.
le clic sur le submit appelle une fonction JS qui :
- ouvre le prompt pour saisir le numéro de chèque. A la validation, j'utilise Ajax pour enregistrer en base.
- une fois l'enregistrement fais, je reviens sur mon JS qui appelle ma page php de génération de pdf.

c'est les bonnes techno au bon endroit ?^^

Après avoir passé la journée dessus, je suis enfin arrivée à mes fins !!

Mon script php pour l'enregistrement en base : traitement.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
<?php
include_once ("connexion.inc.php");
include_once ("session.inc.php");
 
header("Content-Type: text/plain");
 
if (isset($_GET["id_contrat"]) and isset($_GET["id_user"])){
// Ajout de la date de paiement
 
	$id_contrat=$_GET["id_contrat"];
	$id_user=$_GET["id_user"];
	$modePaiement=$_GET["modePaiement"];
	$date_paiement=$_GET["date_paiement"];
	if ($_GET["NoCheque"]!=NULL){
		$NoCheque=', NoCheque='.$_GET["NoCheque"];
	}else{
		$NoCheque='';
	};
 
	list($jour,$mois,$annee) = explode('/',$_GET["date_paiement"]); 
	$paiement = $annee.'-'.$mois.'-'.$jour;
 
	$sel="update presence set payele='$paiement', modePaiement='$modePaiement'".$NoCheque." where id_contrat=$id_contrat and id_user=$id_user";
	$mysqli->query($sel) or die($mysqli->error);
}
?>

Mon fichier javascript pour l'objet XMLHttpRequest : oXHR.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function getXMLHttpRequest() {
	var xhr = null;
 
	if (window.XMLHttpRequest || window.ActiveXObject) {
		if (window.ActiveXObject) {
			try {
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			} catch(e) {
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
		} else {
			xhr = new XMLHttpRequest(); 
		}
	} else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
		return null;
	}
 
	return xhr;
}

Et enfin ma page HTML appelante : notedefrais.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
 
<html>
 <head>
		<SCRIPT>
			function saisiePaiement() {
				var NoCheque = prompt('Si paiement par chèque, saisir le numéro :');
				if (NoCheque!=null && NoCheque!=""){
					var modePaiement="C";
					var NoCheque=NoCheque;
				}else{
					var modePaiement="V";
				}
				var id_contrat = encodeURIComponent(document.getElementById("idC").value); 
				var id_user = encodeURIComponent(document.getElementById("idU").value); 
				var date_paiement = encodeURIComponent(document.getElementById("date_paiement").value); 
				var xhr = getXMLHttpRequest();
 
				xhr.open("GET", "traite_ndf.php?id_contrat="+id_contrat+"&id_user="+id_user+"&modePaiement="+modePaiement+"&NoCheque="+NoCheque+"&date_paiement="+date_paiement, false);
				xhr.send(null);
				xhr.open("GET", "generationNoteFrais.php?idC="+id_contrat+"&idU="+id_user, true);
				xhr.send(null);
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
						alert("Enregistrement Ok");
					}			
				}
			}
		</SCRIPT>
 </head>
 
 <BODY>
	<form method="POST" name="validpaiement" action="notedefrais.php">
	<input type="hidden" id="idC" value="'.$obj->id_contrat.'">
	<input type="hidden" id="idU" value="'.$obj1->id_user.'">
	le <input type="text" id="date_paiement" size="10" />
	<input type="image" value="submit" onclick="saisiePaiement();" src="./images/enregistrer.gif">
	</form>
 </body>
</html>

Merci pour les liens !

23/11/2014, 11h53
Invité

Bonjour,

Je me suis un peu emballée hier soir. Ca fonctionnait je pense parce que j'avais mis des alert qui devaient temporiser ma 1ere action (appel du script php pour enregistrement en base).

Quand j'ai nettoyé mes traces, l'appel a la génération de pdf ne fonctionne plus.

Pourtant, si j'ai bien compris, j'ai mis ma 1ere action en mode synchrone, donc il devrait attendre que ça soit fini pour continuer non ?
Je vois pas trop là

Bon j'ai résolu mon dernier pb, mais un nouveau est apparu, j'ai l'impression que c'est sans fin.

mon formulaire html est dans une boucle, donc j'ai un formulaire pour chaque utilisateur.
J'affiche l'id de mon utilisateur dans le formulaire, c'est ok.
Code:

1 2 3 4 5 6 echo '<td><form method="POST" name="validpaiement" action="notedefrais.php">'; echo '<input type="hidden" name="contratP" id="contratP" value="'.$obj->id_contrat.'">'; echo '<input type="hidden" name="userP" id="userP" value="'.$obj1->id_user.'">'; echo 'le <input type="text" name="date_paiement" id="date_paiement" size="10" />'; echo '<input type="image" value="submit" onclick="saisiePaiement();" src="./images/enregistrer.gif"></td></tr>'; echo '</form>';
Je valide, et l'id que je récupère dans ma fonction JS n'est pas le bon ! C'est celui d'un utilisateur dont le formulaire n'est pas encore remplit.

Code:

alert ("user1="+document.forms["validpaiement"].elements["userP"].value);

J'ai chercher un moment sur internet en vain, vous pouvez m'aider ?

24/11/2014, 09h27
freddou17
Slt, l'élement id dans ton DOM daoit etre unique

change ça

Code:

id="userP"

en
Code:

1 2 id="userP.$obj1->id_user" //à chaque tour de boucle tu auras id=userP1, id=userP2...
c'est un exemple pas testé, n'oublie d'impacter ta méthode saisiePaiement(), je pense qu'il lui faudra un paramètre en entrée pour reconstituer les id souhaités...

La manière de récupérer le form n'est pas bonne non plus

Code:

document.forms["validpaiement"]

va te retourner un tableau... comment savoir sur lequel travailler?

voici deux lien qui pourront t'aider ici et ici

++

Ca y est !!! J'y suis enfin arrivée !

Mon formulaire que j'ai adapté pour avoir un id unique sur les champs qui m'intéressent :

Code:

1
2
3
4
5
6
7
 
echo '<td><form method="POST" name="validpaiement" action="notedefrais.php">';
echo '<input type="hidden" name="contratP" id="contratP'.$obj1->id_user.'" value="'.$obj->id_contrat.'">';
echo '<input type="hidden" name="userP" id="userP'.$obj1->id_user.'" value="'.$obj1->id_user.'">';
echo 'le <input type="text" name="date_paiement" id="date_paiement'.$obj1->id_user.'" size="10" />';
echo '<input type="image" value="submit" onclick="saisiePaiement('.$obj1->id_user.');" src="./images/enregistrer.gif">';
echo '</form></td></tr>';

Ma fonction javascript dans laquelle je passe le numéro d'user en paramètre, j'ai rajouté ceci pour récupéré l'id unique de mes input

Code:

1
2
3
4
5
6
7
8
 
var user="userP"+var_user;
var contrat="contratP"+var_user;
var datep="date_paiement"+var_user;
 
var id_contrat = encodeURIComponent(document.getElementById(contrat).value); 
var id_user = document.getElementById(user).value; 
var date_paiement = encodeURIComponent(document.getElementById(datep).value);

Et ça marche impeccable !
Merci freddou17 pour ton aide et les tutos, ça me resservira