多级 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 表单？如果我网站的访问者想要添加额外的体验或教育块，我需要一些 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]

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

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>

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

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

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

多级 HTML 表单

Multilevel HTML Form

html

javascript

jquery

playframework