Question

我是JS新手，需要您的帮助！
我有一个上传公式，用户可以在其中将多个文件添加到数据库（php，mysql）。

现在，我希望输入按钮可以动态添加，这意味着当填充一个字段时，会显示另一个字段，依此类推。
每个文件确实都有一个标题字段，看起来像这样

                    Add one more file
+--------------+    +---------------+
|              |    |       +       |
|  ヽ( ≧ω≦)ノ   |   |     ++++++     |
|              |    |       +       |
+--------------+    +---------------+
> Titel ABC    <    > ______________<

我将隐藏输入按钮，并将其替换为带有“ +”之类的图像，但这不是此问题的一部分，正如您所看到的，我试图在一天结束时达到以下目的：）

这是一个代码，我在Internet上找到并进行了一些编辑，但是我无法用 input = file + input = text 替换“选项”。因此，当用户单击“添加”时，选择按钮和将显示一个文本字段。

function add(type) {
  //Create an input type dynamically.
  var element = document.createElement("input");

  //Assign different attributes to the element.
  element.setAttribute("type", type);
  element.setAttribute("value", type);
  element.setAttribute("name", type);

  var foo = document.getElementById("fooBar");

  //Append the element in page (in span).
  foo.appendChild(element);
}

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

body {
  background-color: grey;
}

h1 {
  color: white;
}

h2 {
  color: darkgrey;
}

<form>
  <h1>Add input elements dynamically</h1>
  <h2>Please select any type</h2>

  <div>
    <select name="element">
      <option value="file">File</option>
      <option value="text">TextBox</option>
    </select>

    <input type="button" value="add" onclick="add(document.forms[0].element.value)" />
    <span id="fooBar">&nbsp;</span>
  </div>
</form>

Answer 1

您要创建一个div并使用appendChild添加文件和输入字段：

window.addEventListener("load", function() {
  document.getElementById("add").addEventListener("click", function() {
    // Create a div
    var div = document.createElement("div");

    // Create a file input
    var file = document.createElement("input");
    file.setAttribute("type", "file");
    file.setAttribute("name", "file"); // You may want to change this

    // Create a text input
    var text = document.createElement("input");
    text.setAttribute("type", "text");
    text.setAttribute("name", "text"); // you may want to change this

    // add the file and text to the div
    div.appendChild(file);
    div.appendChild(text);

    //Append the div to the container div
    document.getElementById("container").appendChild(div);
  });
});

* {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

body {
  background-color: grey;
}

h1 {
  color: white;
}

h2 {
  color: darkgrey;
}

<h1>Add input elements dynamically</h1>
<form>
  <div>
   <input type="button" value="add" id="add" />
    <div id="container">&nbsp;</div>
  </div>
</form>

动态添加输入元素[纯JS]

1 个答案: