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

Question

I need to create some multiple input field dynamically on onkeypress event using JavaScript/jQuery.我需要使用 JavaScript/jQuery 在onkeypress事件上动态创建一些多个输入字段。

I have one text-box,when user is entering any key on that text area two input field and second text-box is opening.我有一个文本框，当用户在该文本区域输入任意键时，两个输入字段和第二个文本框正在打开。 When user will enter any key on second text box again another two input field and third text-box will open and so on.当用户再次在第二个文本框中输入任意键时，另外两个输入字段和第三个文本框将打开，依此类推。 There is also a cross button is creating to close each individual set of text-box.还有一个十字按钮正在创建以关闭每个单独的文本框集。 In my current code I doing this putting all field static as user may create many numbers of input field so that I want to create those in dynamically with different name and id .在我当前的代码中，我将所有字段设置为静态，因为用户可能会创建许多输入字段，以便我想使用不同的name and id动态创建它们。

My code is in this Plunkr .我的代码在这个 Plunkr 中。

Answer 1

EDIT: Misunderstood question, answer below编辑：误解的问题，在下面回答

This can easily be done if you have a specific field in which to create the input fields.如果您有一个特定的字段可以在其中创建输入字段，则可以轻松完成此操作。 For example, I will load input fields into document.body例如，我将输入字段加载到document.body

Everytime you call newinput() an input field is created in parent who's id starts at input0 and increments each time每次您调用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>

In your case, it looks like you want to add a group, you can do this:在你的情况下，看起来你想添加一个组，你可以这样做：

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

Create a copy of a field-group to be used as a template创建要用作模板的field-group的副本
Get the container of input fields获取输入字段的容器
Set the input field id with regard to total number of form-groups in parent根据父表单组的总数设置输入字段id
Make sure template applies addinput() to button确保模板将addinput()应用于按钮
Insert input form before end of parent form在父表单末尾插入输入表单

The easiest way apply this function to all + buttons is with JQuery将此功能应用于所有+按钮的最简单方法是使用 JQuery

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

This would need to be located at the bottom of your html file, and below addinput() definition这需要位于 html 文件的底部，在addinput()定义下方

EDIT: Real Answer编辑：真正的答案

Turns out I wrote all that and just realized I misunderstood your question.原来我写了所有这些，才意识到我误解了你的问题。 Still we can use the same principle to do what I believe you are asking我们仍然可以使用相同的原则来做我相信你在问的事情

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)

Get poll container获取投票容器
Get poll question form to use as template获取投票问题表以用作模板
Set new poll question form id with respect to number of others相对于其他人的数量设置新的投票问题表单id
Set show function to new poll question将显示功能设置为新的投票问题
Show multiple choice显示多项选择
Make sure subsequent keypresses dont create more questions确保后续按键不会产生更多问题
Insert question before .clear在.clear之前插入问题
sets up first question to show设置要显示的第一个问题
creates copy of fresh question to use as template创建新问题的副本以用作模板

With this your current scripts.js is unnecessary, and .aquestionpart must look like this for proper formatting有了这个，您当前的 scripts.js 是不必要的，并且.aquestionpart必须看起来像这样才能正确格式化

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

From within .questionparts be sure to remove onkeypress="show();"从.questionparts中一定要删除onkeypress="show();" from input .从input 。 It should look like this.它应该是这样的。

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

And finally an interesting note is that both of the scripts I've provided can be used together!最后一个有趣的说明是我提供的两个脚本可以一起使用！ (With some slight modifications) （略有改动）

//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)

If you put this in your scripts.js file and put that at the bottom of your body tag, then the only thing left is the - buttons.如果你把它放在你的 scripts.js 文件中并将它放在你的body标签的底部，那么唯一剩下的就是-按钮。

Answer 2

You can use this Press to add multiple input field inside a div dynamically using jQuery.您可以使用此Press使用 jQuery 在 div 中动态添加多个输入字段。 Here you only need to call the function that takes two parameter HTMLElement and config like:在这里，您只需要调用HTMLElement两个参数HTMLElement和config的函数，例如：

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

In the config you can add numbers of inputs form config like:在配置中，您可以添加输入表单配置的数量，例如：

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

EDIT: Misunderstood question, answer below编辑：误解的问题，在下面回答

EDIT: Real Answer编辑：真正的答案

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

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

问题描述

2 个解决方案

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

EDIT: Misunderstood question, answer below编辑：误解的问题，在下面回答

EDIT: Real Answer编辑：真正的答案

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

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

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