Question

我在图片上有表格，我希望“numero de cuartos”字段附加“numero de personas adultas”和“numerodeniños”的相同数量的输入，此外，“numerodeniños”输入需要附加相同数量的“edaddeniños”输入。

我喜欢这样：

<!--INPUT TYPE NUMBER OF Numero de cuartos-->
<div class="col-md-6 col-sm-6">
  <div class="form-group">
  <label>Numero de cuartos</label>
  <input required type="number" id="cuartos" name="cuartos" onchange="insertarCampos();" class="form-control" min="0"/>
 </div>
</div>

<!--Place to append-->
<div id="contenidoPersonas"> 
</div>

<!-- This form is appended depending on the number of "numero de cuartos" input -->
<div id="rooms" style="display:none;">
                                <div class="row">
                                    <div class="col-md-4 col-sm-4">
                                        <div class="form-group">
                                            <label>Numero de personas adultas</label>
                                            <input required type="number" id="adulto" name="adulto[]" class="form-control" min="1" max="6"/>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-4">
                                        <div class="form-group">
                                            <label>Numero de niños</label>
                                            <input required type="number" id="nino" name="nino[]" class="form-control" min="0" max="6" onchange="insertarEdadesNinos();"/>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-4">
                                      <!-- Inside edadNinos div goes the div with id "ninos"--> 
                                        <div id="edadNinos">
                                        </div>
                                    </div>
                                </div>
                            </div>
                                
 <!-- This form is appended on the "edadNinos" div depending on the number of "numero de niños" input -->
                                <div id="ninos" style="display:none;">
                                    <div class="form-group">
                                        <label>Edad de niños</label>
                                    <input required type="number" id="edadNino" name="edadNino[]" class="form-control" min="0" max="12"/>
                                    </div>
                                </div>

THE JAVASCRIPT：

function insertarCampos(){
            var personasSingle = $('#cuartos').val();

            for(i = 0;i < personasSingle;i++){
                $('#contenidoPersonas').append($('#rooms').html());
                $('#contenidoPersonas').append("<hr>");
            }
        }

        function insertarEdadesNinos(){
            var numNinos = $('#nino').val();
            $('#edadNinos').empty();
            for(i = 0;i < numNinos;i++){
                $('#edadNinos').append($('#ninos').html());
            }
        }

这样可以正确地附加内容，如图中所示，但存在一些问题：

如果我改变主意而不是“2”，我放1，输入被删除并再次附加，因为空功能，我不知道如何纠正。
< / LI>
另一件事是“numerodeniños”输入仅适用于第一个，第二个“numerodeniños”输入没有做任何事情，因为它与第一个具有相同的id，I不知道如何纠正。

我还需要将那些分开的输入发送到PHP脚本，在带有标记的图片的形式上用视觉标记分隔

<hr>

谢谢！

Answer 1

好的，这个脚本存在一些问题。

首先：ID是唯一的！

id全局属性定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。

您可以为要复制/克隆的元素使用类。要选择这些元素，JQuery有这些精彩的Class Selectors。

或者您可以更改这些元素的ID：

$('#rooms').clone().attr('id', 'rooms' + myIndex)

如果将附加元素复制到DOM，则必须保存对这些元素的引用，以便稍后{@ 3}}。这可以通过将它们放入remove：

来完成

var rooms = new Array();
....
for(....) {
    var ref = $('#rooms').clone().attr('id', 'rooms' + myIndex);
    rooms.push(ref);
}

或者您使用生成的ID和array ...您的选择。

要在其中一个克隆树中选择“Numerodeniños”输入字段，您可以使用JQuery ID-Selector。在参考文献中，您可以注册Child Selector。在那里，您可以注册一个函数，每次更改输入字段时都会调用该函数。

Answer 2

您要做的是模拟模板的工作方式，但不是一个好主意，只需使用文档中已有的DOM元素的HTML（也许您可以使用替换来更改HTML，但这可能是一个非常讨厌的解决方案），我建议你看看jQuery模板如何工作change event handler，同时这段代码将完成你想要实现的目标：

（您还需要添加jQuery模板插件的引用）http://jsfiddle.net/zarjay/ZAkM7/）

<!--INPUT TYPE NUMBER OF Numero de cuartos-->
<div class="col-md-6 col-sm-6">
    <div class="form-group">
        <label>
            Numero de cuartos
        </label>
        <input required type="number" id="cuartos" name="cuartos" onchange="insertarCampos();" class="form-control" min="0" />
    </div>
</div>
<br />
<!--Place to append-->
<div id="contenidoPersonas">
</div>
<!-- This form is appended depending on the number of "numero de cuartos" input -->
<script id="roomsTemplate" type="x/jquery-tmpl">
    <div class="room" room-number="${roomNumber}">
        <div class="row">
            <div class="col-md-4 col-sm-4">
                <div class="form-group">
                    <label>
                        Numero de personas adultas
                    </label>
                    <input required type="number" id="adulto" name="adulto[]" class="form-control" min="1" max="6" />
                </div>
            </div>
            <div class="col-md-4 col-sm-4">
                <div class="form-group">
                    <label>
                        Numero de ni�os
                    </label>
                    <input required type="number" name="nino[]" class="nino form-control" min="0" max="6" onchange="insertarEdadesNinos(${roomNumber});" />
                </div>
            </div>
            <div class="col-md-4 col-sm-4">
                <!-- Inside edadNinos div goes the div with id "ninos"-->
                <div class="edadNinos">
                </div>
            </div>
        </div>
    </div>
    <hr room-number="${roomNumber}" />
</script>
<!-- This form is appended on the "edadNinos" div depending on the number of "numero de ni�os" input -->
<script id="ninosTemplate" type="x/jquery-tmpl">
    <div class="ninos" nino-number="${ninoNumber}">
        <div class="form-group">
            <label>
                Edad de ni�os
            </label>
            <input required type="number" class="edadNino" name="edadNino[]" class="form-control" min="0" max="12" />
        </div>
    </div>
</script>

javascript：

function insertarCampos() {
        var personasSingle = $('#cuartos').val();
        var currentRooms = $('#contenidoPersonas .room').length;

        if(personasSingle > currentRooms) {
            for (var i = currentRooms; i < personasSingle; i++) {
                $('#roomsTemplate').tmpl({ roomNumber: i }).appendTo('#contenidoPersonas');
            }
        }
        else {
            for (var i = currentRooms; i > personasSingle; i--) {
                $('[room-number="'+(i - 1)+'"]').remove();
            }
        }
    }

    function insertarEdadesNinos(roomNumber) {
        var numNinos = $('.room[room-number="'+roomNumber+'"] .nino').val();
        var currentNinos = $('.room[room-number="'+roomNumber+'"] .edadNino').length;

        if(numNinos > currentNinos) {
            for (i = currentNinos; i < numNinos; i++) {
                $('#ninosTemplate').tmpl({ ninoNumber: i }).appendTo('.room[room-number="'+roomNumber+'"] .edadNinos');
            }
        }
        else {
            for (var i = currentNinos; i > numNinos; i--) {
                $('[room-number="'+ roomNumber +'"] [nino-number="'+(i - 1)+'"]').remove();
            }
        }
    }

这个方法也有点过时，你也可以看一些像http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js这样的MVC框架并不是很复杂。

使用输入类型编号和onchange事件的动态表单

2 个答案: