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

DHTML
Apparitions / Disparitions

  Des champs de formulaires supplémentaires

fonction de ce script  principe de ce script  le script lui-meme  demonstration du script  telechargement du script  Compatibilite du script... a partir de : 

  Fonction
Le but de ce script est de faire apparaître un ou plusieurs champs de formulaire supplémentaires suivant les saisies du visiteur.
  Principe
Un formulaire standard, contenant des champs de saisies, des boutons radio, des cases à cocher... et notamment deux boutons 'radio'.
Si un de ces boutons est coché, une liste de sélection (ou tout autre élément) apparaît.
Il y a en fait 3 formulaires :
  • Le premier, reprenant tous les champs avant l'élément caché,
  • le second contenant le ou les élément(s) caché(s),
  • le troisième contenant la suite du formulaire, s'il y en a une et incluant des champs cachés reprenant les saisies des deux formulaires précédents.
  Le script
dans la partie <head>
<script language="JavaScript">
// fonction d'affichage du champ supplémentaire (appellée par 'Sexe : Homme')
function montrer(objet) {

// Pour Netscape
if (document.layers) {
if (document.layers[objet] != null) document.layers[objet].visibility = 'visible';
}

// Pour Internet Explorer
else if (document.all) {
document.all[objet].style.visibility = 'visible';
}

// on appelle la fonction qui prend les données saisies et les place dans le dernier formulaire qui lancera le traitement définitif
alimenter();
}

// fonction de masquage du champ supplémentaire (appellée par 'Sexe : Femme')
function cacher(objet) {

// Pour Netscape
if (document.layers) {
if (document.layers[objet] != null) document.layers[objet].visibility = 'hidden';
}

// Pour Internet Explorer
else if (document.all) {
document.all[objet].style.visibility = 'hidden';
}

// on appelle la fonction qui prend les données saisies et les place dans le dernier formulaire qui lancera le traitement définitif
alimenter();
}

// Fonction placant les données saisies dans le formulaire final
function alimenter() {

// Pour Netscape
if (document.layers) {
document.fin.nom.value = document.formulaire.nom.value;
document.fin.prenom.value = document.formulaire.prenom.value;
if (document.formulaire.sexe[0].status) document.fin.sexe.value = 'homme';
else if (document.formulaire.sexe[1].status) document.fin.sexe.value = 'femme';
document.fin.selection.value = document.suite.document.context.selection.options[document.suite.document. context.selection.selectedIndex].value;
}

// Pour Internet Explorer
else if (document.all) {
document.fin.nom.value = document.formulaire.nom.value;
document.fin.prenom.value = document.formulaire.prenom.value;
if (document.formulaire.sexe[0].status) document.fin.sexe.value = 'homme';
else if (document.formulaire.sexe[1].status) document.fin.sexe.value += 'femme';
}
}

// Fonction pour l'ajout de la saisie dans la liste vers le formulaire final
function ajout() {

// Pour Netscape
if (document.layers) {
document.fin.selection.value = document.suite.document.context.selection.options[document.suite.document. context.selection.selectedIndex].value;
}

// Pour Internet Explorer
if (document.all) {
document.fin.selection.value = document.context.selection.options[document.context. selection.selectedIndex].value;
}
}
</script>

dans la partie <body>
<!-- Formulaire contenant le déclenchement du champ supplémentaire -->
<form name="formulaire">
Nom : <input type="text" name="nom" size="15">
Prénom : <input type="text" name="prenom" size="15">
Sexe : <input type="radio" name="sexe" value="homme" OnClick="montrer('suite');">H <input type="radio" name="sexe" value="femme" OnClick="cacher('suite');">F
</form>

<!-- Calque invisible contenant le champ supplémentaire -->
<div id="suite" name="suite" style="position: relative; visibility: hidden;">
<form name="context">
Que préférez-vous ? <select name="selection" OnChange="ajout();"><option value="">Choisissez<option value="football">Football<option value="formule1">Formule 1</select>
</form>
</div>

<!-- Formulaire final reprenant les données saisies préalablement -->
<form name="fin" action="mailto:biblioscript@biblioscript.com" enctype="text/plain" method="post">
<input type="hidden" name="nom">
<input type="hidden" name="prenom">
<input type="hidden" name="sexe">
<input type="hidden" name="selection">
<input type="submit" value="Envoyer">
</form>
  Démonstration
Nom :
Prenom :
sexe : H F
Votre adresse e-mail : (pour réception du test)
  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é :
    app_form.zip
    2 Ko    		 telechargez le script telechargez le script
    Script séparé :
    app_form2.zip
    2 Ko
    Recherche
    		aide sur la recherche
    CSS 2
    HTML 4
    Javascript 1.3
    Références
    Aide générale
    hit-parade
    Votez TOP Ouaibe !

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