Question

我有一个页面，允许用户输入大量有关它们的信息（元数据），然后他们可以点击一个图标，打开一个包含googlemap的模态窗口，允许他们添加位置和该位置的标题。

使用mootools我可以使用onclose将表单字段的值传递回原始表单。然后，主页面表单有一个隐藏的输入字段，它作为一个字段进入数据库，序列化。

问题是用户可以根据需要添加多个位置，还有3种类型的位置。每个都有自己的坐标集，可以是单个或多个！

所以我想知道处理所有这些数据的最佳方法，是否可以将其加载到一个表单然后使用Moo将该表单提交到单个表单字段，或者我可以使用moo来附加所有数据将信息转换为单个隐藏的输入字段，但如果我这样做，用户输入如何进入它。我很难过，看看有关如何以“最佳”方式进行设置的一些建议。

目前我有一个表，每个项目都被添加为新行，当用户点击地图时，它会创建一个新行，其中包含有关click，item和用户输入字段的详细信息。 / p>

如果它的单个位置然后将其添加为“地标”，则该名称的用户输入字段然后坐标进入第3个表格单元格。但是，如果它是一个形状，那么第一个单元格包含'形状'，用户输入字段用于名称/描述，第三个单元格包含一个坐标列表，每个点一个，这对于行是相同的。

我遇到的问题是我可以将它全部写入单个表单字段，但是如何允许用户输入标题，我需要使用表单字段？另一个选项是从表中获取每一行并将其输入到单个表单字段中，由管道或类似字段分隔，但后来我不确定是否可以从其他表单字段中读取。

我希望以上内容有所帮助!!欢迎所有反馈！

我正在使用mootools，但是如果我可以绕过布局，那么这不应该是一个问题。

Answer 1

我建议您在用户进行选择时使用对象来维护所有位置数据。在提交表单时，将该数据序列化为隐藏字段作为JSON对象。

因此，当用户在地图窗口中单击时，除了表格之外，还会在对象中记录信息。填充的对象如下所示：

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可能有一些JSON方法，但如果没有，请查看http://www.json.org/js.html的工作代码。您可以使用JSON.stringify（）将对象转换为适合保存在DB中的纯字符串，当您将该字符串取回时，可以使用JSON.parse（）将其再次转换为对象。

至于处理用户输入，您可以像现在一样将表写入页面（或者基于上面的对象）。然后，当用户在其中一个字段中输入内容时，将值复制到usersLocations对象中。因此在输入字段上有一个onBlur事件处理程序，用于更新数据结构（如下所示）：

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

Answer 2

你正在寻找这样的东西吗？

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

JS - 关于如何将多个用户输入合并到一个表单字段设计的建议

2 个答案: