Reconnaitre et affecter des inputs

**darkside777** · 13/10/2018, 13h46

Bonjour !

je me suis lancé dans un projet assez complexe
j'aimerai faire un tableau dans lequel il y aurait une classe et des sous fonctions.
celles ci seraient demandé dans des labels.

j'ai ainsi crée 3 label :

le premier dans lequel je mets des classes
le deuxième dans lequel je mets des sous parties
le troisième dans lequel je suis censé indiquer la classe d'une sous partie (les deux devant figurer dans les labels du dessus).

lorsque la sous partie est identifiée elle est rangé dans un tableau qui correspondra à la dites classe.

j'ai donc un problème:
comment reconnaitre deux input et classer ceux ci en fonctions des inputs précédent, et comment créer un tableau pour la classe correspondante

voici un exemple type:

classe : fruits, légumes
sous parties: bananes, haricots, fraise

reconnaitre: bananes, fruits ; haricots, légumes ; fraise, fruits

rendu:

Fruits:
bananes, fraise
Légumes:
haricots

voici donc mon code pour le moment. j'espère que c'est une bonne approche du rendu final puisque j'y ai travaillé très longtemps (pour peu d'ajout et pour essayer de comprendre certaines choses, parfois en vain) je me rends bien compte en tant que débutant que mon projet semble être ambitieux et difficile et donc mon code pourrait devoir vous insatisfaire et j'en suis désolé.
https://jsfiddle.net/floflo777/ceg5vw2d/167/

Merci de votre aide !
Bien cordialement un apprenti reconnaissant.

**NoSmoking** · 14/10/2018, 11h13

Bonjour,
je dois admettre que je ne comprend pas bien ce à quoi tu veux aboutir !

Tes trois <input> sont indépendant l'un de l'autre, il te faut, si tu souhaites affecter à « fruits », une fois crée, que, lors de la création de « banane », par exemple, tu puisses choisir dans quelle catégorie tu veux mettre ce nouvel élément. (lire lentement la phrase)

Mais est-ce cela le but recherché !?!

**darkside777** · 14/10/2018, 13h53

Excusez moi si ce n'était pas clair:
En effet, j'aimerais avec 3 input indépendants pouvoir choisir à quelle classe affecter une sous partie
si ce n'est toujours pas clair voici un exemple le plus concret possible

1er input : fruits
2eme input : banane
3eme input :fruits, banane

Dans le 1er input, j'indique 1 ou plusieurs classes.
dans le second input, j'indique 1 ou plusieurs sous parties.
dans le troisième input, j'indique la classe dans laquelle ira la sous partie
Cependant le 3eme input sert peut être à rien et peut être que je ne peux pas afficher en même temps "fruits, banane"
dans ce cas le 3eme input serait la classe de la sous partie
petit exemple pour fluidifier ce pavé

1er input: fruits
2eme input: banane
3eme input: fruits

ainsi, le 3eme input récupère avec Getelementbyid "banane" et le met dans le tableau "fruits" que l'on a désigné dans le premier input
à savoir il faut donc créer un tableau à chaque nouvelle classe ce que je ne sais pas faire mais si vous ne pouvez pas me renseigner sur ce point je tacherai de me débrouiller seul

P.S [ lire lentement pour mieux comprendre ]

Merci Beaucoup de votre aide, en espérant avoir été plus clair.

Invité · 14/10/2018, 15h40

Bonjour,

Toujours pas.

1- C'est (probablement) ta méthodologie qui est mauvaise.

Envoyé par darkside777

...ainsi, le 3eme input récupère avec Getelementbyid "banane" et ...

Quel intérêt d'un 3ème input, si c'est pour "récupérer" (?) ce qui est écrit dans les 2 autres ?
Ça n'a pas de sens.

2- C'est aussi la terminologie qui manque de précision : "classe" ? "sous partie" ? "fonction" ?

Ça veut dire quoi ?

3- Si on part du principe que :

ce que tu appelle "classe" peut être appelé "catégorie"
qu'une "catégorie" peut contenir des "sous-catégories" (autrement dit : une "catégorie parente" peut avoir des "catégories enfants")
que dans une "catégorie" on peut mettre des "produits"

Alors le système devient beaucoup clair, et finalement très "classique", non ?

4- Alors, on peut séparer le traitement en 2 parties indépendantes :

