Formulaire : changer de page après avoir validé

Version imprimable

Salut,
Je débute comme vous allez le voir (!) et j'ai bien cherché mais je ne trouve pas comment rediriger le visiteur sur une autre page une fois qu'il a rempli mon formulaire... pour qu'il constate que tout a fonctionné.

J'ai bien fait en sorte que les champs soient testés et que ça me soit envoyé par mail quand on clique sur SUBMIT, ça fonctionne. Mais pour l'instant, pas de feedback pour le visiteur...

Je pense à une instruction du type : window.location="newpage.asp";

Mais où et comment l'intégrer au script ?

SVP aidez-moi... je sèche ! [/B]
PS : je précise que je n'ai pas mis d'instructions sur le bouton "submit" pour que l'envoi du form par mail fonctionne même si l'utilisateur a désactivé javascript...

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
123
124
125
126
127
128
129
130
 
<html>
<head>
 
<script type="text/JavaScript">
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { 
  test=args[i+2]; val=MM_findObj(args[i]);
 
	if (val) { 
		nm=val.name; 
 
		if ((val=val.value)!="") {	
			if (test.indexOf('isEmail')!=-1) { 
			p=val.indexOf('@');
       		if (p<1 || p==(val.length-1)) errors+='- '+nm+' : ce champ doit contenir un e-mail\n';
 
	  		} else if (test!='R') { 
 
			num = parseFloat(val);
        	if (isNaN(val)) errors+='- '+nm+' : ce champ doit contenir un code postal\n';
        	if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          	min=test.substring(8,p); max=test.substring(p+1);
          	if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
 
			} 
			} 
			} 
 
		else if (test.charAt(0) == 'R') errors += '- '+nm+' : ce champ doit être renseigné\n'; 
		}
  		} 
 
  if (errors) 
  alert('Merci de compléter tous les champs obligatoires !\n\n'+errors);
  document.MM_returnValue = (errors == '');
  }  
  }
 
</script>
</head>
 
 
<body>
 
<form action="mailto:nom@email.com?subject=Titre de la demande" method="post" enctype="text/plain" name="abo" 
onSubmit="MM_validateForm('nom','','R','prenom','','R','societe','','R','fonction','','R','Code Postal','','RisNum','ville','','R','pays','','R','E-mail','','RisEmail','adresse','','R','activite','','R'); return document.MM_returnValue; ">
  <table width="520" cellspacing="1" border="0">
    <tr>
      <td colspan="2" align="center">
      		<p><input type="checkbox" name="En francais" value="oui"> En fran&ccedil;ais
      			&nbsp;&nbsp;&nbsp;&nbsp;
      			<input type="checkbox" name="En anglais" value="oui"> En anglais</p>
      	</td>
    </tr>
    <tr>
      <td colspan="2">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" value="M." checked name="civilite">M.&nbsp;&nbsp;&nbsp;&nbsp;
        	<input type="radio" value="Mme" name="civilite">Mme&nbsp;&nbsp;&nbsp;&nbsp; 
        	<input type="radio" value="Mlle" name="mmm">Mlle</p>
		</td>
    </tr>
    <tr height="30">
      <td width="160" align="right"><p class="gras">Nom*&nbsp;</p></td>
      <td width="360"><input type="text" name="nom" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">Pr&eacute;nom*&nbsp;</p></td>
      <td ><input type="text" name="prenom" size="50"></td>
    </tr>
 
    <tr height="30">
      <td align="right"><p class="gras">Soci&eacute;t&eacute;*&nbsp;&nbsp;</p></td>
      <td><input type="text" name="societe" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">Fonction*&nbsp;&nbsp;</p></td>
      <td><input type="text" name="fonction" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right" valign="top"><p class="gras">Adresse*&nbsp;&nbsp;</p></td>
      <td><textarea rows="4" name="adresse" cols="45"></textarea></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">Code postal*&nbsp;&nbsp;</p></td>
      <td><input type="text" name="Code Postal" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">Ville*&nbsp;&nbsp;</p></td>
      <td><input type="text" name="ville" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">Pays*&nbsp;&nbsp;</p></td>
      <td><input type="text" name="pays" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">E-mail*&nbsp;&nbsp;</td>
      <td><input type="text" name="E-mail" size="50"></td>
    </tr>
	<tr height="30">
      <td align="right"><p class="gras">Tél.&nbsp;&nbsp;</td>
      <td><input type="text" name="tel" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right" valign="top"><p class="gras">Domaine&nbsp;&nbsp; d'activit&eacute;*</p></td>
      <td><textarea rows="5" name="activite" cols="45"></textarea></td>
    </tr>
    <tr>
      <td><p>* champs obligatoires</p></td>
    </tr>
    <tr>
      <td colspan="2" align="center">
      <input type="submit" value="S'abonner" name="Envoyer" class="gras">
      &nbsp;&nbsp;&nbsp;<input type="reset" value="Annuler" name="Annuler" class="gras"></td>
    </tr>
  </table>
