Как создать форму в которую добавлялось бы определенное количество полей в зависимости от значения другого поля?

Question

[Алексей]

Здраствуйте, у меня есть форма с числовым полем "комнаты". В зависимости от значения этого поля я хочу чтобы добавлялось такое же количество новых полей "Количество взрослых" и "Количество детей". Приложение для формы я пишу на Django. HTML код формы выглядит вот так:

<div class="fieldWrapper">
<label for="id_rooms">Rooms:</label>
<input id="id_rooms" type="number" name="rooms" min="1">
</div>

<div class="extrafieldWrapper">    
</div>

Поискав в Интернете подобные задачи я написал что-то свое:

$(function() {

var newFields = $('');
$('#id_rooms').bind('blur keyup change', function() {
    var n = this.value || 0;
    if (n + 1) {
        if (n > newFields.length) {
            addFields(n);
        } else {
            removeFields(n);
        }
    }
});

function addFields(n) {
    for (form_num = newFields.length; form_num < n; form_num++) { // lenght->length
        $("input[id='id_form-TOTAL_FORMS']").attr('value', form_num + 1);
        $(".extrafieldWrapper").append("<br/><label for='id_form-" + form_num + "-adult'>Adult:</label> <input id='id_form-" + form_num + "-adult' type='number' name='form-" + form_num + "-adult'/> <label for='id_form-" + form_num + "-children'>Children:</label> <input id='id_form-" + form_num + "-children' type='number'  name='form-" + form_num + "-children'/> ");
    }
}

function removeFields(n) {
    var removeField = newFields.slice(n).remove();
    newFields = newFields.not(removeField);
}
} );

Но это что-то корректно не работает: если я изначально ставлю значение 2, то у меня появляются правильно - 2 новые пары полей, но если я поменяю значение с 2 на 3, то у меня добавится не плюс одна пара полей а плюс 3, или если я поменяю значение с 2 на 1, то у меня не удалится одна пара полей а добавится одна. Помогите мне пожалуйста, так как я не очень силен в jquery. Заранее благодарен

Comments

[Алексей]

Сергей Сергеев: хочется сделать как получше, а получается как всегда)

Answer 1

[Алексей]

Порешал!

$(function () {
  $('#id_rooms').bind('blur keyup change', function () {
    var n = $('#id_rooms').val() || 0;
    $("input#id_form-TOTAL_FORMS]").attr('value', n);
    $(".extrafieldWrapper").empty();
    for (var i = 0; i < n; i++) {
      $(".extrafieldWrapper").append("<br/><label for='id_form-" + i + "-adult'>Adult:</label> <input id='id_form-" + i + "-adult' type='number' name='form-" + i + "-adult'/> <label for='id_form-" + i + "-children'>Children:</label> <input id='id_form-" + i + "-children' type='number'  name='form-" + i + "-children'/>");
    }
  });
});