Javascript 使用输入类型number和onchange事件的动态表单

我有图片上的表格，我希望“numero de cuartos”字段添加相同数量的“成人数字”和“Nino de niños”输入，此外，“numero de niños”输入需要添加相同数量的“edad de niños”输入

我是这样的：

卡托斯数字
成人身份号码
尼诺数字
厄迪尼奥斯

好的，此脚本中存在一些问题

第一：A是独一无二的

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

您可以对要复制/克隆的元素使用类。为了选择这些元素，JQuery有以下优点

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

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

如果将append元素复制到中，则必须保存对这些元素的引用，以便以后可以使用它们。这可以通过将它们放入一个：

或者使用生成的ID和。。。你的选择

---

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

您要做的是模拟模板的工作方式，但仅仅使用文档中已有的DOM元素的HTML不是一个好主意（也许您可以使用replace来更改HTML，但这将是一个非常糟糕的解决方案），我建议您看看jQuery模板是如何工作的，同时这段代码将实现您想要实现的目标：

（您还需要将引用添加到jQuery模板插件中）

卡托斯数字


成人身份号码
数字�操作系统

伊达德尼酒店�操作系统

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();
            }
        }
    }

function insertarcompos（）{
var personasSingle=$（'#cuartos'）.val（）；
var currentRooms=$（'#contenidoPersonas.room'）。长度；
如果（personasSingle>currentRooms）{
对于（var i=currentRooms；ipersonasSingle；i--）{
$（“[room number=“”+（i-1）+“”]）。删除（）；
}
}
}
功能插件Adesninos（房间号）{
var numnios=$（'.room[room number=“'+roomNumber+'].nino'）.val（）；
var currentNinos=$（'.room[room number=“'+roomNumber+'].edadNino'）。长度；
如果（numinos>currentNinos）{
对于（i=currentNinos；inuminos；i--）{
$（“[room number=“”+roomNumber+”][nino number=“”+（i-1）+“”]）。删除（）；
}
}
}

---

另外，这个方法有点过时，你也可以看到一些MVC框架，它不是很复杂

嘿，你能至少让人们知道提议的解决方案是否有效吗？？如果是这样，请将其标记为您问题的答案？@Carorus我一直在忙着测试解决方案，明天，对不起，请耐心等待，我只在一周内工作。如果我想将字段发送到一个PHP文件，我将在其中将值放入一个数组，每个附加值的数组？您可以通过所有添加的控件，获取键入的值并使用它们创建一个数组

var data=[]$（'.room'）.each（function（idx，obj）{var room={}；room.adultos=$（obj）.find（'.adulto'）.val（）；room.ninos=$（obj）.find（'.nino'）.val（）；room.ninosEdad=[]；$（obj）.find（'.ninos'）.each（function（idxn，objn）{room.ninosEdad.push（$（objn）.find（'.edadNino'）.val（）；}）；data.push（room）；}）；

<!--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>

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();
            }
        }
    }