Многоуровневая HTML Form

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(), как связать код с тем, когда пользователь нажимает кнопку.