Page de confirmation avant l'envoi du formulaire

Version imprimable

Bonjour,

J'suis confronté à un problème.

J'ai un formulaire qui s’envoie vers une page de traitement en php. Le tout existe déjà, mais j'aimerai intercaler une "page" (ou autre méthode) de confirmation d'envoi du formulaire avant que celui ci soit traité !

Mon formulaire :

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
			<form id="form1" method="post" action="add.php" enctype="multipart/form-data">
				<p class="double">
					<label for="f1-nom"><em  style="color:red">*</em> UI:</label>
					<select name="ui" id="ui">
						<option value=""></option>
						<option value="AL">AL</option>
						<option value="BFC">BFC</option>
						<option value="CA">CA</option>
						<option value="NPC">NPC</option>
						<option value="P">P</option>
					</select>
				</p>
				<p class="double">
					<label for="f1-prenom"><em  style="color:red">*</em> Client:
					<span class="info">(Complétion Automatique)</span></label>
					<input type="text" name="client" autocomplete="off" onKeyUp="suggest(this, 'preetude', 'client');" />
				</p>
 
				<h3><u>Information sur le site :</u></h3>
 
				<p class="double">
					<label for="f1-adresse"><em  style="color:red">*</em> Adresse:
					<span class="info">(Numéro, Rue)</span></label>
					<input type="text" name="adresse" />
				</p>
				<p class="double">
					<label for="f1-adresse"><em  style="color:red">*</em> Code Postal:
					<span class="info"></span></label>
					<input type="text" name="adressecp" />
				</p>
				<p class="double">
					<label for="f1-adresse"><em  style="color:red">*</em> Ville:
					<span class="info"></span></label>
					<input type="text" name="adresseville" />
				</p>
				<p class="double">
					<label for="f1-adresse">Telephone:
					</label>
					<input type="text" name="tel" />
				</p>
				<p class="double">
					<label for="f1-adresse">Latitude:
					</label>
					<input type="text" name="latitude" />
				</p>
				<p class="double">
					<label for="f1-adresse">Longitude:
					</label>
					<input type="text" name="longitude" />
				</p>
				<p class="double">
					<label for="f1-adresse">Nom Correspondant Client:
					</label>
					<input type="text" name="nomcorrespcli" />
				</p>
 
				<h3><u>Information sur le réseau :</u></h3>
 
				<p class="double">
					<label for="f1-adresse">Type de l'Offre:
					<span class="info">(Business VPN, Accés FIA, ..)</span></label>
					<input type="text" name="typoffre" />
				</p>
				<p class="double">
					<label for="f1-adresse">Contexte de l'Offre:
					<span class="info">(Etude AV, ..)</span></label>
					<input type="text" name="motoffre" />
				</p>
				<p class="double">
					<label for="f1-adresse"><em  style="color:red">*</em> Type de Support:
					<span class="info">(CE2O, Local Ethernet, ..)</span></label>
					<input type="text" name="typsup" />
				</p>
				<p class="double">
					<label for="f1-adresse">Débit du Support:
					</label>
					<input type="text" name="debsup" />
				</p>
 
				<h3><u>_</u></h3>
 
				<p class="double">
					<label for="f1-ville"><em  style="color:red">*</em> Nom Demandeur:</label>
					<input type="text" name="urs" />
				</p>
				<p class="double">
					<label for="f1-ville"><em  style="color:red">*</em> @mail Demandeur:</label>
					<input type="text" name="adurs" />
				</p>
				<p class="double">
					<label for="f1-telephone"><em  style="color:red">*</em> Arrivée THD:
					<span class="info">(Format : YYYY-MM-JJ)</span></label>
					<input type="text" name="arrivee" value="<?php echo date("Y-m-d"); ?>"/>
				</p>
				<p class="double">
					<label for="f1-telephone"><em  style="color:red">*</em> Date Retour étude ? :
					<span class="info">(Format : YYYY-MM-JJ)</span></label>
					<input type="text" name="demetude" value="<?php $demandeetu = date('Y-m-d',strtotime("+14 day", strtotime(date("Y-m-d")))); echo $demandeetu; ?>" />
				</p>
 
				<p class="double">
					<label for="f1-infos">Commentaire Etude:
					<span class="info">(Saisissez ici toutes les informations que vous jugerez utiles)</span></label>
					<textarea name="commentaire" rows="20" cols="40">Merci de me retourner les informations suivantes :
- Délais de réalisation.
- N°AS attribué.
- Le nom du chargé d'affaire.</textarea>
				</p>
 
				<p class="double">
					<!-- On limite le fichier à 10Mo -->
					<input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
					<label for="f1-telephone">Fichier : 
					<span class="info">Limite fichier : 10Mo<br>/!\ Créez une Archive ZIP !</span></label>
					<input type="file" name="csv" />
				</p>
 
				<p class="simple">
					<input type="button" value="Envoyer ces informations" onClick="verifForm2(this.form)">
					<input type="reset" name="reset" value="Effacer" />
				</p>
			</form>

