二维 HTML 表单输入答案

【问题标题】：Two dimensional HTML form inputs二维 HTML 表单输入
【发布时间】：2016-08-04 09:30:29
【问题描述】：

所以基本上我有以下 HTML 表单：

<form>
    <div class="Question">
        <input name="question" type="text"></input>

        <div class="alternatives">
            <input type="text" name="TextAlternative[]"></input>
            <input type="text" name="TextAlternative[]"></input>
        </div>
        <a href="#\" class="newTextAlternative_click">New Alternative</a>
    </div>
    <a href="#\" class="newTextQuestion_click"></a>
</form>

我正在开发一个在线投票应用程序，我想让用户能够定义一系列问题以及每个问题的一系列备选方案。

单击newTextAlternative_click 会生成一个新的替代输入字段。感谢替代输入名称中的方括号表示法 TextAlternative[] 我可以以数组的形式请求问题的所有替代项。

当我生成另一个 Question div 时出现问题。我希望能够以数组的形式请求每个问题的输入，因此我尝试执行以下操作：

<input name="question[]" type="text"></input>

这使我可以为每个定义为数组的问题请求 question。但是我现在在替代品上遇到了麻烦。

我希望能够要求以下替代方案：

Question[i]Alternative[i]

不必像这样硬编码：

<input name="Alternative[0][]"></input>

这样做的原因是我为用户提供了再次删除表单中的一个问题的能力，对于备选方案也是如此。我不想每次都循环 dom 并更改所有数组索引。

提前致谢。

【问题讨论】：

那么你的问题是什么？你可以回答answer[questionIndex][alternativeIndex]。您不需要有连续的索引序列。所以删除并不意味着重新索引整个答案数组。
而不是Alternative[0][]，您最好使用Alternative-0[]，因此在添加新行时，您将通过连接问题索引使名称部分动态化。这样，您将不得不使用单个数组，并且对于每个问题，您将拥有其替代方案的数组。

标签： jquery html css forms dynamic

【解决方案1】：

使用 javascript 解决了这个问题。在提交时，我有一个脚本在当前的替代方案上运行，并将其解析为 JSON 对象，以便在后端轻松处理它。

【讨论】：