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]

...然后当用户按Tab键或其他内容时，添加：

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表单

2 个答案: