javascript - 多级 HTML 表单

Question

想象一下，我有一个像这样的底层模型布局(使用 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 表单？如果我的网站的访问者想要添加额外的经验或教育 block ，我需要一些 JS 来按需添加新的经验和教育 block 。我想知道如何最好地将其放入 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]

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

Answer 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>

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

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