Note
Ce guide est désormais obsolète. Pour la nouvelle version, consultez Comment transmettre la valeur d’un champ à un autre champ.
Il existe maintenant un moyen plus simple d’accomplir la fonctionnalité décrite dans ce guide. Cependant, dans certains cas, la méthode ci-dessous sera nécessaire.
Le formulaire illustré ci-dessous illustre notre objectif (Cliquez sur l’image pour utiliser le formulaire):
Comme vous pouvez le voir, si un utilisateur devait entrer son nom dans le champ “Your Name” et voulait utiliser le même nom dans le champ “Salesperson’s Name”, il lui suffirait de cocher “You are the salesperson”. S’il décidait plus tard de mettre un nom différent dans le deuxième champ (comme “Batman”, par exemple), il suffirait de cliquer à nouveau sur la case à cocher pour supprimer la coche. Il en va de même pour les champs « Your Email » et « Salesperson’s Email », et « Home Address » et « Salesperson’s Address» respectivement. Si vous remplissez et soumettez le formulaire (cliquez sur l’image ci-dessus), vous verrez que les entrées collées lorsque les cases à cocher ont été cliquées apparaîtront également dans la réponse automatique.
La page dans laquelle le formulaire est intégré contient un bloc de JavaScript juste au-dessus de la balise de fermeture “body” qui, avec les gestionnaires d’événements onClick, dans les balises d’entrée des cases à cocher, donne au formulaire sa fonctionnalité “copier-coller”.
Comment intégrer cette fonctionnalité dans l’un de vos propres formulaires
Supposons que vous disposiez d’un formulaire avec deux champs d’adresse postale (“Home Address” et “Business Address”) et que vous vouliez donner aux utilisateurs la possibilité de copier la première adresse sur la seconde. Voici ce que vous feriez :
1. Chargez le formulaire dans le générateur de formulaires et insérez un champ de case à cocher juste avant le champ “Business Address”
2. Cliquez sur “Options”, supprimez les options 2 et 3, renommez “Option 1” en “Same Address as Above” et cliquez sur “OK”
3. Changez l’étiquette de ce champ de case à cocher de “Click to edit” à “Same Address as Above”
4. Utilisez Firebug ou un autre outil de développement Web pour trouver rapidement l’ID de l’étiquette de la case à cocher (alternativement, recherchez simplement la source) et utilisez le CSS injecté pour le masquer avec une déclaration soit display:none ; ou visibilité : masqué ;, selon vos besoins. Ainsi, si l’ID de l’étiquette était label_6 et que vous vouliez simplement le masquer sans repositionner les éléments adjacents, vous injecteriez la règle suivante : #label_6 {
visibility:hidden;
} 5. Enregistrez le formulaire et accédez à l’onglet Configuration et intégration, cliquez sur Intégrer le formulaire, cliquez sur le bouton Source et copiez le code fourni par l’assistant. (Il n’est actuellement pas possible que la magie “copier-coller” fonctionne à la propre adresse d’un formulaire.)
6. Collez la source du formulaire dans la page Web dans laquelle vous souhaitez que le formulaire apparaisse
7. Recherchez dans la source la chaîne value=”Same Address as Above” /> et remplacez-la par value=”Same Address as Above” onclick=”copy_address();” />
8. Ajoutez ce bloc JavaScript juste avant la balise de fermeture “body” et dans ledit bloc de JavaScript, remplacez chaque instance de “12885302469” par l’ID de votre formulaire (la chaîne de chiffres à la fin de son URL qui peut être vue lors de la prévisualisation du forme, comme mis en évidence dans cet exemple)
9. Recherchez la source de l’adresse du domicile et notez le chiffre ou le numéro récurrent qui apparaît sur la même ligne, celui au-dessus et celui en dessous (voir capture d’écran).
10. Dans le bloc JavaScript, remplacez chaque “5” indiqué dans cette capture d’écran par le chiffre ou le nombre noté à l’étape 9. (Bien sûr, si le chiffre se trouve être “5”, il ne serait pas nécessaire de modifier cette partie du script.)
11. Recherchez la source de l’adresse professionnelle et notez le chiffre ou le numéro récurrent qui apparaît sur la même ligne, celui au-dessus et celui en dessous (voir capture d’écran).
12. Dans le bloc JavaScript, remplacez chaque “8” indiqué dans cette capture d’écran par le chiffre ou le nombre noté à l’étape 11. (Bien sûr, si le chiffre se trouve être “8”, il ne sera pas nécessaire de modifier cette partie du script.)
Comment ça marche?
Si vous affichez la source de la page Web dans laquelle l’exemple de formulaire (ci-après appelé le formulaire “Hollywood”) illustré ci-dessus est intégré, vous verrez le bloc de JavaScript juste avant la balise body de fin. Ceci, avec les “gestionnaires d’événements onClick” dans les balises d’entrée des cases à cocher, est ce qui active la fonctionnalité “copier et coller” du formulaire. Décomposons partiellement le contenu du bloc JavaScript (le lien s’ouvre dans un onglet séparé – les numéros de ligne sont inclus pour une référence facile) : les lignes 1 à 10, 12 à 19 et 21 à 38 sont trois fonctions distinctes mais similaires nommées copy_name(), copy_email() et copy_address() respectivement, chacun contenant une instruction IF ELSE.
La première fonction : copy_name()
Objet : Lignes 1 à 10
Cela copie le prénom et le nom du champ « Your Name » dans celui intitulé « Salesperson’s Name » lorsque la case « You are the salesperson » est cochée par l’utilisateur et efface les entrées du champ « Salesperson’s Name » si la case à cocher la marque est supprimée. Les identifiants des entrées se trouvent dans la source du formulaire et sont répertoriés ci-dessous. (Les entrées qu’ils identifient sont entre parenthèses.) input_11_0 (case à cocher “You are the salesperson”) first_6 (zone de texte “First Name” dans le champ “Salesperson’s Name”) last_6 (zone de texte “Last Name” dans le champ “Salesperson’s Name”) “) first_3 (zone de texte “First Name” dans le champ “Your Name”) last_3 (zone de texte “Last Name” dans le champ “Your Name”) La ligne 3 examine l’état (valeur) du champ “You are the salesperson ” (input_11_0) dans le formulaire (form_12885302469) qui à son tour existe dans le document. SI la case est cochée, la condition (entre parenthèses) sera évaluée à TRUE et le code entre la première paire d’accolades après la condition (Lignes 4 – 5 : la branche TRUE de l’instruction IF ELSE) sera exécuté. Sinon (SINON) si la case n’est pas cochée par l’utilisateur, la branche FAUX (Lignes 7 – 8) sera exécutée.
La TRUE branche expliquée
La ligne 4 déclare essentiellement que l’entrée “First Name” dans le champ “Salesperson’s Name” sera remplie avec tout ce qui est entré dans l’entrée “First Name” du champ “Your Name”. Il en va de même pour la ligne 5 : tout ce qui est saisi dans la case “Your Name” du champ “Last Name” (last_3) sera copié dans la case “Last Name” (last_6) du champ “Salesperson’s Name”.
La FALSE branche expliquée
La ligne 7 déclare que la case « First Name» du champ « Salesperson’s Name » (first_6) ne contiendra rien, comme indiqué par la chaîne vide : rien entre les guillemets doubles à la fin de la ligne – voir Variables et différents types de Variables.
De la même manière, la ligne 8 déclare que la case “Last Name” du champ “Salesperson’s Name” (last_6) ne contiendra rien.
La deuxième fonction : copy_email()
Objet : Lignes 12 à 19
Cette fonction copie l’adresse e-mail saisie dans la case “Your Email” dans la case “Salesperson’s Email” lorsque “Same email as above” est coché par l’utilisateur et efface l’adresse de la case “Salesperson’s Email” lorsque la coche est supprimée . Les identifiants des cases (entrées) se trouvent dans la source du formulaire et sont répertoriés ci-dessous : input_13_0 (case à cocher “Same email as above) input_7 (adresse e-mail dans la zone de texte “Salesperson’s Email”) input_4 (adresse e-mail dans la Zone de texte “Your Email”) La ligne 14 examine l’état de la case à cocher (input_13_0) et SI la case est cochée par l’utilisateur, cette ligne sera évaluée à TRUE et la branche TRUE (Ligne 15) sera exécutée. ELSE la branche FALSE (Ligne 17) sera exécutée. La branche TRUE de cette déclaration déclare que la case “Salesperson’s Email” sera remplie avec tout ce qui est entré dans le champ “Your Email” si “Same email as above” est coché et la branche FALSE effacera la zone de texte si la coche est supprimée .
La troisième fonction : copy_address()
Objet : Lignes 21 à 38
Cette fonction copie les six éléments d’adresse postale saisis dans le champ « Home Address » vers leurs entrées équivalentes dans le champ « Salesperson’s Address » SI la case « Same address as above » est cochée et efface le champ « Salesperson’s Address » lorsque le la coche est supprimée. Les identifiants de toutes les entrées sont répertoriés ci-dessous :
input_12_0 (case à cocher “Same address as above”) input_8_addr_line1 (zone de texte “Street Address” dans le champ “Salesperson’s Address”)
input_8_addr_line2 (zone de texte « Street Address Line 2 » dans le champ « Salesperson’s Address »)
input_8_city (zone de texte “City” dans le champ “Salesperson’s Address”)
input_8_state (zone de texte “State / Province” dans le champ “Salesperson’s Address”)
input_8_postal (zone de texte “Postal / Zip Code” dans le champ “Salesperson’s Address”)
input_8_country (Liste déroulante “Country” dans le champ “Salesperson’s Address”)
input_7_addr_line1 (zone de texte « Street Address» dans le champ « Home Address »)
input_7_addr_line2 (zone de texte « Street Address Line 2» dans le champ « Home Address »)
input_7_addr_city (zone de texte “City” dans le champ “Home Address”)
input_7_state (zone de texte “State / Province” dans le champ “Home Address”)
input_7_postal (zone de texte “Postal / Zip Code” dans le champ “Home Address”)
input_7_country (Liste déroulante “Country” dans le champ “Home Address”)
D’après ce qui a été dit ci-dessus dans les fonctions “copy_name()” et “copy_email()”, on peut voir comment cette troisième fonction est construite.
Gestionnaires d’événements
Comme indiqué au départ, pour que les fonctions ci-dessus fonctionnent, elles doivent être “called” par les gestionnaires d’événements onClick dans les balises d’entrée des cases à cocher correspondantes. Si vous recherchez “onclick” dans la source de la page dans laquelle l’exemple de formulaire est intégré, quatre instances seront trouvées :
onclick=”copy_name();”
onclick=”copy_email();”
onclick=”copy_address();”
onclick=”JotForm.reloadCaptcha(‘input_10’);”
Vous remarquerez tout de suite que les valeurs des trois premiers sont constituées des noms des fonctions. Incidemment, ces noms sont totalement arbitraires et “makeItSo()”, “letItBe()” et “itsMyPrerogative()” auraient tout aussi bien fonctionné ! Cependant, il est toujours conseillé de nommer les fonctions en fonction de leur objectif. De plus, les points-virgules ne sont pas absolument nécessaires, mais il est considéré comme une bonne pratique de codage de les inclure, de la même manière qu’ils doivent être inclus après la dernière déclaration dans une règle CSS.
Les trois premiers gestionnaires d’événements onClick ont dû être entrés manuellement dans la source tandis que le quatrième a été automatiquement inséré par l’assistant d’intégration de formulaire et n’est pas pertinent pour le sujet traité.
Quelques éléments à garder à l’esprit
1-Étant donné que la fonctionnalité de copie dépend non seulement du bloc JavaScript mais également des événements onClick, chaque fois que vous écrasez la source du formulaire avec le code mis à jour de l’assistant d’intégration de formulaire, lesdits gestionnaires d’événements doivent être réinsérés.
2-Dans le formulaire Hollywood, vous avez peut-être remarqué une légère différence d’apparence entre les champs “Your Email” et “Salesperson’s Email”. Cela corrige une bizarrerie dans Internet Explorer où si un exemple d’indice est utilisé, le contenu collé du champ est rendu dans la même couleur grise et (plus important encore) n’apparaît pas dans les alertes par e-mail.
3-La copie ne fonctionne que dans un sens. Ainsi, entrer “Cat Woman” dans le champ “Salesperson’s Name” du formulaire Hollywood et cocher “You are the salesperson”, ne collera PAS “Cat Woman” dans le champ “Your Name”.
4-La suppression de la coche de l’une des cases à cocher effacera tout contenu existant dans le champ qu’elle contrôle, que ce contenu ait été précédemment collé à partir du champ associé ou non.
5-Un utilisateur pourrait bien cocher l’une des cases pour copier une entrée, puis modifier l’entrée collée tout en laissant la coche en place, ce qui entraînerait l’enregistrement d’informations contradictoires dans les enregistrements de soumission du formulaire. Ce n’est qu’un problème cosmétique, car l’entrée de la zone de texte serait évidemment la bonne.
6-Au lieu de la casse camel, “onClick” doit être en minuscule (“onclick”) pour que les pages XHTML soient validées. (Cela s’applique même dans les cas de Transitional XHTML.)
Envoyer un commentaire: