Добавить возраст ребенка при выборе ребенка

Question

Очень новый для программирования. Построение формы, в которой задаются основные вопросы, такие как «Возраст», «Женат» или нет, сколько детей. Когда пользователь выбирает 1 или 2 или 3 детей из клавиш со стрелками, я хочу показать поля, в которых пользователь может ввести возраст и имя ребенка. Это нужно сделать до кнопки отправки. Примером является домашняя страница hotels.com, где предоставляется возможность бронирования номера, если у вас есть дети, и когда вы выбираете возраст для всех детей, которых вы выбрали. Javascript будет лучше, но готов сделать это в любом случае. Пожалуйста, помогите.

Answer 1

Вам необходимо иметь событие изменения (но лучше нацелиться как на событие keyup, так и на изменение) на текстовое поле для детей и сделать базу циклов на число дочерних элементов, введенных в эти поля. Внутри цикла, создать элемент и, наконец, добавить элементы в результате пример ниже:

Пусть это ваш HTML

<div> 
    Child : 
    <input type="number" min="0" max="5" id="kids" name="kids"/> 
</div> 
<!-- display output inside this element --> 
<div id="output"></div> 

И это ваш JS

$('#kids').on('change keyup', function() {  
    // get value of child(number) 
    var val = $(this).val(); 
    // checking if entered more than 5 or any number(its depend) 
    if (val > 5) { 
    alert('opps no more than 5'); 
    return; 
    } 
    // every time child number's updated 
    // clear the container 
    $('#output').empty(); 
    var output; 
    for (var i = 0, length = val; i < length; i++) { 
    output = 'Name :<input type="text" name="name"/><br/>Age : <input type="text" name="age"/><hr/>'; 
    // append the element 
    $('#output').append(output); 
    } 
}); 

Этот это просто пример, надеюсь, что вы его получите.

DEMO