4.1- Ajouter une catégorie :

un <input> : "nom de la catégorie"
un <select> (liste des catégories déjà enregistrées) : "catégorie parente" (si "pas de parent" => 0)
un <input> : "Ajouter la catégorie"

4.2- Ajouter un produit :

un <input> : "nom du produit"
un <select> (liste des catégories enregistrées) : "catégorie du produit"
un <input> : "Ajouter le produit"

5- Et si c'est destiné à être enregistré en Base de Données, il faut avoir un langage serveur, comme PHP (qui peut être appelé via Ajax).

N.B. Si ça ne correspond pas à ce que tu veux, alors je n'ai vraiment rien compris... malgré tes "explications", et bien que j'ai lu plusieurs fois, lentement...

**darkside777** · 14/10/2018, 15h49

Merci beaucoup c'est exactement ça !

Pourriez vous juste me montrer un exemple ?
si cela ne vous dérange pas

J'étais parti sur ça https://jsfiddle.net/floflo777/fwb1g2az/98/ parce que j'étais vraiment résolu à la trouver cette réponse

mais bon ça devient compliqué même pour moi qui l'ai fait

Merci beaucoup

Invité · 14/10/2018, 16h05

1- Je t'ai indiqué l'architecture HTML *.

2- L'architecture des array/objets JavaScript à construire sera (de la forme) :

Code :

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

1
2
3
4
5
6
var categories = []; // array
categories[0] = { 'nom':'fruits-legumes', 'parent':''} // PAS de catégorie parente
categories[1] = { 'nom':'fruits', 'parent':0} // parent : 'fruits-legumes'
categories[2] = { 'nom':'legumes', 'parent':0} // parent : 'fruits-legumes'
// ....
console.log( categories );

Code :

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

1
2
3
4
5
6
var produits = []; // array
produits[0] = { 'nom':'banane', 'categorie':1} // catégorie : 'fruits'
produits[1] = { 'nom':'haricot', 'categorie':2} // catégorie : 'legumes'
produits[2] = { 'nom':'fraise', 'categorie':1} // catégorie : 'fruits'
// ....
console.log( produits );

3- * dans les 2 <select> : on ré-affiche (via JS, à chaque fois qu'une nouvelle catégorie est créée) la liste de toutes les catégories enregistrées.

4- Maintenant que tu as une méthodologie claire, tu devrais pouvoir t'en sortir, non ?

**darkside777** · 14/10/2018, 16h59

Merci !

Invité · 15/10/2018, 08h07

bj,

quelques précisions:
dans ```categories```, il n'y a pas besoin de parent (car dans darkside777#1 post) sous-partie/partie réfère juste à l'élément d'une classe/catégorie

la relation est juste
typeA: pasteque, melon
typeB: cerise, mures
avec typeA: les-trucs-a-cocktails et typeB les-trucs-rouges

indépendamment de l'affichage, la structure qui vient pas mal à l'esprit c'est une simple map

Code js :

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

1
2
3
4
var classToParts = {
    'les-trucs-a-cocktails':['pasteque', 'melon'],
    'les-trucs-rouges':['cerises', 'mures']
}

le tableau de classes s'obtient par

Code js :

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

classes = Object.keys(classToParts) //['les-trucs-a-cocktails','les-trucs-rouges']

quelques avantages de la représentation ci-dessus sont:
- un accès rapide au tableau: pour ajouter un produit

Code :

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

classToParts[klass].push(produit)

- une seule structure à gérer
- un parcours "lié" pour afficher (dans jreaux62 il faut soit trier le tableau de produits, soit itérer sur les catégories mais pour chaque catégorie itérer sur tout le tableau de produit.., soit dénormaliser le nom de la catégorie sur le produit a au lieu d'y référer par un nombre)

Code js :

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

1
2
3
4
5
6
7
8
9
    var s = ''
    classes = Object.keys(classToParts)
    classes.forEach(c=>{
        s += '<li>'+c+'<ul>'
        classToParts[c].forEach(p=>{
            s += '<li>'+p+'</li>'
        })
        s += '</ul></li>'
    })

mais peut-être que tu as une idée derrière la tête non dite qui du coup rend l'approche par map non pertinente.

dans tous les cas tu transpires pas beaucoup quelque soit l'approche que tu prends, donc prends celle qui te semble la plus familière?

**darkside777** · 15/10/2018, 19h44

Il faut dire que je m'exprime bien mal sur mes attentes.
en plus, je ne suis pas très bon en js et je n'arrive pas bien à me rendre compte si ce que vous m'apportez m'aidera à résoudre mon problème.

je vous invite à regarder ce projet ci dessous avec une description à chaque nouveau label.
https://jsfiddle.net/floflo777/jk7htm30/59/
voila j'espère que vous comprendrez ainsi mieux mes attentes et je tacherai de bien comprendre vos réponses.

**NoSmoking** · 16/10/2018, 19h46

je vous invite à regarder ce projet ci dessous avec une description à chaque nouveau label.
https://jsfiddle.net/floflo777/jk7htm30/59/
voila j'espère que vous comprendrez ainsi mieux mes attentes et je tacherai de bien comprendre vos réponses.

perso pour moi le temps s’obscurcit !

Je ne vois rien dans ton code qui met en application ce qui t'a été proposé !

**darkside777** · 16/10/2018, 21h56

Oui,
c'est normal car j'ai du mal à comprendre les réponses du fait que je sois débutant.
en outre dans ma question, je demande en quelque sorte ou je dois placer vos idées.
Merci

Invité · 16/10/2018, 22h05

Bonjour,

Quand on est débutant, on commence avec des choses SIMPLES.
Sinon, on risque de se décourager.

1- il ne faut pas chercher à adapter "nos idées" à "ton code existant".
On te propose une MEILLEURE approche.

Donc : OUBLIE ton code, et recommence depuis zéro.

2- Dans ce que JE t'ai proposé, il y a 2 choses, qui peuvent être traitées indépendamment.

2.1- Essaie déjà de créer des "catégories" (sans te soucier des "objets"/"produits") dans une premier temps.
2-2- Ensuite, essaie de ré-afficher les catégories créées dans une liste (<ul><li>), puis une liste déroulante (<select>) : seul de code HTML change).

**darkside777** · 22/10/2018, 18h57

Merci beaucoup de votre aide précieuse qui m'a permis de bien avancer dans mon projet !
je m'excuse par ailleurs de ne pas avoir pris le temps de vous remercier plus tôt

Merci !

Invité · 24/10/2018, 09h12

Envoyé par jreaux62

1- Ajouter une catégorie :

un <input> : "nom de la catégorie"
un <select> (liste des catégories déjà enregistrées) : "catégorie parente" (si "pas de parent" => 0)
un <input> : "Ajouter la catégorie"

2.1- Essaie déjà de créer des "catégories" (sans te soucier des "objets"/"produits") dans une premier temps.
2-2- Ensuite, essaie de ré-afficher les catégories créées dans une liste (<ul><li>), puis une liste déroulante (<select>) : seul de code HTML change).

Alors ?

Tu l'as fais ?
Ça donne quoi ?

**darkside777** · 24/10/2018, 15h02

Ah oui pardon !
j'aura du l'envoyer plus tot
j'en étais à la quand je me suis arrêté.
c'est pas génial et je suis pas sur d'avoir tout très bien compris.
soit j'ai raté un truc dans vos instructions
soit c'est bien ça mais ça me semble étrange

https://jsfiddle.net/floflo777/csp9xyvt/37/

Invité · 24/10/2018, 15h12

Quand on ajoute une catégorie, la liste déroulante des catégories ne change pas.
Ça devrait.

**darkside777** · 24/10/2018, 15h38

effectivement...
je veux bien un petit peu d'aide dans ce cas
je n'arrive pas à comprendre comment on pourrait ajouter des valeurs d'input en JavaScript dans un select de HTML
il faudrait pour ca changer la variable js en select...
je ne trouve pas grand chose sur google en plus
Merci

**NoSmoking** · 02/11/2018, 10h59

Comme tous tes liens vers des « JSFiddle » sont morts je présume que ton soucis est résolu.

**darkside777** · 04/11/2018, 15h30

Oui j'ai fini excusez-moi de ne pas avoir clicker sur "résolu"
voila le rendu final bien plus simple que le premier projet que j'avais rendu très compliqué je ne sais pas pourquoi.
j'espère que vous pourrez le voir.
https://jsfiddle.net/floflo777/jLpzkwqm/

Reconnaitre et affecter des inputs

JavaScript

Discussions similaires

Partager

Partager