formulaire, pop up, puis soummission

Version imprimable

16/07/2010, 18h11
okoweb

formulaire, pop up, puis soummission

Bonjour à tous,
J'ai un formulaire, après entrée de données, à la soumission je souhaite d'abord afficher le récapitulatif des entrées dans une pop up et sur ce dernier, je souhaite 2 boutons "valider" et "annuler". Si on clique sur "annuler", le pop up se referme et on retourne sur le formulaire en mode édition et pré rempli. Si on clique sur "valider", le pop up se referme et le formulaire est envoyer vers le fichier défini dans l'attribut action="".
Je ne sais pas si je suis au bon endroit.

Merci d'avance...

Meilleures salutations :D.
16/07/2010, 18h26
emmanuel.remy
Salut,

Une solution possible:
1. Sur clic du bouton "Envoyer", tu charges le popup (via un popup= window.open(...))
2. Tu disposes alors de la variable popup qui te permet d'accéder au DOM de ta nouvelle fenêtre. Tu peux donc envoyer les données de ton formulaire vers le popup
3. Si l'utilisateur valides via le popup, alors tu peux utiliser (depuis ta fenêtre popup bien sûr) window.opener qui fait référence à ta fenêtre principale, pour faire un submit de ton formulaire
ERE

Citation:

Envoyé par emmanuel.remy

Salut,

Une solution possible:

Sur clic du bouton "Envoyer", tu charges le popup (via un popup= window.open(...))
Tu disposes alors de la variable popup qui te permet d'accéder au DOM de ta nouvelle fenêtre. Tu peux donc envoyer les données de ton formulaire vers le popup
Si l'utilisateur valides via le popup, alors tu peux utiliser (depuis ta fenêtre popup bien sûr) window.opener qui fait référence à ta fenêtre principale, pour faire un submit de ton formulaire

ERE

Page principal
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Formulaire</title> </head> <body> <form action="traitement.php" method="post" id="census" onsubmit="return false;"> <label for="nom">Nom :</label><input type="text" name="nom" id="nom" value="Test..." /> <input type="submit" value="Preview" onclick="window.open('preview.html','Preview','width=400,height=400,toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,copyhistory=no,resizable=no');" /> </form> </body> </html>
Page pop up : preview.html
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Preview</title> <script type="text/javascript">  </script> </head> <body> <div id="preview"> </div> <a href="#" onclick="javascript:formreturn('census', 'true');">Valider</a> | <a href="#" onclick="javascript:formreturn('census', 'false');">Annuler</a> </body> </html>
Mon pop up s'ouvre parfois avec le contenu du champ nom et en cliquant sur valider mon formulaire n'est pas soumis et ne se ferme point.

Puis-je avoir une simulation simple?

Merci d'avance pour votre aide...

19/07/2010, 12h22
alpha232

Peut être en utilisant la fonction confirm de JS (ou Jconfirm /JQuery) ...., dans ton script de validation.
Dans le confirm, tu mets comme texte, ce que tu veux afficher à l'utilisateur .....

Alpha
19/07/2010, 13h58
okoweb

Citation:

Envoyé par alpha232

Peut être en utilisant la fonction confirm de JS (ou Jconfirm /JQuery) ...., dans ton script de validation.
Dans le confirm, tu mets comme texte, ce que tu veux afficher à l'utilisateur .....
Alpha

Merci pour la réponse, je sais pas comment mettre ce confirm() dans la page de validation. sur cette dernière page faut d'abord l'aperçu des données rentrées dans la page principale puis 2 boutons "Valider" qui submit le formulaire principale en fait la renvoie vers la page dans "action" du formulaire et "Annuler", on retourne vers le formulaire avec les données rentrées au départ en mode édition.

Merci d'avance...

Re,
Code:

1 2 3 4 5 6 7 8 9 10 11 //JS <script type="text/javascript">  </script> //HTML <input type="submit" value="Preview" onclick="popup" />
Citation:

Envoyé par emmanuel.remy

...
Tu disposes alors de la variable popup qui te permet d'accéder au DOM de ta nouvelle fenêtre. Tu peux donc envoyer les données de ton formulaire vers le popup
ERE

Je ne comprends rien de ce point.

Merci d'avance...

Salut,
Voici un exemple :
D'abord tu rajoute ds la partie déclaration du formulaire
onSubmit="return confirmer_ajout"
où "confirmer_ajout" est la procedure de validation

ex :

Code:

< form action = "...php" name ="ajout_enregistrement" onSubmit="return confirmer_ajout">

ensuite, tu place quelque part ds la page entre les balise <script> </script>
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 function confirmer_ajout () { var prix_ajout = document.forms["ajout_enregistrement"].elements["Prix"].value; //Prix est dans ce cas le champ du formulaire à verifier var erreur = 0; if ((prix_ajout < 1) || (prix_ajout > 800) ) { alert ('Vous avez entré une valeur hors limite, le prix doit être situé entre 1 et 800'); erreur = 1;} var msg="Confirmez vous cet ajout prix:"+prix_ajout; if (erreur == 0){ if (confirm(msg)) { document.forms['ajout_enregistrement'].submit() ; } } }

Salut,

Une soluce qui est dans le style que tu souhaites mettre en place:

index.html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script >
function doValidationPopup() {
	popup = window.open('preview.html','Preview','width=400,height=400,toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,copyhistory=no,resizable=no');
}
</script>
<title>Formulaire</title>
</head>
<body>
<form action="traitement.php" method="post" id="census" >
<label for="nom">Nom :</label><input type="text" name="nom" id="nom" value="Test..." />
<input type="button" value="Preview" onclick="doValidationPopup();" />
</form>
</body>
</html>

preview.html:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Preview</title>
<script type="text/javascript">
<!--
//Chargement de la page...
function init(){
		getData();
}
 
function getData(){
   document.getElementById("nom").innerHTML = window.opener.document.getElementById('nom').value;
}
 EricMarc
function formreturn(isValid){
	if (isValid) {
		window.opener.document.getElementById('census').submit();
	}
 
	window.close();
}
 
window.onload=init;
// -->
</script>
</head>
<body>
<div id="preview">
	<span id="nom" style="color:red"></span>
</div>
<a href="#" onclick="javascript:formreturn(true);">Valider</a> | 
<a href="#" onclick="javascript:formreturn(false);">Annuler</a>
</body>
</html>

ERE

21/07/2010, 11h01
okoweb

Citation:

Envoyé par emmanuel.remy

Salut,
Une soluce qui est dans le style que tu souhaites mettre en place...
ERE

Merci, exactement cela.:ccool: