ACCUEIL
Contact
Rechercher
Insérez dans vos
  favoris

ACCUEIL DES
  VISITEURS

DATE & HEURE
EFFETS DE TEXTE
FENETRES
FORMULAIRES
IMAGES
MENUS
PRATIQUE
POP UP
DIVERS

Cours de javascript
Générer vos Fichiers
  CSS

Générer vos Meta-Tags
Description des Balises
  Meta

Les Codes Couleur
L'objet Math
Lissage De Prêt
Tableau d'Amortissement
un Multi-Moteurs de recherche sur Votre Site
Cryptez votre e-mail
  pour contrer le Spam

Cryptez vos Scripts
Moteurs de recherches
Référencement
Je Crée Mon Site
L'éditeur JavaScript


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 "

Titre de votre site :
URL de votre site :
Description :
Langue du site :
Vous utilisez du Javascript dans vos pages
Nombre de visiteurs par jour

- 100
100 à 500
500à 1000
+ 1000

Création du site - 1 an
1 à 2 ans
2 à 5 ans
+ 5 ans


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&eacute;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&eacute;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&eacute;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&eacute;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&eacute;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&eacute;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

 
 
Mon javascript    07-09-2018