JS - Conseils sur la façon de fusionner plusieurs entrées d'utilisateur à une conception de champ de formulaire

Question

J'ai une page qui permet aux utilisateurs d'entrer beaucoup d'informations à leur sujet (métadonnées), ils peuvent ensuite cliquer sur une icône qui ouvre une fenêtre modale contenant un googlemap qui leur permet d'ajouter des emplacements et un titre pour cet emplacement. A l'aide de mootools, je peux renvoyer la valeur d'un champ de formulaire au formulaire d'origine, en utilisant onclose. Le formulaire de page principal a alors un seul champ de saisie caché, qui va dans la base de données comme un champ, sérialisé.

Le problème est qu'un utilisateur peut ajouter autant d'emplacements qu'il le souhaite, il existe également 3 types d'emplacement. Chacun avec son propre ensemble de coordonnées, qui peut être unique ou multiple! Donc, je veux savoir la meilleure façon de gérer toutes ces données, est-il possible de le charger dans un formulaire et ensuite utiliser Moo pour soumettre ce formulaire à un seul champ de formulaire, ou puis-je utiliser moo pour simplement ajouter toutes les informations dans un seul champ de saisie masqué, mais si je fais cela, comment les entrées de l'utilisateur entrent-elles dedans. Je suis perplexe et regarde quelques suggestions sur la façon de mettre en place le «meilleur» possible. J'ai actuellement une table, et chaque élément est ajouté comme une nouvelle ligne, par JS lorsqu'un utilisateur clique sur la carte, il crée une nouvelle ligne avec les détails sur le clic, l'élément, puis un champ de saisie utilisateur.

S'il s'agit d'un emplacement unique, il est ajouté comme «repère», un champ de saisie utilisateur pour le nom, puis les coordonnées vont dans une troisième cellule de tableau. Cependant, si c'est une forme, alors la première cellule contient 'forme', le champ de saisie utilisateur pour nom/description, et la troisième cellule contient une liste de coordonnées pour chaque point, c'est la même chose pour les lignes. Le problème que j'ai, c'est que je pourrais tout écrire dans un seul champ de formulaire, mais alors comment puis-je permettre la saisie de l'utilisateur des titres, je dois utiliser un champ de formulaire pour cela? L'autre option consiste à prendre chaque ligne d'une table et l'entrer dans le champ de formulaire unique, séparé par un tuyau ou similaire, mais je ne sais pas si je peux lire d'autres champs de formulaire. J'espère que ce qui précède a un sens !! Tous les commentaires sont les bienvenus! Im utilisant mootools pour cela, mais à condition que je puisse avoir la tête autour de la mise en page alors cela ne devrait pas vraiment être un problème.

Answer 1

Je vous suggère d'utiliser un objet pour conserver toutes les données de localisation pendant que l'utilisateur effectue ses sélections. Lorsque, lors de la soumission du formulaire, les données sont sérialisées dans un champ masqué en tant qu'objet JSON. Ainsi, lorsque l'utilisateur clique dans la fenêtre de carte, vous enregistrez les informations dans l'objet, en plus de la table. L'objet peuplé ressemblerait à ceci:

var usersLocations = {"locations": [ 
     {"type": "point", "coords": [100,200]}, 
     {"type": "line", "coords": [[200,300],[400,500]]}, 
     {"type": "shape", "coords": [[200,300],[400,500],[1000,1500]]} 
    ] 
}; 

Mootools peut avoir des méthodes JSON, mais sinon, regardez http://www.json.org/js.html pour le code de travail. Vous pouvez utiliser JSON.stringify() pour convertir l'objet en une chaîne simple qui convient à l'enregistrement dans la base de données, et lorsque vous récupérez cette chaîne, vous pouvez utiliser JSON.parse() pour le transformer en objet. Pour gérer la saisie utilisateur, vous pouvez écrire la table sur la page comme vous le faites maintenant (ou basez-la sur l'objet ci-dessus). Ensuite, lorsque l'utilisateur entre quelque chose dans l'un des champs, copiez la valeur dans l'objet usersLocations.Donc, avoir un gestionnaire d'événements onBlur sur le champ d'entrée qui met à jour la structure de données (quelque chose comme ça):

 usersLocations.locations[0]["type"] = "<what the user typed>"; 

Answer 2

recherchez-vous quelque chose comme ça?

usersLocations.locations[0]["name"] = document.getElementById("location0name").value;