Merci d'avance de votre aide :)

Steven

29/11/2012, 12h56
MRekee

Hello,

si c'est pour vérifier/tester certains champs avant l'envoie de celui-ci, utilise jQuery. C'est simple, idéale et plein de tutoriels traitent de cela.

Dans la méthodologie, tout ce que tu fais c'est que tu testes tes champs et active le boutton submit une fois les tests validés. Pas besoin de réinventer la roue des plugins "jQuery" existe déjà (Par example: http://validity.thatscaptaintoyou.com/)

A+
29/11/2012, 14h31
stevenP

Non non, ça j'ai déjà fait la vérification avec un plug-in JS !

J'aimerai juste en fait qu'au moment où la personne clique sur "envoyer", la page génère un "récapitulatif" des infos entrées dans le formulaire et demande de Vérifier et Confirmer l'envoi ! (Je sais pas si je suis clair..)
29/11/2012, 14h55
ABCIWEB

Citation:

Envoyé par stevenP

Non non, ça j'ai déjà fait la vérification avec un plug-in JS !

J'aimerai juste en fait qu'au moment où la personne clique sur "envoyer", la page génère un "récapitulatif" des infos entrées dans le formulaire et demande de Vérifier et Confirmer l'envoi ! (Je sais pas si je suis clair..)

En général on utilise pour cela des variables de session. Tu enregistre le formulaire dans une variable de session, tu fais afficher les champs nécessaires au récapitulatif et ensuite à la confirmation tu enregistre le contenu de la variable de session.
29/11/2012, 15h38
stevenP

Comment fait-on ça avec des variables de sessions ?.. ^^'

Code:

1
2
3
4
5
6
7
8
9
10
session_start();
if(isset($_POST['un_champ_du_formulaire']))
{
$_SESSION['formulaire'] = $_POST;
 
//visualisation pour contrôle durant le développement
echo '<pre>';
print_r($_SESSION['formulaire']);
echo '</pre>';
}

29/11/2012, 20h06
ericd69

salut,

tous tes scripts php qui les utilisent doivent commencer par session_start()

les sessions s'utilisent ensuite comme un simple tableau
30/11/2012, 11h23
stevenP

Effectivement ça marche bien. merci :)
Mais par contre je ne trouve pas comment intercaler ça entre mon formulaire et mon fichier de traitement.
Par exemple, au clic sur "Envoi" du formulaire, un pop up s'ouvre avec le récapitulatif et demande de confirmer avant l'envoi au fichier de traitement.
30/11/2012, 11h42
gototog

page du premier formulaire

Code:

<form action = PageRecapitulatif>

page du récapitulatif

Code:

<form action = PageTraitement>

Edit: Oops j'ai mal lu, si tu veux que ca s'affiche par popup, c'est avec du Javascript donc pas besoin ni de variable de session ni d'une page entre les deux

Et comment je peux integrer ça dans mon javascript pour l'intercaler ? (Desolé en JS j'y connais pas grand chose.)

