多级 HTML 表单答案

【问题标题】：Multilevel HTML Form多级 HTML 表单
【发布时间】：2015-04-10 13:33:26
【问题描述】：

想象一下，我有一个像这样的底层模型布局（使用 Play Framework，不相关）：

case class Resume(
                 id: Option[String],
                 surname: String,
                 firstName: String,
                 experience: List[Experience],
                 education: List[Education]
                   )

case class Experience(
                     employer: String,
                     responsibilities: String,
                     position: String,
                     projectDetails: String,
                     projectValue: String
                       )

case class Education(
                    study: String,
                    institution: String
                      )

简历模型是用户需要填写的模型。我将如何为其设计 HTML 表单？如果我的网站的访问者想要添加额外的体验或教育块，我需要一些 JS 来按需添加新的体验和教育块。我想知道，我怎样才能最好地将它放入 HTML 中？是使用 html 表单名称数组更好，还是应该将所有内容分组到 DIV 中，然后使用 Javascript 构建一个 JSON 对象并将其提交给服务器？

我会这样做（使用 HTML 名称数组）：

experience[0][employer]
experience[0][responsibilities]
experience[0][position]
experience[0][projectDetails]
experience[0][projectDetails]

...然后当用户按下标签或其他东西时，添加：

experience[1][employer]
experience[1][responsibilities]
experience[1][position]
experience[1][projectDetails]
experience[1][projectDetails]

或者有没有更好的方法来解决这个问题？

【问题讨论】：

任何一种方式都行

标签： javascript jquery html playframework

【解决方案1】：

您可以使用 jQuery 方法 .append(htmlString) 向现有元素添加更多项目。

因此，如果您有一个表单（其中已经包含项目），那么您可以有一个按钮，按下该按钮将计算已添加的项目数（使用.size()），然后附加更多输入。

$('#addNew').click(function() {
  var html = '<div class="experience"><input type="text" id="employer{0}" name="employer" value="emplyer {0}"/></div>';

  var numberAdded = $('.experience').size();

  $('#myForm').append(html.replace(/\{0\}/g, numberAdded));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">

  <button id="addNew">Add Experience</button>

</form>

这可以使用您需要的所有输入进行扩展。

此外，您不需要绑定到按钮单击，请查看.keypress()，了解如何将代码绑定到用户按下按钮时。

【讨论】：

厉害，还没想过用大小来确定数量:)

【解决方案2】：

$('#addNew').click(function() {
  var html = '<div class="experience"><input type="text" id="employer{0}" name="employer" value="emplyer {0}"/></div>';

  var numberAdded = $('.experience').size();

  $('#myForm').append(html.replace(/\{0\}/g, numberAdded));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm">

  <button id="addNew">Add Experience</button>

</form>

【讨论】：