</form>
 
</body>
</html>

19/01/2007, 16h32
shaynee

Suis-je si mauvaise... :mrgreen:

Même pas un début de piste pour m'aider ?
19/01/2007, 16h50
ryan

Yop!

Je sais que cela ne résoudra pas ton pb, mais à première vue, on dirait qu'il y a une parenthèse } en trop à la fin de la fonction MM_validateForm(), juste avant </script>.

Ne recois-tu pas de message d'erreur quand tu visualises la page?
19/01/2007, 17h19
shaynee

héhé... :mrgreen:
merci, en fait non je n'ai pas eu de mess d'erreur mais je vais l'enlever on ne sait jamais...

j'avoue qu'à force de tenter des trucs je ne sais plus bien ce que j'ai touché dans le code !

Yop!

Ch'uis à la bourre, donc je vais faire vite.

Voici une autre version de ton code. Chez moi, ça ne fonctionne pas, je pense que mon courrierleur ne supporte pas le mailto. Mais j'ai ajouté un alert('foo') là où devrait être la redirection. Si le formulaire est bien complété, et si tu vois le alert('foo') après que le mail soit parti, on aura déjà fait un grand pas.

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
123
124
125
126
127
128
129
130
131
132
133
134
 
<html>
<head>
 
<script type="text/JavaScript">
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { 
  test=args[i+2]; val=MM_findObj(args[i]);
 
	if (val) { 
		nm=val.name; 
 
		if ((val=val.value)!="") {	
			if (test.indexOf('isEmail')!=-1) { 
			p=val.indexOf('@');
       		if (p<1 || p==(val.length-1)) errors+='- '+nm+' : ce champ doit contenir un e-mail\n';
 
	  		} else if (test!='R') { 
 
			num = parseFloat(val);
        	if (isNaN(val)) errors+='- '+nm+' : ce champ doit contenir un code postal\n';
        	if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          	min=test.substring(8,p); max=test.substring(p+1);
          	if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
 
			} 
			} 
			} 
 
		else if (test.charAt(0) == 'R') errors += '- '+nm+' : ce champ doit être renseigné\n'; 
		}
  		} 
 
  if (errors) 
  {
  alert('Merci de compléter tous les champs obligatoires !\n\n'+errors);
  return false;
  }
  else return true;
 
}  
 
 
</script>
</head>
 
 
<body>
 
