Articles web

Nos articles concernant les techniques web sont centrés sur des solutions pratiques qui mettent en œuvre, le plus souvent, notre framework web : Vae Soli!

Des articles généraux sont également fournis dans le respect des standards du web.

Tous nos articles web sont disponibles sous le couvert de la licence Icône Creative Commons Creative Commons — Paternité - pas de modification.

2011-08-22 à 13:28:16

Zones multiples dynamiques

Cet article fournit une solution au souhait de vouloir permettre de multiples encodages, en nombre illimité. Par exemple vous souhaitez permettre à l'utilisateur d'encoder une description en français, une en néerlandais, une en anglais, une en ...

Avec un nombre limité de langues, vous pouvez vous en tirer en créant autant de zones que vous avez de langues prédéfinies. Au-delà d'un certain nombre, vous aurez vite fait de coder beaucoup de zones qui seront parfaitement inutiles. La solution est de créer les zones dynamiquement et de les ajouter au fur et à mesure des besoins. Voyons comment faire.

Formulaire

On crée deux zones : une zone de texte et une zone de sélection (select). On complète ces deux zones avec un bouton '+' qui permet d'ajouter de nouvelles descriptions. 

Line 001: <form method="post" action="/q/test-multi-zones.php" id="frmForm">
Line 002:     <div id="target">
Line 003:         <input type="text" value="Description ..." name="txtDesc[0]" id="txtDesc[0]" />
Line 004:         <select name="cboLang[0]" id="cboLang[0]">
Line 005:             <option value="En">English</option>
Line 006:             <option value="Fr">Français</option>
Line 007:             <option value="Nl">Nederlands</option>
Line 008:         </select>
Line 009:         <input type="button" value="+" name="cmdPlus" id="cmdPlus" onclick="Add( 'txtDesc','cboLang' );" /><br />
Line 010:     </div>
Line 011:     <input type="submit" id="cmdSubmit" name="cmdSubmit" value="Envoyer" />
Line 012: </form>

L'événement onclick du bouton '+' va gérer les ajouts de zones via un Javascript : 

Line 001: <script type="text/javascript">
Line 002: // <![CDATA[
Line 003: iZoneCount = 0;
Line 004: function Add( szTextID,szSelectID )
Line 005: /*-------------------------------*/
Line 006: {
Line 007:     if ( oDiv = document.getElementById( 'target' ) )
Line 008:     {
Line 009:         if ( oValue = document.getElementById( 'txtDesc[0]' ) )
Line 010:         {
Line 011:             iZoneCount++;
Line 012:             var oTextbox    = document.createElement( 'input' );
Line 013:             oTextbox.type   = 'text';
Line 014:             oTextbox.name   = szTextID + '[' + iZoneCount + ']';
Line 015:             oTextbox.value  = oValue.value;
Line 016:             oTextbox.setAttribute('readonly','readonly');
Line 017:             oTextbox.style.border = 'none';
Line 018: 
Line 019:             var oTextbox2    = document.createElement( 'input' );
Line 020:             oTextbox2.type   = 'text';
Line 021:             oTextbox2.name   = szSelectID + '[' + iZoneCount + ']';
Line 022:             oTextbox2.value  = document.getElementById( 'cboLang[0]' ).value;
Line 023:             oTextbox2.setAttribute('readonly','readonly');
Line 024:             oTextbox2.style.border = 'none';
Line 025: 
Line 026:             oDiv.appendChild( oTextbox );
Line 027:             oDiv.appendChild( oTextbox2 );
Line 028:             oDiv.appendChild( document.createElement( 'br' ) );
Line 029:         }
Line 030:     }
Line 031: }
Line 032: //]]>
Line 033: </script>

A la ligne 007 du JavaScript, on détermine où est la division à laquelle les zones vont être ajoutées.

A la ligne 009, on détermine la zone de texte du formulaire initial pour en connaître la valeur. À la ligne 011, on incrémente le compteur de zones qui était à 0 au départ (ligne 003). Des lignes 012 à 017, on crée une zone de texte dont on positionne la valeur à ce qu'on avait dans le formulaire. À la ligne 016 on s'assure que la zone soit non modifiable (c'est TRES optionnel). À la ligne 017, on élimine le bord qui entourne normalement une zone d'édition. Des lignes 019 à 024 on créer une deuxième zone de texte avec la valeur de la select box du formulaire.

Aux lignes 026 et 027 on ajoute les deux zones créées au formulaire (dans la division 'target'). À la ligne 028 on crée un élément <br /> pour aller à la ligne.

Traitement des données

Quand les données sont envoyées au serveur, celles-ci sont désormais des tableaux. Dans l'exemple ici fourni, nous nous contentons de faire un var_dump( $_POST ) en PHP pour visualiser les données envoyées. le tour est joué.