Mon JavaScript - Traiter le résultat d'un formulaire

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


Voir aussi Un formulaire d'envoi de mail

Insérez le code ci-dessous dans l'entête de votre page (entre les balises<head> ... </head>)

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