<form action="mailto:nom@email.com?subject=Titre de la demande" method="post" enctype="text/plain" name="abo" 
onSubmit="return MM_validateForm('nom','','R','prenom','','R','societe','','R','fonction','','R','Code Postal','','RisNum','ville','','R','pays','','R','E-mail','','RisEmail','adresse','','R','activite','','R');alert('foo'); ">
  <table width="520" cellspacing="1" border="0">
    <tr>
      <td colspan="2" align="center">
      		<p><input type="checkbox" name="En francais" value="oui"> En fran&ccedil;ais
      			&nbsp;&nbsp;&nbsp;&nbsp;
      			<input type="checkbox" name="En anglais" value="oui"> En anglais</p>
      	</td>
    </tr>
    <tr>
      <td colspan="2">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" value="M." checked name="civilite">M.&nbsp;&nbsp;&nbsp;&nbsp;
        	<input type="radio" value="Mme" name="civilite">Mme&nbsp;&nbsp;&nbsp;&nbsp; 
        	<input type="radio" value="Mlle" name="mmm">Mlle</p>
		</td>
    </tr>
    <tr height="30">
      <td width="160" align="right"><p class="gras">Nom*&nbsp;</p></td>
      <td width="360"><input type="text" name="nom" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">Pr&eacute;nom*&nbsp;</p></td>
      <td ><input type="text" name="prenom" size="50"></td>
    </tr>
 
    <tr height="30">
      <td align="right"><p class="gras">Soci&eacute;t&eacute;*&nbsp;&nbsp;</p></td>
      <td><input type="text" name="societe" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">Fonction*&nbsp;&nbsp;</p></td>
      <td><input type="text" name="fonction" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right" valign="top"><p class="gras">Adresse*&nbsp;&nbsp;</p></td>
      <td><textarea rows="4" name="adresse" cols="45"></textarea></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">Code postal*&nbsp;&nbsp;</p></td>
      <td><input type="text" name="Code Postal" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">Ville*&nbsp;&nbsp;</p></td>
      <td><input type="text" name="ville" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">Pays*&nbsp;&nbsp;</p></td>
      <td><input type="text" name="pays" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">E-mail*&nbsp;&nbsp;</td>
      <td><input type="text" name="E-mail" size="50"></td>
    </tr>
	<tr height="30">
      <td align="right"><p class="gras">Tél.&nbsp;&nbsp;</td>
      <td><input type="text" name="tel" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right" valign="top"><p class="gras">Domaine&nbsp;&nbsp; d'activit&eacute;*</p></td>
      <td><textarea rows="5" name="activite" cols="45"></textarea></td>
    </tr>
    <tr>
      <td><p>* champs obligatoires</p></td>
    </tr>
    <tr>
      <td colspan="2" align="center">
      <input type="submit" value="S'abonner" name="Envoyer" class="gras">
      &nbsp;&nbsp;&nbsp;<input type="reset" value="Annuler" name="Annuler" class="gras"></td>
    </tr>
  </table>
</form>
 
</body>
</html>

19/01/2007, 17h35
shaynee

On rame, on rame...

Merci de ton aide Ryan, surtout que t'étais à la bourre.
C'était bien tenté en plus mais... ça marche pô :ouin:

En fait, le form se vérifie toujours sans soucis, le mail s'ouvre et peut s'envoyer, etc.
Mais après il ne se passe rien, la page du form reste affichée quoi :roll:

D'autres idées dans la salle ? :P
19/01/2007, 19h29
ryan

Yop!

Je suis de retour, un peu cassé, mais de retour.
As-tu vu le alert('foo') après que le mail soit parti?
Si oui, il suffit de remplacer le alert('foo') par la redirection et le tour devrait être joué.

Yop!

Voilà, il suffit de remplacer 'une_autre_page.html' dans la fonction vamos() par la page que tu veux afficher après l'envoi du mail.

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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
 
<html>
<head>
 
<script type="text/JavaScript">
 
var sent = 0;
 
function vamos()
{
if (sent == 1) document.location.href='une_autre_page.html';	
}
 
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
 
function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { 
  test=args[i+2]; val=MM_findObj(args[i]);
 
	if (val) { 
		nm=val.name; 
 
		if ((val=val.value)!="") {	
			if (test.indexOf('isEmail')!=-1) { 
			p=val.indexOf('@');
       		if (p<1 || p==(val.length-1)) errors+='- '+nm+' : ce champ doit contenir un e-mail\n';
 
	  		} else if (test!='R') { 
 
			num = parseFloat(val);
        	if (isNaN(val)) errors+='- '+nm+' : ce champ doit contenir un code postal\n';
        	if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          	min=test.substring(8,p); max=test.substring(p+1);
          	if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
 
			} 
			} 
			} 
 
		else if (test.charAt(0) == 'R') errors += '- '+nm+' : ce champ doit être renseigné\n'; 
		}
  		} 
 
  if (errors) 
  {
  alert('Merci de compléter tous les champs obligatoires !\n\n'+errors);
  return false;
  }
  else 
  {
  sent = 1;	  
  return true;
  }
}  
 
 
</script>
</head>
 
 
<body onFocus="vamos()">
 
