javascript - 根据用户指定的数字动态添加 HTML 表单字段

标签 javascript html forms

<分区>

我有一个名为 Number of messages 的表单字段,根据用户指定的数量,我希望在下面动态生成准确数量的文本字段,以允许用户输入指定数量的消息。

我已经浏览了一些使用 JQuery 生成动态表单字段的示例,但是由于我不熟悉 JQuery,所以这些示例对我来说有点太复杂而无法掌握。我确实了解 JavaScript 的基础知识,如果我能找到使用 JavaScript 的查询解决方案,我将不胜感激。

最佳答案

function addinputFields(){
    var number = document.getElementById("member").value;

    for (i=0;i<number;i++){

        var input = document.createElement("input");
        input.type = "text";
        container.appendChild(input);
        container.appendChild(document.createElement("br"));
    }
}

和html代码将是

    Number of members:<input type="text" id="member" name="member" value=""><br />
<button id="btn" onclick="addinputFields()">Button</button>
    <div id="container"/>


fiddle这里

关于javascript - 根据用户指定的数字动态添加 HTML 表单字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31988183/

相关文章:

php - div的div 'infront'?

python - 当路由上有多个表单时,如何对表单提交进行单元测试?

php - Laravel 验证失败时停止表单刷新

javascript - jQuery 将数据发布到下一页

javascript - jQuery触发anchor的onclick事件而不发送浏览器到href

javascript - 通过jquery、javascript在列表中上下更改位置

javascript - 重定向到远程表单,填写并提交

html - 用于在每个列表项之前显示带有复选框的缩进排序列表的 CSS

javascript - 如何在javascript中获取Kartik radioList的检查值

javascript 重复循环有问题