[RESOLU] Cumuler champs de formulaire de saisie et liste déroulante

Bonjour à la communauté.

Je cogite a une simple problématique :

Comment cumulé un champ type saisie à un champ type liste déroulante.

- Supposons une liste déroulante avec un pas de DIX (1920,1930,...1990)
- un internaute a qui ont permet de saisir son choix non présenté dans la liste déroulante.
- Que cette internaute puisse entrée sa valeur "dans" le champ supposé in-modifiable de la liste déroulante.

NB : La saisie serait reçu en GET ou POST , peu importe, là n'est pas le sujet.

J'imagine bien une modification d'affichage en live avec javascript

...
document.getElementById('ID_Tag_HERE_of_LABELForm').innerHTML = 'NEW_Value_HERE';
...

(ex : http://www.tizag.com/javascriptT/javascript-innerHTML.php )
Via un bouton radio par exemple comme "activateur" ...

Je cherche donc a pouvoir présenter des choix habituels et permettre la saisie d'une valeur non-conventionnelle .


Connaissez vous d'autres pistes a suivre sur ce genre de "service" de formulaires ?
Merci de vos contributions.
Modifié par ASAP (11 Nov 2010 - 17:12)

Salut !

C'est quoi ton objectif final ? Parce que je vois pas pourquoi ajouter l'élément à la liste déroulante et devoir faire "submit" deux fois le formulaire à ton usager serait pertinent.

Tu n'as qu'à faire une validation côté serveur qui dit "Si le champ texte n'est pas vide, valide si c'est un chiffre qui ressemble à ce que je veux; sinon, prend la valeur du <select>"

Sinon ta solution n'est pas mauvaise sauf que ça implique que la personne remplie ton formulaire avec une chiffre non-conventionnel, il envoie le formulaire et il doit le recommencer et choisir le chiffre dans la liste déroulante après ?

Bref, il faudrait plus d'explications à ce que tu veux faire

A mon sens, tu peux mettre les choix possibles dans une base de données, et quand une valeur non prévue est spécifiée, tu l'ajoutes dans ta base, et quand tu listeras tes valeurs, ça listera celles ajoutées au passage (vu que tu listeras ta base de données).

Mon questionnement vient du fait que je veux proposer sous les yeux de l'internaute la double possibilité d'une liste déroulante et d'une saisie, mais dans un seul élément visible de formulaire.

Pour répondre à nico3333fr:
Si je pousse ton raisonnement, après 5000 passages d'internautes , je risque de me retrouver avec une liste déroulante proposant peut-être 2000 valeurs possible ... PAS GLOP .

Pour répondre à sorano :
Mon objectif final est reformulé ici dans les première lignes.
Je ne souhaite pas proposer l'incorporation de la valeur saisie par l'internaute dans la liste déroulante, mais que l'un ou l'autre soit pris en compte, car l'internaute ne pourra définir que l'un ou l'autre dans le même champs de formulaire. (Je pense que je dois m'orienter vers une fausse liste déroulante [?javascript?] rattaché a un vrai champ de saisie.)
Le double submit est proscrit.

La validation du contenu soit des choix proposé , soit de la valeur saisie, n'est pas un problême, ni même ce qui m'amène ici.

En un seul remplissage de formulaire, l'internaute doit pouvoir consulter des valeurs d'une liste (ou pseudo liste déroulante) ET éventuellement saisir une valeur qui lui soit plus approprié.

_______________________________________________________

Exemple sous vos yeux :
Quand vous remplissez ou éditez un message dans ce forum apparait en bas une liste déroulante pour le "langage" du code dans le corps du message.
Jeveux offrir la possibilité de saisir le nom du code "tartempion" en lieu et place du terme "Language..." de la liste déroulante.
Ou pareil avec le champ "couleur" ..

Merci pour vos contributions les gars.
Modifié par ASAP (11 Nov 2010 - 10:49)

a écrit :
Mon questionnement vient du fait que je veux proposer sous les yeux de l'internaute la double possibilité d'une liste déroulante et d'une saisie, mais dans
un seul élément visible de formulaire.

Si tu penses à une combobox, ça n'existe malheureusement pas dans les formulaires web en tant que tel.

Partant de ce constat, tu as deux choix à mon avis.

Premièrement, comme tu l'as rapidement évoqué: un vrai champ de saisie couplé à une fausse liste sous forme de div, dépliable avec une icône. Ce qu'il y a, c'est que ce genre de contrôle risque rapidement d'être problématique pour la'ccessibilité, même si tu peux déjà faire des choses intéressantes dans ce sens avec aria. De plus, une fonctionnalité à mon avis trop importante sera absente au cas où javascript est indisponible (surtout si la liste de choix est longue)