<form action="mailto:nom@email.com?subject=Titre de la demande;" method="post" enctype="text/plain" name="abo" onSubmit="return MM_validateForm('nom','','R','prenom','','R','societe','','R','fonction','','R','Code Postal','','RisNum','ville','','R','pays','','R','E-mail','','RisEmail','adresse','','R','activite','','R');">
  <table width="520" cellspacing="1" border="0">
    <tr>
      <td colspan="2" align="center">
      		<p><input type="checkbox" name="En francais" value="oui"> En fran&ccedil;ais
      			&nbsp;&nbsp;&nbsp;&nbsp;
      			<input type="checkbox" name="En anglais" value="oui"> En anglais</p>
      	</td>
    </tr>
    <tr>
      <td colspan="2">
        <p>&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" value="M." checked name="civilite">M.&nbsp;&nbsp;&nbsp;&nbsp;
        	<input type="radio" value="Mme" name="civilite">Mme&nbsp;&nbsp;&nbsp;&nbsp; 
        	<input type="radio" value="Mlle" name="mmm">Mlle</p>
		</td>
    </tr>
    <tr height="30">
      <td width="160" align="right"><p class="gras">Nom*&nbsp;</p></td>
      <td width="360"><input type="text" name="nom" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">Pr&eacute;nom*&nbsp;</p></td>
      <td ><input type="text" name="prenom" size="50"></td>
    </tr>
 
    <tr height="30">
      <td align="right"><p class="gras">Soci&eacute;t&eacute;*&nbsp;&nbsp;</p></td>
      <td><input type="text" name="societe" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">Fonction*&nbsp;&nbsp;</p></td>
      <td><input type="text" name="fonction" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right" valign="top"><p class="gras">Adresse*&nbsp;&nbsp;</p></td>
      <td><textarea rows="4" name="adresse" cols="45"></textarea></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">Code postal*&nbsp;&nbsp;</p></td>
      <td><input type="text" name="Code Postal" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">Ville*&nbsp;&nbsp;</p></td>
      <td><input type="text" name="ville" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">Pays*&nbsp;&nbsp;</p></td>
      <td><input type="text" name="pays" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right"><p class="gras">E-mail*&nbsp;&nbsp;</td>
      <td><input type="text" name="E-mail" size="50"></td>
    </tr>
	<tr height="30">
      <td align="right"><p class="gras">Tél.&nbsp;&nbsp;</td>
      <td><input type="text" name="tel" size="50"></td>
    </tr>
    <tr height="30">
      <td align="right" valign="top"><p class="gras">Domaine&nbsp;&nbsp; d'activit&eacute;*</p></td>
      <td><textarea rows="5" name="activite" cols="45"></textarea></td>
    </tr>
    <tr>
      <td><p>* champs obligatoires</p></td>
    </tr>
    <tr>
      <td colspan="2" align="center">
      <input type="submit" value="S'abonner" name="Envoyer" class="gras">
      &nbsp;&nbsp;&nbsp;<input type="reset" value="Annuler" name="Annuler" class="gras"></td>
    </tr>
  </table>
</form>
 
</body>
</html>

23/01/2007, 10h38
shaynee

Waou !

Salut Ryan,

Désolée de pas avoir répondu plus vite, je viens juste de voir ta réponse ! :oops:

Excellent ton script, ça marche !!!
Exactement ce que je voulais faire, en plus j'ai bien capté la logique, ça va me permettre de faire des progrès, c'est cool. ;)

Je conseille ce script à tous ceux qui veulent faire une redirection propre sans fenêtres "alert" qui font peur au visiteur :D

Merci Ryan, trop sympa et ça me donne envie de s'y mettre à fond pour coder en Javascript comme une pro !