Membre de ClickFR, Reseau francophone Paie-Par-Click
Accueil
Accueil
- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]
Accueil

JavaScript 1.3

  Valider deux formulaires à la fois

fonction  principe  la methode elle-meme  demonstration  telechargement du script 

  Fonction
On plca habituellement les formulaires sur une seule page, mais il peut arriver qu'on ait besoin de les placer sur plusieurs frames à la fois. Dans ce cas, pourquoi obliger le visiteur à valider deux fois ou plus les formulaires ?
VOici un script qui permet de ne valider qu'une fois pour autant de formulaires dans autant de cadres que vous voulez.
  Principe
Imaginons deux formulaires, chacun dans un cadre.
On décide d'abord quel formulaire proposera la validation, au dépend de l'autre, disons dans le cadre de gauche.
Il va s'agir en fait de recopier les données du formulaire de droite dans des champs cachés du formulaire de gauche. Cette copie devra intervenir avant la soumission du formulaire, mais sans géner la soumission proprement dite, d'ou le lancement de cette copie sur l'événement 'OnFocus()' du bouton de soumission.

Il faut faire attention au nommage des cadres, des formulaires et de leurs champs respectifs au risque de perdre des informations ou de provoquer une erreur dans le script.
  Le script
Le fichier principal (déclaration des cadres -frames)
<html>
<head>
<title>Double validation de formulaire</title>
</head>

<frameset rows="1*,1*">
<frame src="page1.html" name="gauche">
<frame src="page2.html" name="droite">
</frameset>

</html>

dans la partie <head> du cadre de gauche (page1.html)
<script language="JavaScript">
function assemblage() {
document.formgauche.prenom.value = parent.droite.document.formdroite.prenom.value;
document.formgauche.email.value = parent.droite.document.formdroite.email.value;
}
</script>

dans la partie <body> du cadre de gauche (page1.html)
<form name="formgauche" action="mailto:biblioscript@biblioscript.com" enctype="text/plain" method="post">
Nom : <input type="text" name="nom">

<!-- Un champ caché pour chaque champ du formulaire de droite -->
<input type="hidden" name="prenom">
<input type="hidden" name="email">
<input type="submit" value="envoyer" OnFocus="assemblage();">
</form>

dans la partie <body> du cadre de droite (page2.html)
<form name="formdroite">
Prénom : <input type="text" name="prenom">
E-mail : <input type="text" name="email">
</form>
  Démonstration

Voir la démonstration

  Téléchargement
Ce script est disponible en deux versions :
  • le script est intégré à la page où il agit,
  • le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

    L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
    Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.
  • Script intégré :
    form_valid_double.zip
    2 Ko
    telechargez le script telechargez le script
    Script séparé :
    form_valid_double2.zip
    2 Ko
    Recherche
    aide sur la recherche
    hit-parade
    Votez TOP Ouaibe !

    statistiques
    aide sur les contacts aide sur la mailing-list aide sur la newsletter