如何使用 JavaScript/jQuery 在 div 中动态添加多个输入字段？

Question

我需要使用 JavaScript/jQuery 在onkeypress事件上动态创建一些多个输入字段。

我有一个文本框，当用户在该文本区域输入任意键时，两个输入字段和第二个文本框正在打开。 当用户再次在第二个文本框中输入任意键时，另外两个输入字段和第三个文本框将打开，依此类推。 还有一个十字按钮正在创建以关闭每个单独的文本框集。 在我当前的代码中，我将所有字段设置为静态，因为用户可能会创建许多输入字段，以便我想使用不同的name and id动态创建它们。

我的代码在这个 Plunkr 中。

Answer 1

编辑：误解的问题，在下面回答

如果您有一个特定的字段可以在其中创建输入字段，则可以轻松完成此操作。 例如，我将输入字段加载到document.body

每次您调用newinput()时， input0在parent创建一个输入字段，其id从input0开始并input0递增

 var id = 0; var newinput = function() { var parent = document.body var field = document.createElement("input") field.className = "myclassname" field.style = "display:block;" field.id = "input" + id; parent.appendChild(field); id += 1; }

 <body> <div>Click plus to add input</div> <button type="button" name="button" onclick="newinput()">+</button> </body>

在你的情况下，看起来你想添加一个组，你可以这样做：

var fieldgroup = document.querySelector(".questionshowp .form-group").cloneNode(true); // (1)

var addinput = function(){
    var parent = this.parentNode.parentNode.parentNode; // (2)
    var n = parent.querySelectorAll(".form-control").length 
    var f = fieldgroup.cloneNode(true);
    f.children[0].id = "question"+n // (3)
    f.querySelector(".secondsec").querySelector("button.btn-success").onclick = addinput // (4)
    parent.insertBefore(f,parent.querySelector(".clear")); // (5)
}

创建要用作模板的field-group的副本
获取输入字段的容器
根据父表单组的总数设置输入字段id
确保模板将addinput()应用于按钮
在父表单末尾插入输入表单

将此功能应用于所有+按钮的最简单方法是使用 JQuery

$("button.btn-sm.btn-success").on("click", addinput)

这需要位于 html 文件的底部，在addinput()定义下方

编辑：真正的答案

原来我写了所有这些，才意识到我误解了你的问题。 我们仍然可以使用相同的原则来做我相信你在问的事情

master = document.querySelector(".aquestionpart"); // (1)
form = document.querySelector(".questionparts"); // (2)

function show(){
    var f = form.cloneNode(true);
    var n = master.querySelectorAll(".questionparts").length;
    f.id = "questionparts"+(n+1); // (3)
    f.querySelector("#questions").onkeypress = show; // (4)
    this.parentElement.parentElement.querySelector("#questionparts"+ n + " > .questionshowp").style ="display:block;"; // (5)
    this.onkeypress = undefined; // (6)

    master.insertBefore(f,master.children[master.children.length-1]) // (7)
}
form.querySelector("#questions").onkeypress = show; // (8)
form = form.cloneNode(true); // (9)

获取投票容器
获取投票问题表以用作模板
相对于其他人的数量设置新的投票问题表单id
将显示功能设置为新的投票问题
显示多项选择
确保后续按键不会产生更多问题
在.clear之前插入问题
设置要显示的第一个问题
创建新问题的副本以用作模板

有了这个，您当前的 scripts.js 是不必要的，并且.aquestionpart必须看起来像这样才能正确格式化

<div class="aquestionpart">
    <div class="questionparts" id="questionparts1">...</div>
    <div class="clear"></div>
</div>

从.questionparts中一定要删除onkeypress="show();" 从input 。 它应该是这样的。

<input name="questions" id="questions" class="form-control" placeholder="Questions" value="" type="text">

最后一个有趣的说明是我提供的两个脚本可以一起使用！ （略有改动）

//Author: Shane Mendez
var fieldgroup = document.querySelector(".questionshowp .form-group").cloneNode(true);
var addinput = function(){
    var parent = this.parentNode.parentNode.parentNode;
    var n = parent.querySelectorAll(".form-control").length 
    var f = fieldgroup.cloneNode(true);
    f.children[0].id = "question"+n 
    f.querySelector(".secondsec").querySelector("button.btn-success").onclick = addinput 
    console.log(parent)
    parent.insertBefore(f,parent.children[parent.children.length-1]);
}

master = document.querySelector(".aquestionpart");
form = document.querySelector(".questionparts");

function show(){
    var f = form.cloneNode(true);
    var n = master.querySelectorAll(".questionparts").length;
    f.id = "questionparts"+(n+1);
    f.querySelector("#questions").onkeypress = show;
    console.log(this)
    this.parentElement.parentElement.querySelector("#questionparts"+ n + " > .questionshowp").style ="display:block;";
    this.onkeypress = undefined;
    master.insertBefore(f,master.children[master.children.length-1])
    $(f.querySelectorAll("button.btn-sm.btn-success")).on("click", addinput)
}
form.querySelector("#questions").onkeypress = show;
form = form.cloneNode(true);
$("button.btn-sm.btn-success").on("click", addinput)

如果你把它放在你的 scripts.js 文件中并将它放在你的body标签的底部，那么唯一剩下的就是-按钮。

Answer 2

您可以使用此Press使用 jQuery 在 div 中动态添加多个输入字段。 在这里，您只需要调用HTMLElement两个参数HTMLElement和config的函数，例如：

  $(".addInput").click(function() {
    build_inputs($(this), config);
  });

在配置中，您可以添加输入表单配置的数量，例如：

let config = {
  title: "Slides",
  forms: [
    {
      type: "text",
      name: "name",
      class: "form-control mb-2",
      placeholder: "Enter Data..."
    },
    {
      type: "file",
      name: "image",
      class: "btn btn-light btn-sm mb-2 btn-block"
    },
    {
      type: "number",
      name: "mobile",
      class: "form-control mb-2",
      placeholder: "Enter Data..."
    }
  ],
  exportTo:$('#getData')
};

如何使用 JavaScript/jQuery 在 div 中动态添加多个输入字段？

问题描述

2 个解决方案

解决方案1
1 2016-06-22 21:02:53

编辑：误解的问题，在下面回答

编辑：真正的答案

解决方案2
0 2019-12-06 03:05:48

如何使用 JavaScript/jQuery 在 div 中动态添加多个输入字段？

问题描述

2 个解决方案

解决方案1 1 2016-06-22 21:02:53

编辑：误解的问题，在下面回答

编辑：真正的答案

解决方案2 0 2019-12-06 03:05:48

解决方案1
1 2016-06-22 21:02:53

解决方案2
0 2019-12-06 03:05:48