Page de confirmation avant l'envoi du formulaire

**stevenP** · 29/11/2012, 12h05

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 html :

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
			<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

**MRekee** · 29/11/2012, 12h56

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+

**stevenP** · 29/11/2012, 14h31

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..)

**ABCIWEB** · 29/11/2012, 14h55

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.

**stevenP** · 29/11/2012, 15h38

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

**ABCIWEB** · 29/11/2012, 19h58

Code :

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

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>';
}

**ericd69** · 29/11/2012, 20h06

salut,

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

les sessions s'utilisent ensuite comme un simple tableau

**stevenP** · 30/11/2012, 11h23

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.

**gototog** · 30/11/2012, 11h42

page du premier formulaire

Code :

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

<form action = PageRecapitulatif>

page du récapitulatif

Code :

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

<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

**stevenP** · 30/11/2012, 12h05

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 html :

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
<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 JS :

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
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 ?

**stevenP** · 30/11/2012, 14h32

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

Code JS :

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

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();
}

**gototog** · 30/11/2012, 15h05

quelle est l'erreur? est ce que ca marche si tu fait juste un

Code :

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

1
2
3
if(confirm('Confirmez-vous?')){
  alert('on soumet');
}

**stevenP** · 30/11/2012, 16h13

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

**gototog** · 30/11/2012, 16h31

Je crois que la syntaxe pour submit en javascript simple est

Code :

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

 document.NomDuformulaire.submit();

ou

Code :

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

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

**stevenP** · 03/12/2012, 10h20

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

Code JS :

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
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();
	}
}

Page de confirmation avant l'envoi du formulaire [MySQL]

PHP & Base de données

Discussions similaires

Partager

Partager