Voici le code de mon formulaire qui est verifié et envoyé par un script JS (onClick="verifForm2(this.form)") justement :

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
<form id="form1" method="post" action="test2.php" enctype="multipart/form-data">
	<p class="double">
		<label for="f1-nom"><em  style="color:red">*</em> UI:</label>
		<select name="ui" id="ui">
			<option value=""></option>
			<option value="AL">AL</option>
			<option value="BFC">BFC</option>
			<option value="CA">CA</option>
			<option value="NPC">NPC</option>
			<option value="P">P</option>
		</select>
	</p>
	<p class="double">
		<label for="f1-prenom"><em  style="color:red">*</em> Client:
		<span class="info">(Complétion Automatique)</span></label>
		<input type="text" name="client" autocomplete="off" onKeyUp="suggest(this, 'preetude', 'client');" />
	</p>
 
	<h3><u>Information sur le site :</u></h3>
 
	<p class="double">
		<label for="f1-adresse"><em  style="color:red">*</em> Adresse:
		<span class="info">(Numéro, Rue)</span></label>
		<input type="text" name="adresse" />
	</p>
	<p class="double">
		<label for="f1-adresse"><em  style="color:red">*</em> Code Postal:
		<span class="info"></span></label>
		<input type="text" name="adressecp" />
	</p>
	<p class="double">
		<label for="f1-adresse"><em  style="color:red">*</em> Ville:
		<span class="info"></span></label>
		<input type="text" name="adresseville" />
	</p>
	<p class="double">
		<label for="f1-adresse">Telephone:
		</label>
		<input type="text" name="tel" />
	</p>
	<p class="double">
		<label for="f1-adresse">Latitude:
		</label>
		<input type="text" name="latitude" />
	</p>
	<p class="double">
		<label for="f1-adresse">Longitude:
		</label>
		<input type="text" name="longitude" />
	</p>
	<p class="double">
		<label for="f1-adresse">Nom Correspondant Client:
		</label>
		<input type="text" name="nomcorrespcli" />
	</p>
 
	<h3><u>Information sur le réseau :</u></h3>
 
	<p class="double">
		<label for="f1-adresse">Type de l'Offre:
		<span class="info">(Business VPN, Accés FIA, ..)</span></label>
		<input type="text" name="typoffre" />
	</p>
	<p class="double">
		<label for="f1-adresse">Contexte de l'Offre:
		<span class="info">(Etude AV, ..)</span></label>
		<input type="text" name="motoffre" />
	</p>
	<p class="double">
		<label for="f1-adresse"><em  style="color:red">*</em> Type de Support:
		<span class="info">(CE2O, Local Ethernet, ..)</span></label>
		<input type="text" name="typsup" />
	</p>
	<p class="double">
		<label for="f1-adresse">Débit du Support:
		</label>
		<input type="text" name="debsup" />
	</p>
 
	<h3><u>_</u></h3>
 
	<p class="double">
		<label for="f1-ville"><em  style="color:red">*</em> Nom Demandeur:</label>
		<input type="text" name="urs" />
	</p>
	<p class="double">
		<label for="f1-ville"><em  style="color:red">*</em> @mail Demandeur:</label>
		<input type="text" name="adurs" />
	</p>
	<p class="double">
		<label for="f1-telephone"><em  style="color:red">*</em> Arrivée THD:
		<span class="info">(Format : YYYY-MM-JJ)</span></label>
		<input type="text" name="arrivee" value="<?php echo date("Y-m-d"); ?>"/>
	</p>
	<p class="double">
		<label for="f1-telephone"><em  style="color:red">*</em> Date Retour étude ? :
		<span class="info">(Format : YYYY-MM-JJ)</span></label>
		<input type="text" name="demetude" value="<?php $demandeetu = date('Y-m-d',strtotime("+14 day", strtotime(date("Y-m-d")))); echo $demandeetu; ?>" />
	</p>
 
	<p class="double">
		<label for="f1-infos">Commentaire Etude:
		<span class="info">(Saisissez ici toutes les informations que vous jugerez utiles)<br><a href="infocom.htm" target="wclose" onclick="window.open('infocom.htm','wclose', 'width=650, height=600, toolbar=no, status=no, scrollbars=yes, left=20, top=30')"><IMG SRC="../styles/info.png" BORDER=0 ALT="description">Infos</A></span></label>
					<textarea name="commentaire" rows="20" cols="40">Merci de me retourner les informations suivantes :
- Délais de réalisation.
- N°AS attribué.
- Le nom du chargé d'affaire.</textarea>
				</p>
 
				<p class="double">
					<!-- On limite le fichier à 10Mo -->
		<input type="hidden" name="MAX_FILE_SIZE" value="10000000" />
		<label for="f1-telephone">Fichier : 
		<span class="info">Limite fichier : 10Mo<br>/!\ Créez une Archive ZIP !</span></label>
		<input type="file" name="csv" />
	</p>
 
	<p class="simple">
		<input type="button" value="Envoyer ces informations" onClick="verifForm2(this.form)">
		<input type="reset" name="reset" value="Effacer" />
	</p>
</form>

Mon script JS :

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
function verifForm2(formulaire)
{
 
var regex = /^\d{4}-(0?[1-9]|1[012])-([0-9]|[012][0-9]|3[01])$/;
 
if(formulaire.ui.value == "")
	alert('Vous avez oublié de choisir une UI !');
else if (formulaire.client.value == "")
	alert('Vous avez oublié de saisir le client !');
else if (formulaire.adresse.value == "")
	alert('Vous avez oublié de saisir l\'adresse !');
else if (formulaire.adressecp.value == "")
	alert('Vous avez oublié de saisir le code postal !');
else if (formulaire.adresseville.value == "")
	alert('Vous avez oublié de saisir la ville !');
else if (formulaire.typsup.value == "")
	alert('Vous avez oublié de saisir le Type de Support !');
else if (formulaire.urs.value == "")
	alert('Vous avez oublié de saisir le nom du demandeur !');
else if (formulaire.adurs.value == "")
	alert('Vous avez oublié de saisir l\'@ mail du demandeur !');
else if (formulaire.arrivee.value == "")
	alert('Vous avez oublié de saisir la date d\'Arrivée THD !');
else if (formulaire.demetude.value == "")
	alert('Vous avez oublié de saisir la date de Demande d\'Etude !');
else if (!regex.test(formulaire.arrivee.value))
	alert('Votre date d\'arrivée THD n\'est pas au bon format.');
else if (!regex.test(formulaire.demetude.value))
	alert('Votre date de demande d\'etude n\'est pas au bon format.');
else
	formulaire.submit();
}

