JQuery: дублирование количества X делений на основе пользовательского ввода

Question

Я создаю динамическую форму заявления о приеме на работу. Я хочу, чтобы поле запрашивало количество предыдущих работодателей, когда они вводят число, скажем, 3, оно будет дублировать div с этими полями 3 раза, впоследствии обновляя каждое поле имени и значения числом в конце, например: field1, field2, field3.

Поля, которые мне нужны: Имя работодателя, должность, руководитель, адрес, штат, почтовый индекс, телефон

Это имеет смысл? Как мне это сделать? У меня нет кода ожидают ввода HTML-поля.

Answer 1

Я бы сделал это с помощью цикла for и функции append () jquery.

$("#employee_fields_generate").click(function ()
{
     $("#employee_fields").html("");
    var number_employees = $("input[name='number_employees']").val();

    for (i=0; i<=number_employees; i++)
    {
        $("#employee_fields").append('<div id="employee'+i+'"> //your field inputs go here </div>');
    }
});


<form id="employees_form">
    <label for="number_employees">Number of Employees:</label><input type="text" name="number_employees" />
    <button id="employee_fields_generate">Generate Fields!</button>
    <div id="employee_fields">
    </div>
</form>

Answer 2

У вас может быть что-то вроде этого, если вы хотите позволить им корректировать число, не теряя свои первые записи.

$('input[name=prior_employers]').keyup(function(){
     var how_many = parseInt($(this).val());
     if(how_many < 1 || isNaN(how_many)) { $('.employer-group').remove(); return; }
     $('.employer-group:gt('+how_many+')').remove();
     var employers = $('.employer-group');
     if (employers.length < how_many) {
       var container = $('#employer-container');
       for(i=employers.length; i<=how_many; i++) {
           container.append('<div class="employer-group"><input type="text" name="employer['+i+'][name]"/></div>');
       }
     }
});