|
Traiter
le résultat d'un formulaire
Afficher
le résultat d'un formulaire dans un champ de la page ou
dans une fenêtre.
Ce script peut facilement compléter " Valider
un Formulaire d'Envoi de Mail "
Insérez
le code ci-dessous dans l'entête de votre page (entre les
balises<head> ... </head>)
<script language=JavaScript>
// PLF - /
var fois=0 //a supprimer si le résultat se fait dans un champ
boutrep = new Array();
function fradio1(bouton,reponse)
{
boutrep[bouton]=reponse
}
function fonct_form(form) {
resultat='<html>\n<title>résultat du formulaire</title>\n<head>\n</head>\n<body>\n';
err ="";
if (form.input1.value == "") {
err +="Indiquez le nom de votre site !\n";
}
if (form.input2.value != "http://") {
resultat +="<p align=\"center\">Le nom de votre site est
: ";
resultat +="<a href=\""+form.input2.value+"\">"+form.input1.value+"</a></p>\n";
}else err +="Indiquez l'URL de votre site !\n";
if (form.input3.value != "") {
resultat +="<p align=\"center\">Description : "+form.input3.value+".\n";
}else resultat +="<p align=\"center\">Pas de description.\n";
resultat +="<br>langue : "+form.input4.value+".\n";
if (form.input5.checked) {
resultat +="<br>utilise le Javascript\n";
}else resultat +="<br>n'utilise pas le Javascript\n";
resultat +="<br>Nombre de visiteurs par jour : "+boutrep[1]+".\n";
resultat +="<br>Age du du site : "+boutrep[2]+".\n";
if (err != "") {
alert(err);
}
else{
resultat +="</p>\n</body>\n</html>";
form.result.value = resultat;
}}
</script> |
boutrep = new Array(); |
Création d'un tableau pour gérer les
groupes de boutons radio |
function fradio1(bouton,reponse)
{
boutrep[bouton]=reponse
} |
cette fonction stocke les réponses des
groupes de boutons radio dans le tableau boutrep (ici il
y a 2 groupe donc 2 valeurs boutrep[1] & boutrep[2] |
resultat='<html>\n<title>résultat...
err =""; |
resultat est la variable qui stocke le
résultat du traitement de votre formulaire.
\n insère un saut de ligne
err est la variable qui traite les erreurs
|
if (form.input1.value == "") {
err +="Indiquez le nom de votre site !\n";
} |
Vérifie si le champ 1 est vide si oui
met à jour la variable err.
+= ajoute à la variable |
if (form.input2.value != "http://") {
resultat +="<p align=\"center\">Le nom de votre site est
: ";
resultat +="<a href=\""+form.input2.value+"\">"+form.input1.value+"</a></p>\n";
}else err +="Indiquez l'URL de votre site !\n"; |
Vérifie si le champ 2 est différent
de "http://" (qui était la valeur par défaut)
si oui : resultat +="<p
align=\"center\">Le
nom de votre... on
ajoute les informations dans la variable resultat
"+form.input2.value+":
insère le résultat d'un champ input2 étant le nom du
champ
\" : \ indique que le " qui le suit
fait partie du texte.
si non : else err +="Indiquez l'URL
de votre site !\n"; on met à jour la variable err |
if (form.input3.value != "") {...
--- else resultat +="<p align=\"center\">Pas
de description.\n"; |
ici on teste si le champ 3 est vide et
suivant le cas on indique des informations différentes dans
la variable resultat. |
resultat +="<br>langue : "+form.input4.value+".\n"; |
le résultat du champ 4 (liste déroulante)
est ajouté directement |
if (form.input5.checked) {
resultat +="<br>utilise le Javascript\n";
}else resultat +="<br>n'utilise pas le Javascript\n"; |
teste si le champ 5 (case à cocher)
est coché |
resultat +="<br>Nombre de visiteurs par jour
: "+boutrep[1]+".\n"; |
"+boutrep[1]+" est la valeur
stocker dans le tableau boutrep, elle contient la valeur
cochée dans le groupe de boutons radio 1 |
if (err != "") {
alert(err);
}
else{
resultat +="</p>\n</body>\n</html>";
form.result.value = resultat;
} |
Teste si err est différent de vide
:
Si oui : alert(err); ouvre une boite de dialogue contenant
les erreurs (err).
Si non : form.result.value = resultat; envoie
le résultat dans le champ result
|
Pour
envoyer le résultat dans
une fenêtre : Remplacer form.result.value
= resultat; par :
|
if (fois == 1 ) result.close();
result=open("","resultat","toolbar=no, location=no,
directories=no, status=no, menubar=no, scrollbars=1, resizable=1, top=1,
left=50, width=500, height=200");
result.document.write(resultat)
result.document.write('<p align="center" ><a href="javascript:window.close();">Fermer
cette fenêtre</a></p>')
fois=1; |
if (fois == 1 ) result.close(); |
vérifie si la fenêtre a déjà
été ouverte et la ferme. |
result=open("","resultat","toolbar=no,...
... left=50, width=500, height=200"); |
Ouvre la fenêtre avec les options voulues. |
result.document.write(resultat) |
Ecrit, dans la fenêtre, les informations
stockées dans la variable resultat.
|
Dans notre exemple la variable
contient des informations en html. Dans un autre cas on pourrait
les écrire dans la fenêtre : result.document.write(<html>\n<title>résultat
du formulaire</title>\n<head>... |
result.document.write('<p align="center" ><a
href="javascript:window.close();">Fermer cette
fenêtre</a></p>') |
Crée un lien pour fermer la fenêtre |
fois=1; |
indique que la fenêtre a été ouverte
au moins 1 fois |
Insérez
le code du formulaire exemple dans votre page Web entre les
balises <BODY> et </BODY>
<form action="" method="post" name="monform" id="monform">
<div align="center">
<table width="560" border="0">
<tr bordercolor="#f3f3f3">
<td>Titre de votre site :</td>
<td><input size=40 name="input1" maxlength="100">
</td>
</tr>
<tr bordercolor="#f3f3f3">
<td>URL de votre site :</td>
<td><input size=40 name="input2" value="http://">
</td>
</tr>
<tr bordercolor="#f3f3f3">
<td>Description :</td>
<td><input type="text" size="40" name="input3" maxlength="200">
</td>
</tr>
<tr bordercolor="#f3f3f3">
<td>Langue du site :</td>
<td>
<select name="input4">
<option value="Allemand">Allemand</option>
<option value="Anglais">Anglais</option>
<option value="Espagnol">Espagnol</option>
<option value="Français" selected>Français</option>
<option value="Autre">Autre</option>
</select>
</td>
</tr>
<tr bordercolor="#f3f3f3">
<td>Vous utilisez du Javascript dans vos pages</td>
<td><input name="input5" type=checkbox >
</td>
</tr>
<tr bordercolor="#f3f3f3">
<td>Nombre de visiteurs par jour</td>
<td><p>
<input type="radio" name="r1" value="- 100" onClick="fradio1(1,this.value)">-
100<br>
<input type="radio" name="r1" value="100 à 500" onClick="fradio1(1,this.value)">100 à 500<br>
<input type="radio" name="r1" value="500 à 1000" onClick="fradio1(1,this.value)">500à 1000<br>
<input type="radio" name="r1" value="+ 1000" onClick="fradio1(1,this.value)">+
1000<br>
</p>
</td>
</tr>
<tr bordercolor="#f3f3f3">
<td>Création du site</td>
<td><input type="radio" name="r2" value="-
1 an" onClick="fradio1(2,this.value)">- 1 an<br>
<input type="radio" name="r2" value="1 à 2
ans" onClick="fradio1(2,this.value)">1 à 2 ans<br>
<input type="radio" name="r2" value="2 à 5
ans" onClick="fradio1(2,this.value)">2 à 5 ans<br>
<input type="radio" name="r2" value="+ 5 ans" onClick="fradio1(2,this.value)">+
5 ans </td>
</tr>
</table>
<br>
<table width="560" border="0">
<tr bordercolor="#f3f3f3">
<td><div align="center"><font face="Verdana, Arial,
Helvetica, sans-serif" size="2">
<input onClick="fonct_form(this.form)" type=button value="Envoyer" name="button1">
</font></div>
</td>
<td>
<div align="center"><font face="Verdana, Arial, Helvetica,
sans-serif" size="2">
</font></div>
<div align="center"><font face="Verdana, Arial, Helvetica,
sans-serif" size="2">
<input onClick=fonct_dial(this.form) type=reset value="Rétablir" name="button2">
</font></div>
</td>
</tr>
</table>
</div>
<p align="center"><font face="Verdana, Arial, Helvetica,
sans-serif" size="2">
<textarea name=result rows=10 wrap=PHYSICAL cols=65></textarea>
<br>
<input onClick=form.result.focus();form.result.select() type=button value="Sélectionner
le code et coller dans une page vierge" name=grab>
</font></p>
</form> |
input1 noms
des champs (les boutons radio d'un même groupe ont le
même nom)
result est le nom du
champ qui contiendra le résultat
1 Numéro du groupe de
boutons radio permettant de stocker la valeur dans le tableau boutrep
value="http://" valeur
par défaut
value="Allemand" valeur
selon le choix pour les listes déroulantes ou les boutons
radio
|
Ce site vous a plu ?
Vous avez trouvé le script que vous cherchiez ?
Faites en profiter vos visiteurs : insérez un lien sur
votre site
|
|