formulaire, pop up, puis soummission

**okoweb** · 16/07/2010, 18h11

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

.

**emmanuel.remy** · 16/07/2010, 18h26

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

**okoweb** · 19/07/2010, 12h01

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 :

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

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 :

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
 
<!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(){
	 var container = document.getElementById('preview');
   while(container.firstChild){
    			container.removeChild(container.firstChild);
  	}
   container.innerHTML = window.opener.document.getElementById('nom').value;
}
 
function formreturn('id', 'oData'){
window.opener.document.getElementById('id').onsubmit = return oData;
window.close();
}
 
window.onload=init;
// -->
</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...

**alpha232** · 19/07/2010, 12h22

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

**okoweb** · 19/07/2010, 13h58

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

**okoweb** · 19/07/2010, 14h24

Re,

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
//JS
<script type="text/javascript">
<!--
var options;
var popup=window.open("preview.html","Preview",options);
// -->
</script>
 
//HTML
<input type="submit" value="Preview" onclick="popup" />

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

**alpha232** · 19/07/2010, 20h47

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 :

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

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

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

Code :

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

}

**emmanuel.remy** · 20/07/2010, 00h30

Salut,

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

index.html

Code :

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

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