使用其他输入动态添加和删除输入

Add and remove inputs dynamicly with a other input

本文关键字：输入 删除 添加 动态 其他      更新时间：2023-09-26

我为此搜索了很多，但只能找到+1-1个解决方案。但我想用其他类似的输入设置输入的数量：

//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">

当用户现在在第一个字段中写入5时，表单应该如下所示：

//Enter the number of inputs (1 is the start-value)
<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
//Display that number of inputs (1 at start)
<input type="text" size="30" maxlength="30" id="input_1" name="input_1">
<input type="text" size="30" maxlength="30" id="input_2" name="input_2">
<input type="text" size="30" maxlength="30" id="input_3" name="input_3">
<input type="text" size="30" maxlength="30" id="input_4" name="input_4">
<input type="text" size="30" maxlength="30" id="input_5" name="input_5">

我该怎么做？我必须使用js吗？

这里有一个不使用任何框架的简单javascript片段：

function addInputs() {
    var count = parseInt(document.getElementById("count").value);
    for (var i = 2; i <= count; i++) {
        document.getElementById('moreinputs').innerHTML += '<input type="text" name="input_' + i + '" id="input_' + i + '" />';
    }
}

在本例中，您必须添加一个id为"moreinputs"的容器（div）。然而，当多次调用此函数时，它将无法正常工作（例如，它只能增加输入数量而不能减少）

是的，要么使用javascript，要么将表单发送到服务器，在那里生成一个包含所有输入的新html页面（例如使用PHP）。

是的，您必须使用js在现场动态执行。您有一个jQuery标记，所以我将在jQuery 中显示一个示例

这不是最好的例子，但它有效，是的起点

JS:

$(function(){
    $('#master').on('change', function() {
        var count = $(this).val();
        $('#otherInputs').html('')
        for( var i = 0; i < count; i++) {
           $('#otherInputs').append(
               $('<input>', {type: 'text'})
           );
        }
    });
});

HTML:

<input type="number" id="master" value="1">
<div id="otherInputs"></div>

Demo

在英语中，这是在说。。。

当您change #master时，我将清空#master（html('')）循环，并根据#master的值

附加一个新的输入

这是FIDDLE。希望能有所帮助。：）

html

<input type="text" size="3" maxlength="3" id="count" name="count" value="1">
<div id="container"></div>

脚本

$('#count').on('keyup', function () {
    var $this = $(this);
    var count = $this.val();
    $('#container').empty();
    for (var x = 1; x <= count; x++) {
        var newInput = '<input type="text" size="30" maxlength="30" id="input_' + x + '" name="input_' + x + '">';
        $('#container').append(newInput);
    }
});

这对我有效

       function AddField() {
        var count = $("#countetfield").val();
        var i = 1;
        var id = $("#container .testClass:last").attr('name');
        var test = id.split("_");
        id_name = test[1];
        while (i <= count) {
            id_name++;
            var a = '<input type="text" class="testClass" size="30" maxlength="30" id="input_' + id_name + '" name="input_' + id_name + '"/>';
            $("#container").append(a);
            i++;
        }
    }
<input type="text" id="countetfield" value="1" />
        <input type="button" value="Go" onclick="AddField();" />
        <div id="container">
            <input type="text" class="testClass" size="30" maxlength="30" id="input_1" name="input_1" />
        </div>
相关文章：