Et j'suis un peu paumé..
Faudrait que j’insère quelque chose dans mon dernier "else" de mon JS ?

J'ai essayé ça mais il y a une erreur et ça ne marche pas..

Code:

1
2
3
4
if (confirm('Confirmez-vous votre demande de Pré Etude ?\nUI : ' + document.getElementById('ui').value + '\nClient : ' + document.getElementById('client').value + '\nresse : ' + document.getElementById('adresse').value + document.getElementById('adressecp').value + document.getElementById('adresseville').value '\nTel : ' + document.getElementById('tel').value + '\nLatitude / Longitude : ' + document.getElementById('latitude').value + ' - ' + document.getElementById('longitude').value + '\nCorrespondant Client: : ' + document.getElementById('nomcorrespcli').value + '\nType Offre : ' + document.getElementById('typoffre').value + '\nContexte Offre : ' + document.getElementById('motoffre').value + '\nType Support : ' + document.getElementById('typsup').value + '\nDébit Support : ' + document.getElementById('debsup').value + '\nVotre Nom : ' + document.getElementById('urs').value + '\nVotre Mail : ' + document.getElementById('adurs').value + '\nChemin du fichier : ' + document.getElementById('csv').value))
{
    formulaire.submit();
}

30/11/2012, 15h05
gototog
quelle est l'erreur? est ce que ca marche si tu fait juste un
Code:

1 2 3 if(confirm('Confirmez-vous?')){ alert('on soumet'); }
30/11/2012, 16h13
stevenP

Oui ça ça marche ! Mais il ne m'affiche pas d'erreur, il ne fait simplement rien avec mon code que j'ai posté plus haut
30/11/2012, 16h31
gototog

Je crois que la syntaxe pour submit en javascript simple est

Code:

document.NomDuformulaire.submit();

ou

Code:

document.forms['NomDuFormulaire'].submit()

J'ai réussis au final avec ma boite de dialogue !

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
function verifForm2(formulaire)
{
 
var regex = /^\d{4}-(0?[1-9]|1[012])-([0-9]|[012][0-9]|3[01])$/;
 
if(formulaire.ui.value == "")
	alert('Vous avez oublié de choisir une UI !');
else if (formulaire.client.value == "")
	alert('Vous avez oublié de saisir le client !');
else if (formulaire.adresse.value == "")
	alert('Vous avez oublié de saisir l\'adresse !');
else if (formulaire.adressecp.value == "")
	alert('Vous avez oublié de saisir le code postal !');
else if (formulaire.adresseville.value == "")
	alert('Vous avez oublié de saisir la ville !');
else if (formulaire.typsup.value == "")
	alert('Vous avez oublié de saisir le Type de Support !');
else if (formulaire.urs.value == "")
	alert('Vous avez oublié de saisir le nom du demandeur !');
else if (formulaire.adurs.value == "")
	alert('Vous avez oublié de saisir l\'@ mail du demandeur !');
else if (formulaire.arrivee.value == "")
	alert('Vous avez oublié de saisir la date d\'Arrivée THD !');
else if (formulaire.demetude.value == "")
	alert('Vous avez oublié de saisir la date de Demande d\'Etude !');
else if (!regex.test(formulaire.arrivee.value))
	alert('Votre date d\'arrivée THD n\'est pas au bon format.');
else if (!regex.test(formulaire.demetude.value))
	alert('Votre date de demande d\'etude n\'est pas au bon format.');
else
	if (confirm('Confirmez-vous votre demande de Pré Etude ?\nUI : ' + document.getElementById('ui').value + '\nClient : ' + document.getElementById('client').value + '\nAdresse : ' + document.getElementById('adresse').value + ' ' + document.getElementById('adressecp').value + ' ' + document.getElementById('adresseville').value + '\nTel : ' + document.getElementById('tel').value + '\nLatitude Longitude : ' + document.getElementById('latitude').value + ' ' + document.getElementById('longitude').value + '\nCorrespondant Client: : ' + document.getElementById('nomcorrespcli').value + '\nType Offre : ' + document.getElementById('typoffre').value + '\nContexte Offre : ' + document.getElementById('motoffre').value + '\nType Support : ' + document.getElementById('typsup').value + '\nDébit Support : ' + document.getElementById('debsup').value + '\nVotre Nom : ' + document.getElementById('urs').value + '\nVotre Mail : ' + document.getElementById('adurs').value))
	{
	    formulaire.submit();
	}
}