1

我为此搜索了很多，但我只能找到+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吗？

4

5 回答 5

1

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

于 2013-07-18T10:14:59.350 回答
1

是的，您必须使用 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>

演示

在英语中这是说...

当你change #master清空#master( html('')) 循环并根据#master' 值附加一个新输入

于 2013-07-18T10:22:43.597 回答
1

这是一个不使用任何框架的简单 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)。但是，多次调用该函数时，将无法正常工作（如只能增加输入数不能减少）

于 2013-07-18T10:34:43.160 回答
0

这是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);
    }
});
于 2013-07-18T10:25:11.747 回答
0

这对我有用

       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>
于 2013-07-18T10:36:09.213 回答