Discussion :

[feelwatt]

Bonjour,

Pour remplir chacun des champs d'un formulaire,
je propose à l'utilisateur de cliquer sur des boutons,

Donc l'utilisateur clique sur un champs
1- je récupère l'id du champs
2- J'affiche la div contenant les boutons, pour qu'il choisisse qu'elle valeur mettre dans ce champs (cliqué)
3- avec une fonction js je rempli le champs avec la valeur du bouton

Donc les boutons sont dans une div,
> j'aimerais faire en sorte que cette div s'affiche à chaque fois sous le champs cliqué.

(Je ne sais si mon explication est claire )
Merci pour vos lumières

[javatwister]

Salut,

Alors, c'est très schématique mais voilà une idée:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<form id="f">
	<div>
		<input type="text" id="t1" />
	</div>
	<div>
		<input type="text" id="t2" />
	</div>
	<div>
		<input type="text" id="t3" />
	</div>
	<div>
		<input type="text" id="t4" />
	</div>
</form>
 
 
<script>
 
for(i=0;i<document.forms["f"].elements.length;i++){
        document.forms["f"].elements[i].addEventListener("focus",(e)=>{
                let champ=e.target;
                if(document.getElementById("mobile")){
                document.getElementById("mobile").parentElement.removeChild(document.getElementById("mobile"))
                };
                let p=document.createElement("p");
                p.id="mobile";
                let b1=document.createElement("button");
                b1.textContent="choix " + champ.id + " n°1";
                b1.addEventListener("click",(e)=>{e.preventDefault();champ.value=e.target.textContent},false)
                        
                let b2=document.createElement("button");
                b2.textContent="choix " + champ.id + " n°2";
                b2.addEventListener("click",(e)=>{e.preventDefault();champ.value=e.target.textContent},false)
                e.target.parentElement.appendChild(p);
                p.appendChild(b1)
                p.appendChild(b2)
                                
        },false)
}
</script>

Problèmes:

J'imagine que tu as des options et un nombre de boutons personnalisés pour chaque champ

Recréer la div à chaque fois n'est peut-être pas le plus propre, mais j'attends de savoir ce que vas préciser

Créer un select te permettrait une gestion plus fluide, ergonomique et tout et tout;

[feelwatt]

Merci javatwister,
c'est une idée, supprimer puis recréer la div à un endroit différent.

J'aurais peut être vu un truc du genre:
sur le click : " la div est relative au champs cliqué"
ce qui la déplacerait.
Mais je ne sais pas si c'est possible...

[javatwister]

Bien sûr mais c'est du pareil au même puisque la div va changer de contenu; j'ai fait un truc comme ça autrefois en css, avec des zones cachées qui apparaissaient au survol. Mais si tu veux paramétrer les choix de manière un peu dynamique, mieux vaut passer par un tableau javascript qui gère les valeurs adéquates; ça allège aussi considérablement le HTML.

[Invité]

Bonjour,

je ne vois pas l'intérêt.
De simples <select> suffisent... et sont certainement plus ergonomiques.

[feelwatt]

En fait la div ne vas pas changer de contenu.

Pour info, la finalité c'est que l’utilisateur renseigne les champs pour les entêtes et pieds de page de ses documents pdf,
donc il y a 2 colonnes en entête avec chacune 3 lignes
et 3 colonnes en pied de page avec chacune 3 lignes.

Il clique sur un champs et choisi d'y mettre son nom, son adresse etc...
Le div reste le même.

[feelwatt]

Bonjour,

je ne vois pas l'intérêt.
De simples <select> suffisent... et sont certainement plus ergonomiques.

Ouais des <select>, par contre je voudrais laisser la possibilité d'y écrire du texte libre.

[Invité]

...laisser la possibilité d'y écrire du texte libre.

Oui, j'y ai pensé après coup.

Mais alors, pourquoi ne pas simplement pré-remplir chacun des <input> avec les données (nom, adresse,...) ?
Ça éviterait un tas de clics inutiles.

[javatwister]

Ben oui. Et un simple champ texte "libre" avec pour value "autre information"; Le problème avec la saisie libre, c'est toujours le contrôle...

[feelwatt]

pourquoi ne pas simplement pré-remplir chacun des <input> avec les données (nom, adresse,...) ?
Ça éviterait un tas de clics inutiles.

Pour laisser le choix...
Et je souhaite laisser la possibilité de mettre par ex: click sur buton 'Nom' puis sur 'prénom'

[Invité]

Tu l'as déjà vu sur un autre site ?
Oui ? Non ?
Demande-toi pourquoi....

Dans 99% des cas, si on propose une "version par défaut" *, les gens ne modifieront rien (ou peu).

* exemple :

• Civilité Prénom NOM
• adresse 1
• adresse 2
• CP VILLE (Pays)

[feelwatt]

J'ai vu un truc encore mieux, qui
pemet de structurer un doc pdf
assez ergonomique > on déplace des champs sur la structure du doc pdf
> digiforma.com
A voir... Mais bon,

Pour ma part j'ai placé mon div à un endroit logique et accessible.
Je vous remercie de l'attention et des proposition.
Et que vive developpez.net