Comme seconde possibilité, tu laisses une liste visible en permanence et dans laquelle tu proposes une option type « autre ». Si l'utilisateur choisit cette dernière option, alors tu affiches ou tu dégrises un champ de texte classique genre « veuillez préciser ». Au niveau de l'accessibilité, c'est à mon avis bien préférable. C'est beaucoup plus light pour ce qui est de la programmation javascript, le formulaire est pleinement utilisable sans javascript si tu conçois ton script correctement, et côté serveur l'algorythme est très simple: si autre est sélectionné alors on prend la valeur dans la zone de texte, sinon on prend la valeur de la liste. Alors bien sûr ça te prend plus de place qu'un contrôle superposé, mais je pense que se limiter à utiliser des composants standards est beaucoup plus ergonomique que d'essayer de réinventer maladroitement la roue avec des choses dont l'apparence peuvent dérouter l'utilisateur.
Modifié par QuentinC (11 Nov 2010 - 10:49)

QuentinC a écrit :


Partant de ce constat, tu as deux choix à mon avis.

Premièrement, comme tu l'as rapidement évoqué: un vrai champ de saisie couplé à une fausse liste sous forme de div...

Comme seconde possibilité, tu laisses une liste visible en permanence et dans laquelle tu proposes une option type « autre ». ...
... mais je pense que se limiter à utiliser des composants standards est beaucoup plus ergonomique que d'essayer de réinventer maladroitement la roue avec des choses dont l'apparence peuvent dérouter l'utilisateur.

Tu as fait mouche avec ta vision et j'adhère a ta deuxiême proposition de présenter visible le champ de saisie si la réponse n'est pas dans la combo.

Problême pour moi résolu ! Yes ! Merci QuentinC

J'essayerais de mettre ici la portion de script dans ce sens.
Longue vie à AlsaCreations et a sa communauté .

Merci à tous pour vos contributions, voici le résultat de cette réflexion :

<form name="test01">
<select onchange="if(this.selectedIndex == 2) document.getElementById('saisie').style.display = 'block';
else document.getElementById('saisie').style.display = 'none';
document.forms.test01.saisie.value='Votre Saisie ...';" name="testselect">
<option value="premier">Choix 1</option>
<option value="deuxieme">Choix 2</option>
<option value="autre">Autre ...</option>
</select>
<input id="saisie" type="text" style="display:none;" onFocus="javascript:this.value=''" /> 
</form>

Modifié par ASAP (12 Nov 2010 - 10:35)

Si je peux encore me permettre quelques améliorations :
- Ce serait mieux de mettre le script dans une fonction, et si possible dans un fichier externe, pour éviter de surcharger le code HTML et pour respecter le principe de séparation contenu/présentation/comportement.
- Ton script peut être un peu raccourci et optimisé :

var s = document.getElementById('saisie');
s.style.display = (this.selectedIndex==2? 'block':'none');

Je suis encore d'accord QuentinC, mais ...

il me sera plus simple avec mon "editeur" php qu'est PHPMaker d'ajouter comme "arguments" a la combo et a l'input les fonctions javascripts, que d'aller directement dans le code faire cette modification, qui risque en plus de sauter a chaque génération des pages si j'applique ta proposition.

Ma conbo sera certainement fixe en taille de choix présenté, ce qui devrait me permettre de définir en dur le N° d'index.

Petite remarque pour les autres lecteurs du sujet, ton "raccourcissement" ne prend pas en compte la re-disparition du champ input si le choix de la combo est re-modifié
et l'effacement de la valeur saisie (toujours si la conbobox est re-modifié).

Merci encore de t'être penché sur ce sujet, TU m'as mit sur la bonne piste.

Avec plus de 4800 posts , j'aurrais du me douter que tu saurais m'aiguiller.
Bonne "études" à toi

Pour sorano :
Ta signature :Un problème sans solution est un problème mal posé
Qu'aurait dit Einstein si on lui avait posé le problème suivant :
Qu'advient il si une force irrésistible est appliqué sur un objet immuable ?


PS : je suis intimement convaincu que je suis de la troisième sorte de gens ! LoL

Pour finir, petit lien vers la proposition d'utilisation de WAI-ARIA par QuentinC:
http://www.lesintegristes.net/2008/12/09/introduction-a-wai-aria-traduction/
Modifié par ASAP (12 Nov 2010 - 10:43)