Показать другие поля формы на основе некоторых выборов

Question

Пожалуйста, кто-нибудь может помочь с этим?Так же, как booking.com , я хочу отображать div в зависимости от ввода пользователя.Если пользователь выбирает 1 ребенка, я хотел бы отобразить форму для , пол и возраст отображают , в противном случае, если число увеличивается до 2, я хочу, чтобы было двумя делителями.

Вот мой код:

<div class="modal-body">
                                    <div class="">
                                        <div class="row" id="form-messages">
                                            <div class="col-sm-12">
                                                <form id="reused_form">
                                                    <div class="form-group">
                                                        <input type="text" name="name" required class="form-control" placeholder="Enter Name">
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="email" name="email" required class="form-control" placeholder="Enter Email">
                                                    </div>
                                                    <div class="form-group">
                                                        <input type="tel" name="phone number" required class="form-control" placeholder="Enter Phone Number">
                                                    </div>
                                                    <div class="form-group" id="numberOfChildren">
                                                            <select class="form-control" name="childrenage">
                                                                    <option>Number of Children</option>
                                                                    <option value="option1">1</option>
                                                                    <option value="option1">2</option>
                                                                </select>
                                                        </div>
                                                    <div class="form-row" id="childrenData" style="display:none;">
                                                        <div class="form-group" style="width:47%;margin-right:3px">
                                                            <select class="form-control" name="childrenage">
                                                                <option>Sex</option>
                                                                <option>Male</option>
                                                                <option>Female</option>
                                                            </select>
                                                        </div>
                                                        <div class="form-group" style="width:47%; ">
                                                            <select class="form-control" name="childrenage">
                                                                <option>Children Age</option>
                                                                <option>1 Month</option>
                                                                <option>2 Month</option>
                                                                <option>3 Month</option>
                                                                <option>4 Month</option>
                                                                <option>5 Month</option>
                                                                <option>6 Month</option>
                                                                <option>7 Month</option>
                                                                <option>8 Month</option>
                                                                <option>9 Month</option>
                                                                <option>10 Month</option>
                                                                <option>11 Month</option>
                                                                <option>1 Year</option>
                                                                <option>2 Years</option>
                                                                <option>3 Years</option>
                                                                <option>4 Years</option>
                                                                <option>5 Years</option>
                                                                <option>6 Years</option>
                                                                <option>7 Years</option>
                                                                <option>8 Years</option>
                                                                <option>9 Years</option>
                                                                <option>10 Years</option>
                                                                <option>11 Years</option>
                                                                <option>12 Years</option>
                                                                <option>13 Years</option>
                                                                <option>14 Years</option>
                                                                <option>15 Years</option>
                                                                <option>16 Years</option>
                                                            </select>
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <button class="btn btn-raised btn-warning" type="submit" style="width:50%">View Lookbook</button>
                                                        <button type="button" class="btn btn-secondary float-right" data-dismiss="modal">Close</button>
                                                    </div>
                                                </form>
                                                <div id="error_message" style="width:100%; height:100%; display:none; ">
                                                    <h4>Error</h4>Sorry there was an error sending your form. 
                                                </div>
                                                <div id="success_message" style="width:100%; height:100%; display:none; ">
                                                    <h5>Your Message was Sent Successfully. <span><a href="./lookbook/" style="text-decoration: none; margin-left: 10px;" class="blink_me">Click here to view</a></span></h5>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

... и вот сопровождающий Javascript:

$(document).ready(function (){
            $("#numberOfChildren").change(function() {
                // foo is the id of the other select box 
                if ($(this).val() != "option1") {
                    $("#childrenData").show();
                }else{
                    $("#childrenData").hide();
                } 
            });
        });

Пожалуйста, мне нужна твоя помощь.Я использую HTML, JS и PHP.В настоящее время код работает только с одним выбором, и я хочу, чтобы он работал с 7 детьми.

Answer 1

Маловероятно, что booking.com делает это таким образом и с вашим техническим стеком, но с помощью имеющихся у вас инструментов вы можете написать функцию для управления DOM на основе значения этого ввода.Вот основная идея / псевдо-код, где вы собираетесь прочитать входное значение (может потребоваться parseInt) и запустить цикл многократно, который добавляет html вашей формы в div родительского / контейнерного типа.

        $("#numberOfChildren").change(function() {
            for (var i = 0; i < $(this).val(); i++) {
                $("#myNewContainerDivForTheseForms").append("<div><someForm></div>")
            }
        });

Это всего лишь один из способов решения вашей проблемы, но впоследствии вы столкнетесь с большим количеством проблем, например, как вы будете управлять формами, их данными, скрывать / показывать каждую из них и т. Д. JQuery не является правильным инструментомдля этой работы, имхо, но я надеюсь, что это куда-то тебя приведет.